Drawing Pad, Responsive Grids, Faster Framework

Code On Time release 8.9.19.0 introduces the Drawing Pad and Responsive Grid features along with the significantly improved performance of apps based on Touch UI. 

Performance Enhancements

Touch UI is a very compact framework. As of today the total script library payload stands at 405 kB compressed while the only CSS resource is $49.7 kB compressed. The upcoming new feature Content Hub Add-on will transform the framework into the first rate publishing platform. We are remaking our website, this blog, the help desk, and the new community forum as the Code On Time apps. This imposes various Core Web Vitals requirements and many new features in this release are related to this effort. The framework now performs the pre-loading of web fonts and externalizes the search and import features. As a result all applications re-generated with this release are faster and smaller.

Images in the list items, cards, and forms are not retrieved unless visible. This feature reduces the number of the requests handled by your applications and also benefits the Content Hub pages with the images.

Radio Button List lookup instantly triggers the event to inform the app about the value change and then starts playing the button status change animation. Previously the change event would not trigger until the animation has completed. If your forms have the conditional dependencies on the radio button lists, then the new release will make your app appear more responsive.

Forms with the categories of data fields configured as Wizard steps will appear more responsive if the “steps” include the child DataView fields. The new framework will cause the child data views to fetch values as soon as the “step” contents become visible.

Kiosk UI and UI Automation are significantly faster. The next update will bring about the Camera-based scanner directly in the application.

Drawing Pad

If the image is uploaded as the BLOB field, then the Drawing Pad becomes available.

Default blob field values can now be provided as icons or external image URLs. The former provides a simple way to create the image placeholders as large colorful material icons.The latter introduces the foundation for sketching in your application. 

The upcoming Content Hub will allow drawing on the user-submitted images and screenshots taken directly from the live application when submitting the help desk tickets or creating the community forum posts.

Responsive Grid

The new tag column-width-(tn|xxs|xs|sm|md|lg|xxl)-NNN makes it possible to specify the default and responsive width for individual columns expressed in pixels.

The following features, bug fixes, and performance improvements are included:

• (Touch UI) Enhanced font preloading and eliminating the transparent/missing icons at 90%, 110% and other irregular zoom values in the Chrome, Edge, and Safari.
• (Touch UI) Clicking anywhere outside of the inline editor will cause auto-post of the row unless initiated with the Escape key or the explicitly selected Cancel command.
• (Touch UI) New tag modal-title-minimal will force the modal form to display a minimal modal title permanently. Typically the minimal title is displayed in the minimal state only if the modal form content is scrolled down.
• (Touch UI) Advanced Search will always display the default suggested and required fields in every match group. Previously the suggestions were not visible and only the previous search conditions were retained. The new behavior makes it easier for the end user to refine their search if the previous search has not yielded the desired result.
• (Universal Input) Enhanced the speed of response of the radio button list. The "click" processing happens before the animation has been completed for a more responsive GUI.
• (Universal Input) Lookup data field tagged as lookup-auto-advance will migrate to the next input in the form.
• (Universal Input) Lookup data field tagged as lookup-auto-advance-row will migrate to the next input in the same row container.
• (Universal Input) Radio button list uses the styling that does not create an empty dot in the middle of the selected radio button list on some monitors. If lookup-auto-advance tag is applied then the "focus" frame is not displayed during the transition from the radio button list to the next input.
• (Blob) Drawing Pad is available to markup the images directly in the app.
• (Touch UI) Option ui.menu.position controls the position of the navigation menu in the sidebar.  The default is top. The second supported value is bottom.  Requires ui.menu.location to be set to sidebar in touch-settings.json. Previously the sidebar menu always displayed at the bottom of the sidebar by default.
• (Model Builder) Enhanced serialization of the database metadata uses a simple loop instead of the recursive calls and improves ability to handle huge databases faster. Previously a database with more that 1500 tables has failed to serialize due to the stack overflow.
• (Touch UI) The default dedicated login page created by the app generator is now programmed to allow the app to decide the landing page after the successful login. The URL returned by the method ApplicationServices.UserHomePageUrl() will determine the landing page. The default landing page is ~/pages/home. Override the method the partial class implementation to introduce your own landing pages.
• (Touch UI) Wizard form buttons are correctly refreshed when the form is opened in the reading pane.
• (Framework) Logout will not cause the exception in the server-side code when vi-VN culture is set.
• (Touch UI) New tag column-width-(tn|xxs|xs|sm|md|lg|xl)-NNN will define the precise width of the grid column for a particular page width.
• (Touch UI) Modal form with fitted height ignores the virtual keyboard stub when calculating the height.
• (Touch UI) Font preloading instruction is included in the pages automatically.
• (Touch UI) Externalized import API into ~/js/daf/daf-search.js to reduce the required footprint of Touch UI.
• (Touch UI) Externalized implementation of import into ~/js/daf/daf-import.js to reduce the size of the core framework.
• (Framework) Method $app.saveFile(name, text, type) will cause the WebView to display a prompt to save a file with the given name text in UTF-8 encoding with the option type, which defaults to text/plain.
• (Import) Import handles the child data view lookup fields that have their names not matched with the master table field name.
• (Touch UI) Collapsible menu in the sidebar will not be visible when expanding/collapsing transition is intersecting with the sidebar mini calendar.
• (Touch UI) Blob thumbnail will open a "save file" prompt when clicked. Previously the internal preview popup was displayed.
• (Touch UI) Blob thumbnail will open a "save file" prompt when clicked. Previously the internal preview popup was displayed.
• (Blob) If the  blob field is tagged as image-user-defined-none then tap on the image will activate the drawing pad. Otherwise the file selection window is presented.
• (Touch UI) Numerous core classes from the legacy jQuery Mobile have been removed for improved performance.
• (Touch UI) Item in the panels do not trigger taphold.
• (Multifile Upload) Drawing pad is available if only one file is selected for upload.
• (Multifile Upload) The names of the files are automatically trimmed if they exceed the length of the "name" field. Previously the upload was rejected due to inability to insert the placeholder record into the database.
• (Framework) The external filter of the parent is passed when actions are executed on the child data view when there is not direct master-detail relationship between the two.
• (Framework) The external filter of the child data view is included with the Execute requests in its forms.
• (Framework) Multi-file upload will pass the external filter of the data view with the Insert requests.
• (Blob) Field tagged as image-editor-none will not allow manipulation of the image on the client.
• (Blob) Clearing of the blob in the form will trigger getdefaultblob.app event on the document to allow the default value to be supplied.
• (Blob) Event getdefaultblob.app will cause the drawing of default image as a material icon if e.blob.icon property is specified. The optional color can be specified in e.blob.color property.  The default image based on the icon is drawn only if the blob field is tagged as image-size-WxH where W and H are the width and the height of the default image.
• (Framework) New method $app.intersect returns true if the two objects specified in the augments are intersecting. Objects may represent the ( x,y) point, the rectangle, or the DOM element.
• (Universal Input) New "slider" input is now a part of the framework.
• (Touch UI) The alert popup displays the message as a note to ensure that the entire text is visible.
• (Framework) Html detection also includes the search for encoded characters and symbols.
• (Survey) Enhanced error reporting when loading survey definition from the server.
• (Kiosk UI) Modal background and glass pane are invisible if the Kiosk UI is displayed above the app.
• (Touch UI) Fullscreen pages without gap with the buttons will take into account the safe area at the bottom on iOS devices.
• (Barcodes) Significantly improved performance of the barcode processing during UI Automation. Automation processor uses a fast check for the first IfThisThenThat condition to trigger in response to the barcodes triggered. App pages of the app are ansible while the Kiosk UI is active.
• (Touch UI) Eliminated the double divider at the bottom of the list of items in the sidebar.
• (Touch UI) Tooltips of the buttons in the fullscreen form without gaps are displayed above the parent toolbar.
• (Blob) Image preview is not draggable in the desktop browsers.
• (Touch UI) Image loading observer will keep track of resolved/observed URLs for enhanced performance.
• (Touch UI) Method $app.touch.observe(url) will return the observed URL if the URL has been observed already on the page.
• (Touch UI) Method $app.touch.observe(enable, container) will start observing the element visibility.
• (Upload) Dropping the non-file content on the drop target will not cause the field to clear.
• (Touch UI) Field footer text of  empty values is NOT displayed in "lower-case". 
• (Touch UI) Method $app.touch.show({headerText: 'Text 1', controller: 'c1', startCommand: 'New', startArgument:'createForm1'}) will correctly assign the  value of the headerText option to the page header of the form when the command option is set to New.
• (Touch UI) Method $app.touch.pointrer('pen') returns true if the last touch was with the "pen" pointer.
• (Virtual Keyboard) Virtual keyboard is not activated if the input is touched with the "pen" pointer. It allows the user to write on top of the input without interruption.
• (Universal Input) The numeric input type is not set to "number" on mobile devices if the input was touched with the "pen" pointer.
• (Touch UI) Click the blob drop area will cause the BLOB field to become focused.
• (Blob) Drawing survey is displayed when "draw" icon is tapped.
• (Touch U) If the "fullscreen" button is hidden with the modal-buttons-fullscreen-none then the button on the left side of it is shifted to the right to fill the gap.
• (Display Flow Designer) Arrow keys Up/Left/Down/Right with Shift and Control modifiers will select / deselect display objects in the flow if the there is no active text input.
• (Data Aquarium) Command Search will activate the confirmation controller specified as _controller=Name variable in the Confirmation property of the action. It will restore the previous search values. The search is cleared when the filter is  canceled by the user.
• (Touch UI) Custom search is activated when the controller with Search action in Action Bar scope is specified as the lookup of another controller.
• (Data Aquarium) Action with command name Search will not cause the  SyncKey data conversion error on the server.
• (Display Flow) Ctrl|Shift + Up|Left|Down|Right will make the first/last selected display object visible in the WebView.
• (Touch UI) Default values for BLOB fields are now supported.  The getdefaultblob.app event handler will specify the default blob file for the field. The specified file is automatically downloaded and selected as the blob value.
• (Framework) $app.getScript loads the dynamic dependencies and executes the callback when the resources and their dependencies are available.
• (Display Flow) "Code" blocks render with the Code Mirror in IE11.
• (Display Flow Designer) All  resources of Code Mirror are loaded on demand when the "code" display objects are included in the display flow.
• (Display Flow) "Code" display blocks are provided with a caption showing the code type and the optional description.
• (Data Aquarium) Files codemirror.min.js and codemirror.min.css are included in ~/js/lib folder when the app is generated. This library is automatically loaded in Display Flow pages with the code blocks (sample C#, HTML, JavaScript, etc.)
• (Touch UI) Multiple keyboard shortcuts for the same char code are now supported. For example, Ctrl+V and Ctrl+Shift+V will paste the content in Display Flow page before and after the selected block of display objects.
• (Display Flow Designer) Copy and Cut work with the internal buffer to allow easy manipulation of the content.
• (Touch UI) Typography of H1-H6 tags in two different variations and the jumbo version. The second large font size starts on "large" screens (>= 992px)
• (Touch UI) Method $app.elementAt(p) returns the jQuery element at the specified point in the page. If there is no argument, then the element at the last touch/click point is returned.
• (Touch UI) Optimized the code base to use $app.clientRect and $app.elementAt methods.
• (Touch UI) Reduced the right margin of material icons to 1/20 of the element in Bootstrap and Display Flow content pages. 
• (Bootstrap) Removed the leading spaces after the material icons in the Bootstrap content templates.
• (Touch UI) Material icons have the fixed width of 1em in the Bootstap and Display Flow pages to avoid the horizontal shifting while the stylesheets are loading.
• (Data Aquarium) Method $app.getScript(url, callback) will load the script from the app and invoke the callback. It enables dynamic loading of client library files with support for debugging in Visual Studio.
• (Touch UI) New dynamic BLOB image loading will delay the loading of image thumbnails until the image is in the view of the end user.
• (Framework)  Meta tag  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge" /> is added to the page on the server if IE 11 client is detected.
• (Framework) Content Type header of combined CSS and JavaScript is provided with the chartset=utf-8 instruction.
• (Framework) Meta definition of the character set is the first element of the page head element.
• (Framework) Meta tags of the page are not closed.