Blog: Posts from August, 2021

AJAX(112) Apple(1) Application Builder(242) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) 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(11) 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) DotNetNuke(12) EASE(20) Email(6) Features(99) Firebird(1) Form Builder(14) Globalization and Localization(6) Hypermedia(2) Installation(4) 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(15) OAuth(5) OAuth Scopes(1) OAuth2(6) Offline(14) Oracle(10) PKCE(1) PostgreSQL(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(163) Reports(48) REST(26) RESTful(21) RESTful Workshop(13) RFID tags(1) SaaS(7) Security(75) SharePoint(12) SPA(5) SQL Anywhere(3) SQL Server(26) Stored Procedure(4) Teamwork(15) Tips and Tricks(81) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(331) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(39) Web.Config(9) Workflow(28)
Posts from August, 2021
Friday, August 20, 2021PrintSubscribe
August/September 2021 Roadmap

We are very pleased to announce the host of new features that are becoming available in the next few weeks. 2-Factor Authentication, new REST API v2, and barcode scanning with the device camera, are just some of the features that are coming at the end of the summer.

2-Factor Authentication

The next release will introduce 2-Factor Authentication that will be enabled by default in apps created with the Unlimited Edition of Code On Time.

End users will have an option to strengthen their username and password with the one-time verification codes that are delivered via email, text message, or “authenticator” apps such as Google Authenticator or Microsoft Authenticator.

User context menu provides a new option that helps the authenticated user to set up the 2-factor authentication. If the user has the “authenticator” app on their mobile device, then a simple scan of the QR code on the setup screen will configure that app to generate the verification codes to confirm to sign in.

Authenticator app does not have a physical connection to your application. The scan of the QR code during the setup allows the app to retrieve the secret stored in the user record.  The app generates a new verification code frequently. There is no need to remember the code. You will be able to sign in as long as you have access to your phone.

You will be required to enter the username and password.

The successful sign in will result in the request to enter the verification code if the 2-factor authentication was set up for the account previously. 

Another default option is to receive an email with the verification code that expires in a few minutes. Developers also have an option to instruct the app to send a text message or call the user with the verification code. 

If the correct time-based verification code is entered, then the user is signed in. Incorrect input of verification code will count as a failed login attempt with the eventual lockout of the user account.

“Authenticator App” is a very secure option since there is no communication with the 3rd party systems. The default “Email me at...” option can be disabled in the application if required.

Users can also enter the single use backup codes provided to the user during the setup process.

REST API v2 / App Middleware

We are pleased to announce the new REST API v2 available in the apps created with the Unlimited Edition. 

The server-side framework automatically responds to the requests to read and write data  by creating JSON or YAML based output. Hypertext Application Language links are automatically included in the responses to enable the API discovery.

The new REST API is the automatic reflection of your data controllers, lookups, and dataview fields. The root entry point of the API serves as the introspection end-point that helps to learn what’s possible.

API Keys and access tokens help authenticating the request. The new API can be used internally and also as a middleware for the projects that require database access. Developers can even enable the “middleware” mode when no user interface options are available and only the API requests are being handled. 

Camera-Based Barcode Scanning

Your apps will finally have an option to scan the barcodes and QR codes without relying on the external scanners. The powerful UI Automation and Kiosk UI already available to the app developers are getting a boost! The QR code icon on the toolbar activates the camera-based scanner powered by the Zxing (zebra crossing) library.  

The camera scanner icon is available when barcode support is enabled. Developers will also have an option to automatically activate the scanner when a particular form is displayed or a field is focused. The scanned barcodes and QR codes are placed in the barcode processing queue, which is also populated by the external scanners and readers.

The simple and powerful IfThisThenThat API allows creating complex rules that force the UI of the app to perform various actions in response to the contents of the barcode queue.

V9 and Integrated Community

We have made great progress in delivering the new browser-based development environment for your apps. The screenshots above show the live preview mode of upcoming v9. It will become the default mode for Code On Time developers and provide property grids and  toolbars with drag & drop configuration and point-and-click inspection of live apps.

The community forum is integrated into the new development environment and will allow discussing and documenting various features right from the property grid. The news feed will also be readily available along with the place to see the latest discussions, tickets, and blog posts.

Wednesday, August 11, 2021PrintSubscribe
Real Time User Interface Customization

Touch UI apps offer rich user experience courtesy of Code On Time app generator. By default, a data model configured by the developer will enable the data presentation as grid, list, and cards. Foreign key fields are presented as a versatile lookup input with auto-complete, search, and an option to create new items in-place. Foreign key fields will also enable automatic data charts. 

These and many other user interface features will make the life of the end users very comfortable.

Sometimes the end-user comfort is not the ultimate goal. The simplicity of the UI will be driving user satisfaction. Developers may quickly customize the features of the app in the Project Designer. There is also an option to perform the real time user interface customization with code. This option is especially relevant for large applications.

Let’s limit the view style of the Products in the Northwind sample to Grid and convert the lookups to drop down lists without the ability to create new items.

Method 1 - Project Designer

Select the Products / views / grid1 view in the Project Designer and tag it as:
view-style-grid view-style-list-disabled view-style-cards-disabled view-style-charts-disabled
This will limit the view styles available to the end user and set the default style of data presentation.

Next select the Products / fields / SupplierID lookup field and change the view style to Drop Down List. Also clear the value createForm1 from the New Data View property. 

Re-generate the app and observe the simpler user interface in action.

Please note that the view style buttons are not visible on the sidebar since the Grid is the only option.

Method 2 - Data Controller Virtualization

Data Aquarium Framework is the foundation of apps built with Touch UI. The server-side code makes it possible to transform the design of the data controller at runtime. 

Select your project on the start page of the app generator and choose Settings | Data Model & Business Logic, activate Shared Business Rules tab, and enable the Shared Business Rules. Press Finish to generate your application. 

Select the project again and choose Develop. Locate the file ~/app/App_Code/custom/rules/SharedBusinessRules.cs in the Visual Studio and replace its contents with the following:

Make sure to change the namespace MyCompany to the one that matches your application.

The instance of the SharedBusinessRules class is created by the server-side code when processing the requests for any data controller. Your existing business rules must inherit from this class to acquire the shared functionality. Any new “code” business rules created in the future will automatically inherit from it. The framework “consults” the business rules about various aspects of data processing.

The first method SupportsVirtualization is invoked when the XML definition of the data controller has been loaded to process the request. If the method returns true, then the framework will proceed to invoke  the customization methods.

The second method VirtualizeController is given a chance to make changes. The code above is reproducing the same steps that were described in Method 1 if the current user does not belong to the Administrators role. The customization of view styles is done with SelectView and SetTag methods  of the NodeSet API. There are numerous specialized methods that take the guesswork out of the customization process. Auto-completion in Visual Studio will provide a full list of available methods with the relevant descriptions of their purpose. The configuration of the lookups is performed with the generic Select and Attr methods of the NodeSet API. The former uses XPath expression to locate the elements in XML. The latter selects one particular attribute.

Our customization does not discriminate over field names and will convert all lookup fields into dropdowns without the ability to create new items. This screenshot shows the SupplierID dropdown aliased as Supplier Company Name and CategoryID aliased as Category Name with the list of items visible.

The nature of the real time changes in the XML definition of the data controller is shown below. Please note that the virtualization will change the in-memory copy of the data controller. The physical data controller file remains the same as it was arranged by the app developer.

Our code will work whether your app has 3 data controllers or 1000. Only the Administrators will have the rich user interface capabilities while the rest of the users are offered a more streamlined experience.
Friday, August 6, 2021PrintSubscribe
Auto Highlight/Select, QR Codes, and Custom Input Enhancements

 Release 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 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.