Forms, Reports, Apps

Build and deploy rapidly. Use offline, online, on-premises.

  Blog

Blog
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
Monday, October 4, 2021PrintSubscribe
Custom User Login Responses

 The introduction of the 2-Factor Authentication in the application framework has required changes to the login process. The framework challenges the users to enter a verification code to confirm their identity. Method CreateUserLoginResponse(username, success)  in the ApplicationServices partial class creates the JSON object with the instructions for the client-side code when the verification is needed.

Developers can take advantage of the new method to provide custom responses informing the user about the remaining login attempts, locked account, and other special cases. Otherwise the framework displays a generic message “Your user name and password are not valid.”

The sample code below will let the user name if the account is locked or display a notification at the bottom of the screen. The code executes only if there is no login response created by the base implementation to avoid conflicts with the multi-factor authentication.


Invalid username or password will yield a notification message when the JSON object with the notify property is returned.


A more prominent response is provided if the responses includes the alert property.


If the event property is returned in the response, then the framework will raise the client-side event on the document object with the response passed as the args property of the event. 2FA implementation uses this method to pass extended information to the client library.

Sunday, October 3, 2021PrintSubscribe
"Actions" Lookup Style

 Touch UI was designed to be responsive and functional on a device with any screen size. Forms are presented in modal popups on large screens or in the fullscreen mode on smaller devices. Actions are automatically rendered in the system toolbar bar, in the form button bar, or as a floating button. There is the universal “more” menu providing users with access to all actions available in the current context. 

Developers can download HTML templates of live forms and tinker with them by moving fields around and injecting custom actions in the desired position. Touch UI provides a simple method of injecting custom actions in the desired position without a custom form template. The screenshot below demonstrates two sets of actions mixed in the flow of the data fields in the form on the iPad-size screen.


Here is another example of the same form in the Pixel phone preview mode in the app created with Code On Time.


Begin by adding two action groups with the “Custom” scope to the Employees data controller. Place actions with the Custom command name and corresponding Argument and Header Text into each group. Make sure to specify the When Last Command Name property for the actions. Our example has this property set to Any to ensure that the actions are visible in any mode regardless of the last executed action.


Action group IDs are set to ag100 and ag101 by the Project Designer. Right-click an action group in the Project Explorer and choose Rename if you prefer the custom identifiers.

Now create two fields in the same data controller with the matching fields names. Set their item Style to Actions. The framework will treat these fields as virtual and therefore they will not have any impact on the standard data manipulation actions or custom actions.


Drag the fields into the desired position in the data field flow of the editForm1 view. 


The framework will render the actions as specified. These actions will be visible only if all conditions specified in their “When …” properties are met. If all actions are invisible, then an empty space will be in their place instead. Use the Visible When property of the data field to hide the empty space when such conditions do occur.

We had attempted previously to come up with a way to mix the data fields and actions without having to build a custom template. Our last attempt succeeded when we were solving the problem of making it obvious to users that the Get Verification Code button in the 2-Factor Authentication form must be pressed in order to get the code via chosen delivery method.


The data field with the Actions style in the form above is also tagged as merge-with-previous to eliminate the line separating the “Actions” lookup from the previous data field.

If you were to move the actions from the Custom group ag100 to the Form group ag2, then the form would look like this. Custom actions Meet, Promote, and Happy Birthday are rendered in the form button bar. 


This is how the corresponding configuration of the data controller may look in the Project Explorer.


Arguably keeping the ag100 data field in the form flow right next to the Last Name, First Name, Hire Date, and Birth Date is a better user experience than placing the actions into the form button bar.