Release Notes

Significant upgrade to the rendering engine makes it easy to customize the list items and cards.

Labels
AJAX(112) App Studio(8) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(184) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Release Notes
Saturday, December 16, 2023PrintSubscribe
Render All The Way This Season!

Touch UI Framework has long been using the A tag (anchor element) to represent data items in grids, lists, and cards. This approach is inherited from the jQuery Mobile that served as the framework foundation many years ago. It does make a lot of sense to represent the actionable elements of the user interface as a link. On the other hand it is not possible or recommended to place a link in a link or wrap a link around the table or other complex markup.

Release 8.9.36.0 uses the div tag (content division element) as a container for the data items in grids, lists, and cards. This makes possible the custom renderers for the list items and cards.

image1.png
Custom list items and cards can be produced with JavaScript. Developers declare custom renderers for the views in the data controllers to produce items with the data field values, static text, links, buttons, icons, and images. Full inline editing capabilities are supported automatically.

The data items in screenshots above are rendered with the following code that makes use of the template literals for formatting. Touch UI framework creates an instance of an object with the properties set to the field values. The custom renderer function is invoked as the method of the object instance during the rendering process. Place this code to the ~/app/js folder in a file with an arbitrary name.

JavaScript

Here is an example of the custom cards that display images.

image2.png
The minimal JavaScript code and HTML markup can liven up the default rendering of even the simplests sets of data.

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

  • (Charts) The "day" cell in month presentation is inferred from the drag & drop target.
  • (ODP) Offline Data Processor now handles the 'url' and 'download' actions in the "summary" data views.
  • (Inline Editor) Inline editor does not throw an exception when the data item is removed.
  • (Touch Core) Added support for the "div"-based list items.
  • (Touch UI) Virtual page transitions start in the next animation frame. Previously the transitions started immediately, which causes a premature completion of animation on the fast devices.
  • (Touch UI) Custom "more" buttons can be introduced to the item by list/card custom renderers.
  • (Touch UI) The menu strip fades in when the window is resized.
  • (Touch UI) Html elements with "data-action-path" attribute are handled with the universal code.
  • (Touch UI) Actions embedded in the item or card correctly trigger whether or not the multi-select is enabled. Clicked/tapped action elements are searched in the "Action Column", "Grid", "Action Bar", and "Custom" scopes.
  • (Touch UI) The grid/list/cards items are rendered as div elements. Previously the anchor element was used. It is now possible to embed the "a" elements inside of the item markup when needed.
  • (Touch UI) Custom HTML renderers specified in the $app.render class are invoked. Developers can specify a custom renderer function as $app.render.[controller].[viewId].[list|card]. The function is invoked on the instance of a JavaScript object that has every field raw value as the property. The formatted values are specified in the "this._formatted" instance. The renderer must return the physical contents of the list item or card.
  • (Touch UI) The minimum height of the list/card is set to fit vertically the actions available in the "Action Column'' scope.
  • (Touch UI) The context menu of a field in the data item does not display the lookup "View" option if the data field is tagged as view-details-hidden.
  • (Touch UI) The notification that was invoked with the exception instance will stop the ongoing transition and set the framework to the "page ready" state.
  • (Touch UI) Custom actions can be specified in the custom markup of a data item or card
  • (Virtual Keyboard) The virtual keyboard displayed on the values with the spaces or text breaking characters will not cause the value to appear as "wrapped".
  • (App Studio) The inspector will skip the CSS tests that are not supported in the browser. The corresponding exception is logged in the console.
  • (Touch UI) Replaced the "a" tag with the "div' tag in the grid/list/cards presentation.
  • (Touch UI) Fixed incorrect rendering of the field selector and legend expansion in the calendar.
  • (Touch UI) Enhanced the visual presentation of the lists and cards in forms.
  • (PropGrid) The properties with the conditional complexity are identified whether or not they have the 'visibility' property of their own.
  • (ODP) The cleanup of the expired "changed" images is performed in the function to ensure compatibility with IE11. Please note that the new features of the Touch UI framework will not be compatible with this browser.
  • (Touch UI) The vertical menu takes into account the top of the virtual screen when nodes with the children are collapsed and expanded.
  • (Prop Grid) Optimized the tagging of properties.
  • (Touch UI) The modal form views with the modal-max-(tn|xxs|xs|md|lg|xl|xxl) will be 1 pixel wider than before.
  • (PropGrid) Method _tagged(regex) assigned to the property evaluation targets will return an object without properties if the matching is not found.
  • (RESTful) The view IDs specifies in the resources will not force the RESTful API to treat them as the view ID specifier. Instead they are treated as row identifiers. The new method RESTfulREsource.SegementIsIdentifier return return true when the data controller name is Views and there is an identifier of the Controllers. This allows App Studio to fetch views from the data controllers by their "id" attribute value.
  • (Universal Input) Pressing Delete, Backspace, and Space in the input field will not cause the vertical scrolling in the webkit browsers.
  • (PropGrid) The read-only fields will not clear when Delete, Backspace, and Del keys are pressed.
  • (Prop Grid) The "compound" complex properties are collapsed when are displayed in the Properties Window for the first time. Their value color matches the color of the editable input fields. The "boolean" subproperties contribute their name to the "compound' field value while the other subproperties are contributing their value instead.
  • (Prop Grid) Double-clicking the compound value of the complex property will expand or collapse its children.
  • (Prop Grid) The HTML selection is disabled completely in the Properties Window when users are dragging the mouse pointer between various elements.
  • (Prop Grid) Pressing Escape key will gradually remove the focus from the active input to the active property, from the active property to the property window. If there is no focused property in the Properties Window then the hierarchy is closed.
  • (ODP) The search implementation is using the native unicode support in the regular expressions available in the modern browsers.
  • (Framework) Prepared the alternative implementation of the $app;prettyText based on the native unicode classes available in the browsers. The framework will be switched to this implementation when the legacy Project Designer is disabled in the v9. This sys/unicode.js will be removed from the framework in v9.
  • (PropGrid) The smooth expansion of a complex property is not performed when the selected child property is focused during the initial display of the hierarchy.
  • (Touch UI) The notification messages appear as detached from the bottom of the screen by default. The 'ui.notify.detached' option controls behavior. Previously the notifications were displayed "flush" with the bottom of the screen.
  • (Touch UI) The new option 'ui.notify.bottomMargin' specifies whether there is margin between the bottom of the screen and the notification. The default value is true.
  • (2FA) If the email is not specified in server.2FA.setup.methods, then the automatic setup is always assumed to have the 'email: true' option.
  • (Prop Grid) Complex properties may be "comlex" on demand. If the child sub-properties are not visible, then the "complex" property is displayed as a "simple" property without a toggle next to it.
Wednesday, November 1, 2023PrintSubscribe
November 2023 Hotfix

The following features and bug fixes are included in the release 8.9.35.0:

  • (Framework) The errors are displayed as notifications when evaluating the availability of actions in the given context. Developers will see a notification displayed if there is an error while evaluating the When Client Script expression specified on an action. Such expressions are written in JavaScript and allow implementing the conditional availability of actions.
  • (Framework) The legacy syntax [FieldName] will not conflict with the new recommended method of referencing fields in the When Client Script expressions of actions. The recommended syntax is this.FieldName. For example, this.UnitPrice > 100.
  • (Designer) The Windows-based legacy designer does not crash when selecting the Controllers, Fields and a few other nodes in the Project Explorer.

We are aggressively executing on the roadmap of the App Studio, the new embedded development environment for applications created with Code On Time. The App Studio is available in the apps with the HTML page model and Touch UI. Make sure to inspect the various user interface elements of your application and view their properties in the new Project Explorer hierarchy.

Developers that rely on the ASPX page implementation or Classic UI will have an opportunity to try the new tools in the upcoming releases. The project list and the standalone tools will appear directly in the same page that presently provides the newsfeed when the app generator is started.

image1.png
The Project Explorer hierarchy is displayed when a field in form or grid/list/cards is inspected. An individual without any understanding of the application will have instant access to the project configuration directly from the live app running on the locahost in their favorite browser. The hierarchy is working in the readonly mode in this release.

A few clicks allow making changes to the application behavior in the Settings hierarchy in a live application running on the localhost.

image2.png
Click the Settings button on the App Studio toolbar to activate the Settings hierarchy. Multiple properties can be configured directly in the live application right now.
Tuesday, October 31, 2023PrintSubscribe
Hierarchies Are Taking Shape

The release 8.9.34.0 introduces numerous visual and behavioral enhancements to the App Studio hierarchies. There are also important features and bug fixes that will improve the performance of applications created with Code On Time.

image1.png
The tree in a hierarchy is now provided with a dedicated toolbar. The system Refresh, Collapse All and Properties buttons will allow developers to operate the hierarchies in a consistent manner. The Pin command will create a reference to the selected configuration element on the surface of the Studio in the future releases. The node-specific actions will appear on the toolbar.

App Studio Hierarchies

The hierarchy is the core feature of the App Studio, the new development environment embedded directly into the applications created with Code On Time. This release provides an extended set of options available for configuration in the Settings hierarchy. Developers can inspect the live app and see the properties of the data controller fields. The Project Explorer hierarchy provides the read-only access in this release. The Models hierarchy is unchanged and provides access to the data models and their columns.

The following enhancements are available in this release:

  • The RESTful API limit default is set to 2500 to ensure that all controllers, fields, etc are visible in the hierarchies. The original default value was set to 100.
  • Extended the UI Automation rules.
  • Added the basic server.rest configuration.
  • Added the visible expressions to the barcode and ui-automation configuration to hide properties when not enabled.
  • Added the "group" nodes to the controller, e.g. command, actions, etc.
  • Added the 2FA settings in the Membership and Authentication section of settings.
  • The studio is available in the live apps based on the HTML page implementation model only. Apps based on the Classic UI and ASPX page model will be configurable directly in the App Studio application without the live preview and ability to inspect the user interface.
  • (App Studio) The "...not fully implemented..." message shows the App Generator version instead of the app version.
  • (PropGrid) The hierarchies have a dedicated "close" button. Another option to close is to tap out.
  • (PropGrid) The "Properties” command executed in the tree will center the selected node if it was scrolled away.
  • (PropGrid) The "tree" can gain the keyboard focus.
  • (PropGrid) Double-clicking the information pane divider will toggle between its default height and the height that ensures that the entire content is visible.
  • (PropGrid) Expanding a category or complex property will scroll the inner content to maximize its visibility as needed.
  • (TreeView) Expansion of nodes and navigation between the nodes in the same hierarchy is smooth instead of being instant.

A hierarchy is built with two new features of Touch UI, the TreeView and the PropGrid. Both features will be made available to developers for use in their own projects in the future.

Features and Bug Fixes

The following bug fixes and enhancements are a part of the release:

  • (Touch UI) Advanced Search displays the available lookup values for the fields in the form while taking into account both the operators that require a value and those that do not require a value. For example, setting the "DateTime" field operator to "last week" will reduce the number of options available in the dropdowns of the other fields in the search form. Previously the operators without a value were ignored.
  • (Touch UI) Notification bar/toast will not push the modal form upward when the form transition is taking place. The notification will be delayed until the end of the transition.
  • (Touch UI) The data controller notifications start displaying right away. Previously a non-controller related notification had to be displayed first for the controller notifications to begin showing.
  • (Touch UI) Enhanced styling of the single-column and multi-column forms. The automatic form templates always make use of the “collapsible” containers.
  • (Touch UI) The simple and collapsible containers in forms are hidden unless they contain at least one visible data container or if there are no data containers but there are visible children.
  • (Data Aquarium) Dynamically generated JavaScript business rules are precompiled and reused for better performance.
  • (Touch UI) The Expand/Collapse tooltip of the collapsible container in a form will appear only if the toggle is clicked.
  • (Touch UI) The ability to configure the complex sort expression through the context menu of a grid/list/cards view is restored. It was broken in the previous release.
  • (Framework) The new this.FieldName syntax is fully supported in the When Client Script property of the data controller actions.
  • (UI Automation) The automated forms will remain visible when the automation rules are executed if the ui.automation.debugging is set to true in the ~/app/touch-settings.json configuration file. This is a useful feature that accelerates the development of applications driven by barcode readers.
  • (UI Automation) Fixed the typo that prevented the subsequent execution of the "then" rules during the automation.
  • (Action State Machine) The Select and Edit commands initiated in the form are executed by the parent view after the form is closed. All other commands are executed in the context of the active form.
  • (RESTful) The names of the data controllers, views, fields, etc. with "_" are allowed to be specified in the path of the resources.
  • (RESTful) The foreign key fields in the resources with the compound primary keys are correctly resolved during the navigation.
  • (RESTful) The "public" API Keys are included in the path of the "lookup-" resources.
  • (TreeView) The data-studio-link navigation is instant.
  • (TreeView) The tree remains invisible during the initial rendering and performs the instant scrolling of the visible node into view.
  • (Touch UI) The $app.touch.scrollIntoView(element, block) method will scroll the element into view if it is not fully visible. The optional block parameter accepts 'start', 'center', and 'end' values that will indicate the new location of the scrolled element in the owner's boundaries.
  • (TreeView) The $app.touch.treeView.context() method returns the context data of the TreeView in the active form if the child node is not specified.
  • (Prop Grid) The selection of a node will cause the navigation toolbar to update its contents and state of the buttons.
  • (Touch UI) Added new resources related to the property grid.
  • (PropGrid) The vertical scrollbar is correctly refreshed when another tree node is selected.
  • (PropGrid) If there is no selected property then the "information" pane is cleared.
  • (PropGrid) Native "dblclick" event will reset the dimensions of the dynamic components of the Properties Window.
  • (PropGrid) The event propgrid.app is triggered with the 'propGrid.eventName' set to 'action' when a button is pressed on the toolbar of the tree or properties.
  • (TreeView) The partially visible node is scrolled into view before the 'select' is triggered when the node is selected by the user.
  • (Prop Grid) The dedicated toolbar is displayed above the navigation tree.
  • (Prop Grid) Expansion of a category or complex property will cause the contents to scroll upward to ensure maximum visibility of the expanded content.
  • (Prop Grid) Reduced the height of the hierarchy title.
  • (Prop Grid) The 'visible' attribute of a category is propagated either to its "primary" property or assigned to the first property that has no "visibility" expression of its own.
  • (PropGrid) A tap on the "readonly" property value will select its label.
  • (Prop Grid) A click on the "horizontal" line separating two properties will select the one above. Previously the entire line was "dead" to the click and it caused the impression that the grid is not responding to the click.
  • (TreeView) The container representing a tree node is now marked as app-node. The text of the node is marked as app-text.