Code On Time: Release Notes

Blog

Release Notes

Tuesday, August 4, 2020Print Subscribe

Master-Detail Models, Icon Fonts, Developer Mode for v9

Release 8.9.6.0 introduces data models with master-detail fields, outlined and regular icon fonts, support for 3rd-party icon fonts, and the Developer Mode compatible with the upcoming Code On Time v9.

Library is Moved to The User Profile

Windows 10 maps the location of the [Documents] folder to the One Drive managed folder by default. This certainly helps the end users to synchronize their content across multiple devices. This also creates certain inconveniences for Code On Time developers, since the code generation library and project backup files are stored there. One Drive aggressively restores/backs up the files in the [Documents] folder and corrupts the the code generation library.

Starting with this release the code generation library root folder is placed in the [User] folder instead.

If you have [Documents]\Code OnTime folder on your computer then you will not be effected. You can transfer the code generation library to the new location by moving this folder to your user profile folder under c:\Users.

Master-Detail Data Models

Model builders now allows creating details. Detail is a connected child data model with a unique field name and optional custom label and tab. Details are available on the dedicated Master/Detail panel.

Developer can navigate to the child data models and return back by select the masters.

Each detail is implemented as a field with DataView type. Previously it was possible to create DataView fields in the Project Designer only. Today developers can instantly produce complex master-detail relationships on the stage of the data model implementation.

Do not create details in the models if you have defined the same DataView fields in the Project Designer.

Do create details directly in the models if you need a data view field.

Watch the tutorial to learn how to create details in the models. Coming Soon

Icon Fonts

The up-to-date set of material icons is now included. Developers also have an option to choose "outlined" icons for the GUI of the project. Here is a sample of "outlined" icons in the project.

Enter the following in ~/touch-settings.json to activate the outlined look-and-feel.

Touch UI also makes it easy to use the 3rd party icon fonts in the apps.

Watch the tutorial to learn to add icon fonts to your project. Coming Soon

New Banner Area in GUI

It now possible to display a dedicated banner above the app on the page. It may look like this:

The following steps will need to be performed to enable the banner.

First, enable the banner in ~/touch-settings.json.

Next create a script in ~/app/js folder and supply some content.

Use the banner to display the regulatory information or additional controls for your apps.

Developer Mode for v9

The new "Developer Mode" is now available directly in the apps. Select Developer Tools | Device option in the context menu of your app and choose the desired device and screen orientation.

Developer Tools options is visible only if your app is running on local host. If a device is selected then you will see your app sized to the physical device dimensions with the gaps surrounding the contents. The app is fully functional.

The upcoming Code On Time v9 will feature the live Project Designer embedded directly into live applications. When activated, the new Project Designer will also enable the developer mode for your app. The designer will be overplayed on top of the application.

Reading Pane, Display Flow, and Community Forum

At the beginning of July our ten-year old community site has been shut down by the 3rd-party provider who owned and operated the software. We have retained the contents and are rebuilding the new community and support portal with our own Display Flow technology that was introduced for the first time in Kiosk UI (watch the part 4 or the tutorial).

The software is implemented as Touch UI addon and brings many exciting features to the content management and presentation. The direct impact is the inclusion of Code Mirror for preview of code samples and Quill.js editor that will replace our Rich Text implementation starting with the next release.

Reading Pane is included in the new code base of Touch UI with this release. We still need to do some work and have a big place for the Preview Pane in the new community site.

Here is a little preview of how the new community and your own apps make look like:

Features and Bug Fixes

The following features, fixes, and enhancements are included in this release:

(Touch UI) Option navigation.dataControllers.enabled set to true in ~/touch-settings.json will intercept hyperlinks that have the data controller URL parameters and open the corresponding data controller view directly in the current page.
(Touch UI) Method $app.touch.show accepts syncWith property in the the option. If the data controller is specified in syncWith and the data view activated with $app.touch.show is saved, then the corresponding controller data will be refreshed upon getting the focus back.
(Url Parameters) If data controller URL parameter interception is enabled with navigation.dataControllers.enabled in ~/touch-settings.json, then the _syncWith parameter in the URL will cause the views of the specified data controller to refresh upon return of focus
(Project Designer) Project revisions are injected in the Sync.*.xml files with the help of XML parser instead of regular expressions. Previously this has caused corruption of logs when certain conditions were met.
(Command Line) Command line code generation option "-Objects" allows specifying alternative names for the generated models/controllers/pages. For example, the following will create models/controllers/pages with the names "Catalog", "Vendors", and "Categories"

codeontime.exe -Generate c:\apps\app1 -Objects "Products=Catalog,Suppliers=Vendors,Categories"
(Command Line) App generator supports command line option "-Controllers" specified with "-Generate" command . This option will cause the app generator to rebuild the controllers from their models. This makes possible making changes to the model and having them incorporated in the data controllers during code generation. The app automatically deleted Controllers.Baseline.xml and Controllers.Cache.xml when the option is specified.
Start page of the app generate displays "Locate" link below the list of projects. Click on the link to see the location of the code generation library on your computer.
(Model Builder) Master-Detail data models are supports through "detail" fields.
C# code generator simplifies property assignments for the new object instances in the standard code base.
Generated C# code wraps single if expressions in the else clause with curly brackets to ensure output consistent with the auto-format in Visual Studio.
Code generator replaces "tabs" with 4 spaces in both C# and VB.NET code output and trims the empty lines and line endings.
(Framework) New implementation of Export performs retrieval of data in blocks of 1000 records for data Download and Export to Spreadsheet. Business rules are executed for every row just like when the data is retrieved for presentation on the pages.
(Framework) Access duration for Export to Spreadsheet is controlled by the parameter export.rowset.accessTokenDuration, which can be specified optionally in ~/touch-settings.json.
(Framework) Class ApplicationServices allows creating a ticket with the explicitly specified access and refresh duration.
(Touch UI) Sidebar summary items are displayed with the correct background color with all theme accents.
(Touch UI) Option ui.banner.height in ~/touch-settings.json will allocate a "banner" area atop of the page. Developers can place arbitrary content in this area. The area is never obstructed by the GUI of the app. Custom content can be created in this are in start.app event triggered on the document. The banner can be located with #app-banner CSS selector.
(Touch UI) Import correctly handles lookup values and performs a case insensitive partial match of columns when the fields are mapped with the import data feed.
(Kiosk UI) Kiosk mode can be enabled on specific pages only. Select the page in Project Designer and check Kiosk checkbox to enable kiosk mode on the page.
(Framework) Method IDataControllerGetPage includes DataView fields and virtual fields in the field and data type maps to prevent the exceptions when working with the data sets created by business rules.
(Touch UI) Includes up-to-date material icons as of 7/22/2020. Regular (Filled) and Outlined icons are now supported.
(Framework) Method SiteContentFile.ToString() return the correct full file name for the files retrieved with the wildcards in the name.
(Client Library) Visible When and Read Only When expressions are displaying the diagnostic messages to help with the resolution of errors.
(Touch UI) Basket input displays the lookup button in the correct position next to the input when there are multiple lines of items.
(Touch UI) Basket items will not disappear when a duplicate item is selected.
(Touch UI) Lookup details will not be affected by the URL parameters.
(Touch UI) Method $app.touch.whenPageShown will wait for the document to acquire the "complete" state before the callback is executed. This prevents the incorrect navigation history stack caused by "hash" changes in the callback of the method.
(Framework) Action "Confirm" will parse the list of controller names in the argument and send the form values as external filters to the matched data views. This may be useful when implementing Custom Search with multiple results presented to the user.
(Framework) URL Hashing issue is resolved.
(Reports) Microsoft Report Viewer 2019 is integrated in the application framework.
(Touch UI) Setting ui.theme.icons set to outlined in ~/touch-settings.json and will force the app to use the "outlined" material icons in the app. The default option is "filled"
(Touch UI) Fixed incorrect rendering of cards in the map view.
(Touch UI) Added support for ui.iconFonts in ~/touch-settings.json. The name of the icon font in the settings provides the prefix for the icons.
App generator now uses TLS12 for SSL communications with the external sites.
(Touch UI) Property $app.touch.pageTransitionCallback allows specifying an instant "pageready" implementation for the reading pane.
(Touch UI) User interaction with the master of the reading pane performs delayed "vclick" triggered after the "master" page is activated through navigation.
(Touch UI) Reading pane master and detail pages are correctly sized with "slide" transitions on physical and virtual screens.
(Touch UI) Reading Pane with support for resizing is integrated in the framework. Both horizontal and vertical splitting is supported.
(Touch UI) Fixed issued with the docking of forms on virtual screens.
(Touch UI) Removed references to the legacy panel/reading pane implementation.

Labels: Master/Detail, Release Notes

Tuesday, May 12, 2020Print Subscribe

Barcodes, QR Codes, and RFID tags

Code On Time release 8.9.5.0 introduces the framework-level support for barcode input and unique User Interface Automation technology with optional Kiosk UI. Developers can handle the values incoming from the barcode and QR code scanners and RFID readers.

UI Automation makes it possible to send commands to the user interface of apps based on Touch UI to perform complex simulations of user actions. UI Automation rules are triggered by scanned barcodes or changes in the state of the user interface. The rules are written in JavaScript and operate both in offline and online mode.

Kiosk UI is the feature of UI Automation. Developers can describe the display flow of data elements to present the alternative views of data in Touch UI. The following screenshot demonstrates the complex master-detail presentation of the Order Form that can be easily operated even by the inexperienced end users.

The comprehensive video tutorial is available on our YouTube channel. The source code developed in the tutorial can be found at https://codeontime.com/blog/2020/05/hello-barcodes-sample-code.

Part 1: Live demo. (33 minutes)

The live demonstration of barcode, QR code, and RFID processing in a demo app running in Firefox browser. Watch this part and skip the rest if you are short on time.

Part 2: Building Order Entry Form (1 hour 45 minutes)

Learn how to build the Order Entry Form shown in the live demo. You will learn to assign default values, calculated extended price and order total in the manner compatible with online and offline modes. We demonstrate the application working in the web browser and in “offline” mode in Cloud On Time app. Watch this segment to learn how to create apps with Code On Time (there are no barcodes - just the new “approved” method to app development)

Part 3: Barcode Input and UI Automation (3 hours 30 minutes)

This segment starts with an explanation of barcode processing in Touch UI. Learn how to enable barcode/QR code/RFID input in the app and how to perform the low-level processing of scanned values.

The bulk of the video explains the brand new UI Automation. You will learn how to build “if this then that” rules to bring Artificial Intelligence into your app. The rules handle barcodes, QR codes, and RFID tags.

You can make your own rules to perform complex user interface activities in response to keyboard shortcuts or custom actions. UI Automation makes possible “post production” app enhancements without making changes to the core app with simple JavaScript declarations written in Prolog style. Barcode processing is just one of the capabilities of UI Automation.

The segment ends with the demonstration of barcode, QR-code, and RFID tag processing in “offline” mode.

Part 4: Kiosk UI (2 hours)

Learn to create an alternative presentation for the Order Entry Form that will work great for the inexperienced users and the users on-the-go. Kiosk provides a “remote control” for the Order Entry Form.

You will learn about Display Flow technology and Kiosk User Interface (optional feature of UI Automation). See the brief introduction of Kiosk UI from part 1 at https://www.youtube.com/watch?v=35Vh_aOuQQc&t=1474.

The segment ends with the demonstration of Kiosk-style order entry in “offline mode.

The following features and bug fixes are also included:

(PostgreSQL) Model Builder displays entities in alphabetical order.
(PostgreSQL) Model Builder now "sees" the database views in the schema.
(Framework) Method dataView.sync() correctly assigned the key to the selectedKeyList.
(Touch UI) Method $app.touch.focus does not crash when the container is null.
(Touch UI) Fixed CSS rules for the icons in the modal form titles.
(Touch UI) Apps based on Touch UI do not perform processing of "Chart" view type.
(Touch UI) Projects based on Touch UI do not have "ChartHandler" references in the web.config.
(Touch UI) Panels display a solid top border in native mode.
(ASPX) Membership manager is correctly initialized in the apps based on ASPX page model
(AppGen) The app generator will not report DirectoyNotFound exception while copying the Addons to the ~/bin folder of the app prior to compilation.
(Touch UI) Built-in tooltip does removes "script" tags from the rich html tooltips.
(Touch UI) Context items with "hidden:true" property are no visible in the Context Menu.
(Offline Sync) Partial refresh of changes client-side objects with the server data will also update the $app.syncMap. The views on the page will get refreshed when the sync is over.
(ODP) If the request to read data does not specify the view of the data controller then the ID of the first view is assumed to be requested.
(ODP) Display properties of the DataView field are correctly initialized. Previously the display properties such as Page Size were ignored.
(Touch UI) Method extension.headerText() is called to refresh the current command row when the view is refreshed.
(Touch UI) State of the checkbox is toggled in the grid view style if the field is not read-only and edit action is available.
(Touch UI) A correct header data is displayed in the form of automatically selected "new" record after insert even at all times. Prior to the fix the data text of the previously selected record was displayed.
(Data Aquarium) Calculate command errors are display as notification.
(Data Aquarium) Values with "p" format are converted into a "percent value" between 0 and 1.
(Data Aquarium) Data and time parsing is performed in the data fields "with tryParseFuzzy..." method before an attempt is made to parse the date string with Date.parse() method.
(Touch UI) Chrome OS and Android will use "Google Sans" fonts.
(Touch UI) Calendar popup has a pronounced border and displays a semitransparent background when modal.
(Touch UI) Chrome OS is detected and the UI will look like Android.
(Framework) Lookup view hides fields other than those that are specified in DataTextField and Copy map when Kiosk UI is active.
(Touch UI) Forms are always modal when displayed on top of Kiosk UI.
(Touch UI) Method $app.touch.toggleTooltip changes the tooltip of the element between "Collapse' and 'Expand'.
(Touch UI) The scrollable view displayed when the "See All" button is pressed is now behaving just like its originator.
(Touch UI) All forms are displays as modal when kiosk is active.
(Data Aquarium) Sync is not performed on reverse return from the form view to the the grid if there is no selection.
(Touch UI) The command row is assigned to the data view if it is blank even thought the primary key has not changed.
(Touch UI) Shortcuts can be triggered in touch devices.
(Touch UI) Sensitivity of touch movement is now set at 4 pixels. Previously it was set to 0.
(Touch UI)
(Touch UI) Event "themechanged.app" is triggered on the document when the app theme has changed.
(Touch UI) Method ResetUI will update the sticky header.
(Framework) Aliased and non-aliased field filter are detected in dataView.filterOf() method.
(Framework) Filtered by value primary keys are correctly presented in filter details in Kiosk mode.
(Framework) Method dataview.sync() will apply the primary key filter for better performance in Kiosk mode. Only one selected row will be displayed after sync
(Framework) Method dataView.sync() will clear the primary key fields from the filter unless sync is requested in UI automation mode.
(Framework) Data types without matching .NET counterpart (such as geography in MS SQL) are returned as binary strings starting with "0x" prefix. Previously the framework has crashed.
(Model Builder) Data preview works correctly with the SQL data types that are not mapped directly to .NET. such as "geography" in Microsoft SQL Server.
(Touch UI) Method $app.touch.showAccountManager() does not fail if membership is not enabled in the app.
(Touch UI) Search button in modal lookup forms is moved to the left side of the modal form title. The button is hidden when the search form is opened.
(Framework) Refresh token cannot be used to authenticate API requests.
(Touch UI) Activation of inline editor in response to user typing is performed with a delay to capture the input.
(Touch UI) Tooltip with the error message is displayed as as the raw user input is incorrect even if the user is trying to exit the field. This will help understanding the error messaging when entering incorrect numbers and dates.
(Touch UI) Activation of inline editor in response to user typing is performed with a delay to prevent conflicts with rapid input detection generated by barcodes scanners and RFID readers. It also improves the qualify of keyboard input capture prior to activation of inline editor.
(Touch UI) Popup calendar does not appear at random location when the user is rapidly changing focus to another field.
(Touch UI) Removed slight shifting of text in the drop down input in inline editing mode.
(Framework) External JavaScript business rules can execute before and after with optional async promises.
(Framework) Method $app.execute automatically figures the controller, view, data processor and other configuration properties if "from" or "in" property is specified in the options.
(Framework) Method $app.ifThisThenThat registers the UI automation.
(Touch UI) Focus frame takes the height of the row for checkbox fields.
(Touch UI) Direct click on the checkbox will toggle its value in inline editing mode. The same will happen if the user will press Space key int the cell with the checkbox.
(Touch UI) Inline editor advances to the next field in the row when user submits value on a mobile device. Inline editor displayed in overlay mode will continue to advance to the same field in the row.
(Touch UI) Delete key will clear the value of the active cell if the field is not read-only and not required.
(Touch UI) Auto-focus in the form in edit mode is perfomed is following the event 'pagereadycomplete.app'. Previously focus was set prior to the event.
(Touch UI) Direct click on the checkbox in grid will toggle its state if the user is allowed to edit the record the field is not read-only.
(Touch UI) Method $app.touch.isInTransition() performs an improved verification of the transitional state of the GUI.
(Touch UI) Method $app.touch.touched() will return true if the element specified in the argument has been clicked directly or through the layer of other elements. By default the boundaries are inflated by 2 pixels. The optional second argument allows specifying a more precise inflation.
(Touch UI) Method $app.touch.resetUI() will reset the user interface after UI automation to reflect the current state of the app. Various user interface elements are not updated during automation to improve performance. The makes possible a perfect refresh of the UI upon completion of automation.
(Touch UI) Method $app.touch.notify will accept an array as argument. Elements of array are join into a comma-separated string .
(Touch UI) Event 'ifttt.app' is triggered when the app has started to enable the initial "if this then that" automation.
(Touch UI) Lookup items are not created if the barcode input is in progress.
(Touch UI) Backspace key will activate editor and clear the field value in inline editing mode.
(Touch UI) Inline editor always activates with the maximum length to allow editing the field value without scrolling.
(Touch UI) Ctrl+Enter will post he field value and stay in the input field in inline editing mode.
(Universal Input) Shortcuts Ctrl+Z (undo) and Ctrl+Shift+Z will undo/redo the field value in each individual input. Typical web forms will gradually undo input values across all form fields.
(Touch UI) Popup calendar is not displayed when the focus of the date input is rapidly changed.
(Touch UI) Improved formatting of inputs and placeholders in inline-editing mode.
(Touch UI) Removed static rules used to position drop arrows in lookup/autocomplete/dropdownlist controls. This is now done programmatically for perfect positioning.
(Touch UI) Header of the active column is not displayed in "bold" font anymore. The column status is emphasized through the color only.
(Touch UI) Lookup does not request "formatted" data anymore. Formatting has caused text values to be copied to the borrowed fields. Formatting was used when duplicates were returned in the lookup and additional values are revealed to help the user to make the correct choice.
(Touch UI) Method $app.touch.inlineEditing() will toggle the inline editing mode of dataview specified in the argument.
(Framework) Method $app.execute will execute the request after a brief delay if ODP instance will be utilized. This improves overall responsiveness o the GUI.
(Touch UI) Method $app.input.execute() now accepts simple "map" object argument with the values that must be assigned to the mapped field names.
(Classic UI) A non-blank Editor property will not break the app in Touch UI mode.
(Touch UI) Processing of date keyboard shortcuts is performed in the timeout instead of instant response to keydown event. This improves consistency across browsers.
(Touch UI) The primary dataview on the "offline" page was using the data processor instance to delete records, which has caused the change not to be committed unless the delete was performed in the child form. Now the data processor is created only if the app is running in a true "offline" mode.
(Touch UI) The dedicated grid/list of items displayed for a lookup is always provided with a standard icon in the page header if a custom icon is not defined.
(Touch UI) Changed alignment of collapse/expand icons in the form category headers.
(Touch UI) The height of modal title has been increased from 32 pixels to 40 pixels.
(Touch UI) Ctrl+Enter does not populate the date. It simply refocused the field.
(Touch UI) Pressing space in the blank "date" field will enter the current date.
(Touch UI) Ctrl+Down|Up|Left|Right will change the current value of the date field.
(Universal Input) Input with focus is re-focused if its value has changed. This ensures correct display of value.
(Touch UI) Universal input $app.input.execute accepts field references in the values parameter specified as "field" property.
(Touch UI) Date/time input supports the following keyboard commands:

Ctrl+Enter - enter the current data/time in the empty field.
Ctrl+Left, Ctrl+Right - change the date by one day.
Ctrl+Up, Ctrl+Down - change the date by one week if the calendar is visible on by one day if the calendar is hidden.
Escape - close the visible calendar
Alt+Down, Ctrl+Space - show the calendar popup.

(Touch UI) Message "Loading..." is displayed in normal font (previously italic).
(Touch UI) Refactored lookup autocomplete to delay execution of server-side lookup while the user is typing. Also delayed replaced of value entered by the user to prevent lost keys.
(Touch UI) If the current selected item has a NULL value in the "Data-Text" field then "N/A" is displayed in the summary on the sidebar.
(Touch UI) Numeric input correctly places cursor at the end of the value on iOS devices.
(Touch UI) Popups will not restore focus after closure on touch devices.
(Touch UI) Lookup will not focus the input on mobile devices when the "Select" button is tapped by the user.
(Touch UI) Fixed alignment of "chevron/arrow button " in lookups to ensure accurate position.
(Native Apps) The current UI culture is used to filter out the resources required in the native front-end. Previously the internal culture was used as a filter instead.
(Framework) Lookups based on data controllers populated with business rules ("code" and SQL) are working correctly.
(Touch UI) Dates are correctly cleared when the date vale is erased by the end user in the form.
(Touch UI) Option ui.embedding controls if the app adjusts presenting when hosted in iframe of another website. The default value is 'auto', which will cause the app to disable inifinite scrolling and hide the navigation menu. If ui.embedding:false then the full user interface is displayed.
(Touch UI) Option {"host":{"enabled":false}} placed in ~/touch-settings.json will disable automatic user interface adjustment when the app is running in iframe.
(Touch UI) Built-in membership manager correctly closes the user form after Delete command
(Touch UI) The framework triggers menuinit.app event on the document at the start of the page construction. If the "nodes" property of the event is assigned then the menu nodes will be uses as the main menu of the app. Offline Sync uses this event to provide a trimmed menu when the device does not have an online connection.
(Touch UI) The framework handles menuchanged.app event. It uses the "nodes" property of the event as the new main menu. Offline Sync triggers this event in response to the changes in online/offline state of the device to expand/trim the menu nodes of the app visible to the user.
(OfflineSync) Triggers menuchanged.app event to let the app know about changes in the menu nodes.
(AppGen) If the generic Windows app is selected as the preview target for the app then the app generator makes sure that [Documents]\Code OnTime folder existis in order to persist the uma-launch.json action exchange file.
(Touch UI) System "Help" item is not displayed in the context menu of hosted apps.

Labels: Application Builder, Low Code, Rapid Application Development, Release Notes

Wednesday, December 25, 2019Print Subscribe

December 2019 Hot Fix 4

Release 8.9.4.0 introduces the following enhancements:

Generated apps are now compatible with Cloud On Time app v8.9.4.0 on OSX, iOS, and Windows platforms.
(App Gen) Project Wizard will locate addons in the user-defined location and in default [Documents]\Code OnTime\Addons folder.
(Touch UI) The width of the expanded sidebar has been increased by 44 pixels to match that of native Microsoft and Google apps.
(Touch UI) Optimized prevention of auto correct|capitalization|completion in text inputs by the web browsers.
(Touch UI) Methods $app.alert and $app.confirm will correctly call the corresponding callback or resolve the promise in response to any user action (click on OK, Cancel, [Close] icon, Back button, History shortcut). Re-entrance of the confirmation window is not possible.
(Touch UI) Fixed incorrect programming of double tap detection on touch devices.
(Touch UI) Implementation of $app.alert and $app.confirm is using promises.
(Touch UI) Multi-file upload works with ODP and selects the first record created in response to upload.

Labels: Application Builder, Mobile, Offline, Release Notes, Web App Generator