Release Notes

Blog
Release Notes
Monday, October 4, 2021PrintSubscribe
2-Factor Authentication, "Actions" Lookup Style, Tap to Copy, Login Responses

 Code On Time release 8.9.23.0 is introducing the enterprise-grade security feature that helps secure the user accounts. 2-Factor Authentication is opt-in by default. It can also be applied to all users accounts in the existing and new apps automatically. Another highlight of the release is the option to inject the actions directly into the flow of the data fields in the forms. Multiple enhancements and bug fixes are also included in this release.

2-Factor Authentication

The new feature will require the verification code to be entered after the valid combination of username and password was provided by the user during login. The verification code can be delivered by an authenticator app installed on the personal mobile device. Other options include an email, text message, or voice call. Developers may even choose to hide the password field in the login form if the 2-Factor Authentication setup mode is automatic. 


The new multi-factor authentication enhances the protection of the user accounts. This feature was sponsored by Peter Marchal of Wonderland Office, Belgium. 

“Actions” Lookup Style

The new lookup style “Actions” makes it easy to inject the actions in the flow of data fields of a form. Action buttons placed right next to the relevant data fields gain better context and improve the user experience. The visibility of the individual action is controlled by “When…” properties associated with the action. The visibility of the entire cluster of action buttons is controlled through the Visible When property of the data field that has its lookup style set to Actions and the Name set to match the Id of the corresponding action group. 


Tap to Copy

The new tag text-action-copy will cause the “Copy” button displayed next to the data field value. Tapping or clicking on the button will cause the field value to be copied into the clipboard. See this feature in action in the screenshot above. The text is copied to the clipboard and also displayed in the notification at the bottom of the screen when the button is clicked.

Custom Login Responses

If the user login has failed, then the generic message “Your user name and password are not valid” is displayed by the apps. If the login was successful then the user is silently signed in. Sometimes a custom message or system response is desired. 

Consider the following examples:
  • The user account is locked and it is preferable to let the user know what actions must be performed to recover the account. 
  • Developers may need to inform the user about the number of remaining login attempts before the account is locked.
  • Multi-factor authentication must force the user to enter the verification code if the login was successful. 
Learn about Custom Login Responses in Code On Time apps.

Releases Notes

The the following features, enhancements and bug fixes are included in the release:
  • (Classic UI) Removed the link that allowed downloading the import template. 
  • (Touch UI) Fixed the incorrect reference to the API function in the import processor. This was causing the error with the long running imports when the status was updated.
  • (App Gen) Replaced the legacy community reference with my.codeontime.com.
  • (Virtual Keyboard)  The keyboard is minimized when the window loses focus and re-activates when the focus is restored.
  • (Framework) Moved methods and classes from ApplicationServices.cs(vb) to ApplicationServices.Auth.cs(vb).
  • (Class Library Apps) Files touch-edit.js and touch-input.js are copied to the ~/app/js/daf folder of the apps with the class library to enable debugging in Unlimited Edition apps.
  • (Framework) Method $app.prettyText formats international names as "pretty" strings.
  • (Universal Input) List box/ Check Box List / Radio Button List with 1 item has a compact presentation.
  • (Input) Qr code does not show the tooltip if the field is tagged as input-qrcode-tooltip-hidden.
  • (TouchUI) Check Box List item state transition is twice faster.
  • (Touch UI) Survey actions support the position=before|after option. If the option is not specified then actions are inserted just before the Cancel button. Actions with "before" position are placed before the "Submit" button. Actions with the position "after" are placed after the Cancel button.
  • (Framework) Method dataView.data('survey') returns the context data or a "survey" dataview. Used in the Property Grid and 2FA forms.
  • (Touch UI) The first row in the form category without the header will have a slightly large top padding.
  • (Touch UI) Freezing of the column in the grid with aggregates will not cause the exception.
  • (Touch UI) Keys F2 and Arrow Down will focus the first row in the focused DataView field in the form.
  • (Framework) Transaction processor correctly parses the temporary UIDs and resolves negative primary keys into "old" values encoded as UID if the corresponding new value is also the UID.
  • (Framework) Method Commit resolves the temporary primary key presented as negative integer or as uid in the format 000000000000-0000-0000-0000-00000001 with the key value recorded in the last segment.
  • (ODP) Client-side temp GUID primary keys are generated in the following format: 00000000-0000-0000-0000-00000000001. Only the last 12 digits are used to encode the temporary primary key, while the leading characters are set to 0.  The server-side framework resolves such GUIDs with the physical database values.
  • (Model Builder) Data View fields created in the model builder will have the filter fields correctly matched to the corresponding field names. Previously the original column name was used instead. If the output field name based on the column was not spelled in the same way then there will be incorrect filtering at runtime.
  • (App Gen) The codedom compiler now supports << (left shift) and >> (right shift) operators in C# and VB.
  • (Touch UI) Tag merge-with-prevous will cause the row to render without a separator line at the top to allow creating a contiguous group of fields in the form layout.
  • (Surveys) Setting the "text" of the question to "false" will cause the label to be blank.
  • (Touch UI) Setting the Label or Header Text of a field to $blank will result in a blank label of the field.
  • (Touch UI) Removed legacy references to the class ui-group-theme-a and ui-panel-page-container-a.
  • (Framework) If the style of field items is set to Actions then the field is marked as "virtual".
  • (Universal Input) Tag input-qrcode-size-192x192 will also trigger a custom input creation. The only input implemented now is "qrcode".
  • (Surveys) Survey definitions support causesCalculate on the actions and htmlEncode on the questions.
  • (Framework) Server-side method PopulateStaticItems will correctly assign Controller and View of the request to the internal ViewPage instance to ensure correct population of Many-to-many field with the static values (Check Box List, Drop Down List basket, List Box basket) when the Context Fields property of the many-to-many field property is set to X=Y. (X is the name of the filter and Y is the name of the field that will provide the value for X).
  • (Virtual Keyboard) Event beforefocus.keypboard.app is triggered on the data input prior to the keyboard gaining the focus. The handler can assign the callback method to the e.context.change property through the "e" argument of the event handler to be notified about changes to the text in the keyboard input.
  • (Virtual Keyboard) The virtual keyboard API is loaded when [data-input] elements are detected on the page to reduce the initial JS payload of the page.
  • (Universal Input) New virtual keyboard "pin" is now included with the framework. Tag a field as kbd-pin to have the keyboard displayed on touch devices.
  • (Universal Input) Virtual keyboard will not shift focus to the next input on tab or enter key if the user interface is in transition to another page at the moment of closure.
  • Thank you Roberto Ivon for contributing the "es" localization files.



Labels: Release Notes
Friday, August 6, 2021PrintSubscribe
Auto Highlight/Select, QR Codes, and Custom Input Enhancements

 Release 8.9.22.0 introduces new features and multiple bug fixes. Now developers can configure their master-detail “data view” fields to always highlight or select the first record on any level of the dependencies. Any input field on the form can be enhanced with QR code representing its value. The ability to display QR codes is implemented with the help of the Custom Input Enhancements feature of the Universal Input.

Auto Highlight and Auto Select

Code On Time allows configuring the Auto Highlight or Auto Select of the first row in the dataview, which is performed when the page loads. These properties can be set up on the “data view” fields, which makes possible the cascade selection of the first row in the master-detail hierarchies in the forms. The framework resets the auto highlighting and selection to avoid the excessive loading of child data views when the master on higher level is changed.

Now you can force the application to always perform the automatic highlighting or selection. For example, the Order Management Dashboard from the Drag & Drop example can be enhanced with the tag auto-highlight-first-row-always applied to the OrderDetails “data view” field. This will result in the first detail to be always highlighted when a new order is selected.
 


Tags auto-highlight-first-row-once and auto-highlight-first-row-always are used to control the frequency of automatic highlighting.

Tags auto-select-first-row-once and auto-select-first-row-always are used to control the frequency of the automatic “Select” action applied to the first row/item in the data view. For example, the tag auto-select-first-row-always will cause the dashboard to display the first item of the OrderDetails data view in the form. 
  


Please note that the automatic highlighting/select will not be performed if the new record was created or an existing record was changed. Only the simple refresh/synchronization will result in the highlight or select action.

QR Codes

The majority of the population has been forced to learn and use the QR codes in their daily lives in 2021. You can enhance any field in the form of your app to display a QR code representing the field value.
 


Try out this feature at https://demo.codeontime.com now! Select a supplier, press Edit and enter any value in the Home Page field. Press Ctrl+Enter on the keyboard or blur the field to see the QR code displayed right next to it.

Tag any data field in the form view as input-qrcode-128x128 and the QR code enhancement with the specified dimensions will be visible just below the field value. 

Touch UI recognizes the following tags that will impact the QR Code presentation:

  • Tag input-qrcode-WxH (enables QR code enhancement)
  • Tag input-qrcode-color-light-HTML_COLOR - specifies the “light” color
  • Tag input-qrcode-color-dark-HTML_COLOR - specifies the “dark” color
  • Tag input-qrcode-correct-level-(L|M|Q|H) - specifies the correction level.
  • Tag input-qrcode-value-hidden - hides the field value and displays the QR code instead.

Custom Input Enhancements

Custom input enhancement can be activated on any data field with the help of the input-NAME tag. The framework will load the custom script from ~/app/js/daf/input-NAME.min.js or ~/app/js/daf/input-NAME.js. Next it will invoke the method $app.input.methods.NAME._init(field, value, text, placeholder) and pass to it the reference to the data field, its value, text, and the placeholder element positioned below the data field value. Tag input-NAME-WxH will assign the width and height specified in W and H to the placeholder.

Another related tag input-NAME-value-hidden will produce the hidden data value. Only the enhancement will remain visible.

The support for QR codes is implemented as an enhancement that can be activated on any data field by tagging the field as input-qrcode or input-qrcode-128x128. The QR code is visible if the field has the value. The parameter NAME referenced above is represented by qrcode. The implementation can be found at ~/app/js/daf/input-qrcode.js.

Release Details

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

  • QR Code data input enhancement can be added to any data field with the tag input-qrcode-128x128 with the numbers representing the width and the height of the QR code in the form.
  • (Blob) Changes in the image will cause the app to fetch the child dataviews if the views suddenly become visible due to the change of the form layout in response to the image loading.
  • (Touch UI) Method $app.touch.summary('fetch') will cause the summary views to fetch data. This method is useful when the layout of the page is suddenly changed and previously invisible dataviews come into focus. If no scrolling has occurred then the data may remain "unfetched" and the fetching can be forced by calling this method.
  • (Touch UI) Custom Input Enhancements and QR Code enhancement are now included in the framework.
  • (Touch UI) Fixed the migration issues that caused exceptions in the "Search On Start" in summary views.
  • (Touch UI) Hiding of the simple or collapsible container without the visible content will not be performed if the container's visibility is controlled by the Visible When property of the category or if this container belongs to the tab page or wizard step.
  • (Touch UI) Notifications are not displayed during the page transition to avoid the effect of the shifting page that was visible upon certain conditions.
  • (Touch UI) Summary view synchronizes itself with the form placeholder instantly for a better user experience. Previously the visual synching was delayed if the page transitions were detected, which has caused a displaced presentation visible to the user for a short period of time.
  • (Framework) Tags auto-(highlight|select)-first-row-(once|always) allows performing auto select or highlight of the first row upon the review of the view data with an option for this to be performed once or always.
  • (Client Library) Method dataView.survey() correctly collects the files in the BLOB fields. This resolves the problem with import file uploading and multi-file upload.

Saturday, July 31, 2021PrintSubscribe
Clipboard, Drag & Drop, Auto-Refresh, Alt Master-Detail, and Property Grid

Code On Time release  8.9.21.0 introduces the clipboard and data drag & drop support in Touch UI. Dashboard data controllers can be enhanced to perform automatic refresh of the DataView fields according to the specified interval. DataView fields can also be connected into master-detail relationships even if there are no natural foreign key relationships. The Property Grid  is the new exciting feature of the framework - keep reading to learn more!
 

Clipboard & Drag & Drop

In a matter of minutes developers can configure the app to allow Cut/Copy/Paste and dragging of items from one data view to another. A simple programming model makes it easy to implement processing for the system commands CutPaste, CopyPaste, and DragDrop. The persistent clipboard allows moving data from a data view on one page of the app to another. 



Auto-Refresh in DataView Fields

DataView fields of a data controller can now be configured to refresh after a specified interval. Specify the Refresh Interval property in the Data View section of the data field in the “form” view. The interval is expressed in seconds.

This feature can be useful when implementing the monitoring dashboards. The framework will ensure that the app is not busy and the dataview is interactive and visible to the user when performing the synchronization of the view data with the server.

Alternative Master-Detail Linking in Forms

DataView fields can have a master-detail relationship with the other DataView fields in the form even if there is no natural foreign key relationship between them. The Clipboard and Drag & Drop tutorial demonstrates this in action by setting the link between the orders and the menu of products. The property Filter Source of the products is pointing to the orders and no filter fields are specified. If the order selection is changed then the products are refreshed. The server-side code can perform custom filtering based on the arbitrary condition.


Announcing Property Grid

We are pleased to announce that the new feature called Property Grid is now included in the framework. The screenshot shows the property grid displayed in response to the inspection of the display object on the page, that was constructed with the Content Hub Add-on and Display Flow

 
Soon you will see the Property Grid in the development mode of your own apps when configuring the ~/app/touch-setting.json or the project properties. The same component will be sliding out from the side of the screen when editing the content in the upcoming community site and when building the data-driven surveys at runtime.

Property Grid is the Touch UI form driven by the metadata. The developer-friendly data input mode with the comprehensive keyboard support makes the grid suitable for various configuration tasks when building apps and content. It will be also possible to tag a form view as a property grid. The form view configuration will be converted into the Property Grid metadata by the framework at runtime and the end user will be presented with a sliding panel to edit the data.

Release Details

The following features, enhancements, and bug fixes are included in the release:
  • Data Clipboard with support for Cut/Copy/Paste and Drag & Drop
  • (Inline Editor) Focus frame is not visible when the grid with a large number of columns is scrolled and the focused field is out of view.
  • (Blob) Default blog image is triggered on the existing record. Previously this happened only if the existing blob was cleared.
  • (Touch UI) Removed the delay context scope reset when the panel action is executed on close. This eliminates the problem with the incorrect set of actions in the form views.
  • (Clipboard) If the data view is tagged as view-paste-Controller or view-drop-Controller then the current row or target row is ignored. Only the master values are supplied for the row representing the target of Paste or Drop.
  • (Cloud On Time) The app will not raise an exception when processing requests without the UserAgent header received from Cloud On Time during the custom app installation.
  • (Touch UI) Externalized the CSS rule that controls the visibility of the child dataview to improve performance.
  • (Touch UI) Child dataview field will behave as a dependent even the Filter Fields are not specified. The property Context Fields will be set to the value of the filter and is passed to the server for custom filtering with the access control rules.
  • (Touch UI) If the dependent data view of the master-detail relationship is not visible and there are no other visible elements in the simple or collapsible container then the container is also hidden until a data item the master data view is selected.
  • (Client Library) Method dataView.syncOnce() will synchronize the dataview when it stops being busy and is on the active page and ready for interaction. The first argument of the method specifies the name of the child DataView field. The corresponding dataview will be synced when the argument is specified. The second argument will force the immediate attempt to sync if set to true. 
  • (Touch UI) Property Refresh Interval of the DataView field on the form will cause the data to refresh after the period of time expressed in seconds.
  • (Classic UI) Method dataView.data() returns an object with correctly assigned "unmodified" properties. Previously the "null" value was assigned to the property that was not changed.
  • (Classic UI) Method dataView.data() returns an object with correctly assigned "unmodified" properties. Previously the value "null" was assigned to the property that was not changed.
  • (Client Library) Simplified the dataView.survey() method by removing the legacy processing of Classic UI.
  • (Client Library) Data objects returned by the method dataView.data() invoked on an instance of the data view will not have the "_modified" property with the properties of the original row instance. Invoke the method with the 'modified' parameter if you require the "changes" included.
  • (Clipboard) Method $app.clipboard.paste() will raise the client-side CopyPaste|CutPaste|DragDrop in the "Before" and "After" phases. The former may return a "promise" object to delay the command until resolved or false to prevent the command. The latter allows executed the custom in JavaScript upon completion.
  • (Framework) DataView fields with have access to the other DataView fields in the same master form if their names are listed in the Context Fields property. For example, MyOrderID=Orders will result in the primary key of the selected order in the Orders field to be available to be used in custom access control rules.
  • (Touch UI) Descriptions of items in the context menus have a unified 12px font size and are limited in width.
  • (Touch UI) Event keyboardpreview.app is triggered in the scrollable element of the virtual page.
  • (Touch UI) Event datainputfocus.app is triggered when the data input is styled to indicate the "focused" state.
  • (Touch UI) Notifications are displayed as centered when the docked virtual page is active.
  • (Touch UI) Event scrollablepageready.app is triggered on the scrollable wrapper of the virtual page. This event is triggered prior to the page transition and can be used to change the initial vertical scroll position in the form.
  • (Touch UI) Event pageautofocus.app is triggered on the active page.
  • (Touch UI) Event datainputmove.app is triggered on the current data input instead of the document.
  • (Touch UI) Event keyboardnavigation.app is triggered in the scrollable element of the page. Previously this event was triggered on the document.
  • (Inline Editor) The handler for keyboardnavigation.app event does not attempt to move the focus if there is no active focus frame of the inline editor.
  • (Touch UI) $app.touch.hasFocus() method removes focus from any other focused elements if the element specifed in the argument is focused.
  • (Touch UI) Event pageautofocus.app is triggered on the document. If the default is prevented then no attempt to set the focus is performed.
  • (Touch UI) Method $app.touch.scrollIntoView() will ensure the visibility of the element specified in the argument.
  • (Touch UI) REMOVED. Event beforefocus.app is not triggered anymore.
  • (Touch UI) Event datainputlabel.app is triggered on the data input label. If the default is prevented then no attempt to focus the corresponding input is performed. Property Grid of v9 designer uses this event to set the visual focus on the label.
  • (Touch UI) Enhanced the app-has-focus removal from the labels/values.
  • (Touch UI) Double click/tap on the label of the field in the form will trigger the vdblclick event on the label element.
  • (Touch UI) Method $app.touch.layout() will perform the layout of the form. Method must be called if the initially invisible regions of the form layout become visible.  Property Grid uses this method when collapsed complex properties and categories are expanded.
  • (Touch UI) Method $app.dblClick(elem) will return true if the elements was clicked or tapped twice in the past 500 milliseconds.
  • (Touch UI) Double click on the Drop Down List label will cycle the input value.
  • (Touch U) The drop down list button has a non-transparent background for improved presentation of input with the long lookup values.
  • (Touch UI) Delayed focus removal eliminates blinking of the focus indicators when the value of the input has changed after the focus loss and recovery.
  • (AppGen) Application generator creates a valid Visual Studio project when the word "Global" is included in the project name.
  • (Touch UI) Data view tagged as class-name-CSS_CLASS_NAME will assign the specified CSS class name to the "div" element of the virtual page.
  • (Client Library) Method $app.prettyText(text, capitalize) will capitalize the leading character if the second argument is set to true.
  • (Client Library) Method $app.prettyText now detects the national Unicode upper-case characters and treats as words the sequences of numbers. For example, the following calls will return the arguments with 3 spaces placed in front of the upper-case letter and the first digit:
            x1 = $app.prettyText('NextNewYear2021');
            x2 = $app.prettyText('PróximoAñoNuevo2021');
            x3 = $app.prettyText('ΕπόμενοΝέοΈτος2021'),
  • (Touch UI) Fixed issued with the incorrectly migrated labels when input-blob.js was extracted from touch.js.
  • (REST) Robust processing of REST API request to ~/_invoke/auth for authentication to obtain and renew the tokens.
  • (REST) Server-side framework implements the _invoke/auth API to allow obtaining and refreshing the access tokens.
  • (Framework) Refactored application services to support handlers with custom parsing of arguments to support the REST 2.0 and the upcoming Graph QL engine.
  • (AppGen) Fixed incorrect references to the ReportViewer DLLs v14 and v15.
  • (AppGen) Projects based on the class library will correctly copy the  runtime-loaded minified *.js files to the ~/app/js folder of the solution. That includes touch-draw, daf-search, daf-import, and daf-flow.
  • (Touch UI) Last input focus is restored on mouse-driven devices if the dragged away modal form restores its position in response to the user's click on the background.
  • (Touch UI) Windows focus will not cause an exception when the core framework is still being constructed.
  • (Classic UI) Fixed the problem with uploading of images in BLOB fields.
  • (Classic UI) Font preloading instruction is not included in the HTML pages.
  • (Framework) Nielsen Batista has contributed the pt-BR localization. Submit your own files with the support and we will have them included in the future releases of the product.
Labels: Release Notes
Continue to Modal Form Dragging