Code On Time: Low Code

Blog

Low Code

Saturday, March 6, 2021Print Subscribe

Numbers, numbers, numbers

Hybrid mobile apps are built with HTML and JavaScript hosted in the native webview. Form input controls make possible a comfortable and speedy text input on mobile devices.

The numeric input is a different story. HTML 5 standard requires numbers to be presented visually as the sequence of 0-9 characters with the optional single decimal separator expressed as the "period" character. For example, the currency value of $1,234.56 must be entered in the form field as 1234.56. The end users in many countries will expect to enter the "comma" character as the decimal separator. The native "number" input element in HTML forms will not allow that! Yet this input type is relied upon by web and hybrid app developers since it will activate the native numeric keyboard on a mobile device.

Embedded Unified Keyboards for “number” and “tel”

Touch UI activates its own virtual keyboard through the Universal Input when a numeric value or a telephone number is expected to be entered on a mobile device. Developers can create custom keyboards of their own to enhance the app.

The virtual keyboard in the screenshot does not change the presentation of the number value and retains the currency formatting. Characters “comma” and “period” are automatically derived from the current culture of the user interface.

The keyboard slides up from the bottom of the touch screen and will not be displayed if the app is operated with the mouse pointer. The keyboard will float next to the input field on the tablet-size touch screen.

Placement of the compact numeric keyboard next to the input field makes it easier to enter the numbers on a touch screen. The native virtual numeric keyboards have many more additional characters and are placed at the bottom of the screen. Apple devices will push the entire screen upwards and try to center the numeric input vertically, which is quite aggravating if you enter many numeric values in the form.

The virtual keyboard of the Touch UI does not cause the screen to resize, does not push the screen in any direction, and allows scrolling the entire contents up and down.

Touch UI virtual keyboard will accept numeric input from the physical keyboard attached to the device giving the user the flexibility of using both physical and virtual keys as needed.

The numeric virtual keyboard can be activated for any data field tagged as kbd-number.

Touch UI will activate the virtual keyboard for the data fields that have“phone” of “fax” in the name or tagged as kbd-tel.

If the virtual keyboard is not desired for a particular “number” or “tel” field, then have it tagged as kbd-none. The native keyboard of the operating system will be displayed instead.

You can also disable the virtual keyboard of Touch UI globally by making the following change in the touch-settings.json configuration file of the app.

Touch UI supports two standard virtual keyboards and each of them needs to be disabled separately through ui.keyboard.number.enabled and ui.keyboard.tel.enabled configuration properties.

Developers can make the floating keyboard appear wider or narrower by setting up the ui.keyboard.number.width property to a number greater or less than 360. The sliding keyboard will display on the smaller screen and will match its width.

If the property ui.keyboard.touchOnly is set to false, then the keyboard will be displayed when the app is controlled with the mouse pointer. This can be useful when debugging the app.

You can also enable the virtual keyboard to be always visible on focus for a particular data field if you have it tagged as kbd-number-auto or kbd-tel-auto. This tag will make the framework ignore the ui.keyboard.touchOnly setting.

Custom Virtual Keyboards

Developers can define their own virtual keyboards to enhance the input speed and comfort.

For example, consider the list of home cities for the employees of the Northwind sample data set. Kirkland, London, Redmon, Seattle, and Tacoma are the only values. It is likely that the new employees will be hired there.

Let’s create a virtual keyboard that makes it possible to enter a city with a single keystroke or touch.

Begin by creating a JavaScript file with the arbitrary name in ~/app/js folder of your app. Define the contents of the file as follows:

The code will register the city keyboard that will be activated on any data field tagged as kbd-city or kbd-city-auto. Try the latter on the City data field in editForm1 and createForm1 of the Employees data controllers. This is what you will see when the City field gains the focus.

Touch or click the keyboard button or press K, L, R, S, or T on the physical keyboard to enter the name of the city.

The following code in the same JavaScript file will define a custom keyboard for the Extension field in the same form to allow only the numeric values to be entered for the phone extension of the employee.

Here is what it looks like if the Extension data field is tagged as kbd-extension-auto.

Tag the data field Home Phone as kbd-tel-auto and the telephone virtual keyboard will be displayed for the field and server as the filter of acceptable characters on any type of screen.

Note that the “*#” key will activate the alternative “tel” keyboard that looks like the one shown below. The user will press “123” to switch to the numeric keypad of the “tel” keyboard. Developers can define their own alternative keyboards in a similar fashion.

Custom virtual keyboards provide a simple and consistent mechanism for enhanced data input across all operating systems and devices.

You can redefine the standard “number” and “tel” keyboards as well. Find their definitions in the ~/app/js/daf/touch-input.js file. Extract and place them in your own file with the desired changes when needed.

Number Auto Format

Numeric virtual keyboard also supports the awesome auto-format feature. Set the value of ui.keyboard.number.format option to true to turn it on globally for the entire app.

This configuration will enable auto-format of numbers on touch screens. Run the app and enter 1234567 in a currency field. The number will be formatted as $12,345.67 if you are located in the United States.

The number fields without a data format string will not be affected. The auto-format will determine the number of decimal places and apply the formatting to the value accordingly. Set ui.keyboard.touchOnly to false and the same auto-formatting with the virtual keyboard will be performed on any device.

Users can enter the whole numbers by pressing the “decimal separator” key when the number auto-formatting is enabled.

Labels: Low Code, Touch UI

Tuesday, May 12, 2020Print Subscribe

Barcodes, QR Codes, and RFID tags

Code On Time release 8.9.5.0 introduces the framework-level support for barcode input and unique User Interface Automation technology with optional Kiosk UI. Developers can handle the values incoming from the barcode and QR code scanners and RFID readers.

UI Automation makes it possible to send commands to the user interface of apps based on Touch UI to perform complex simulations of user actions. UI Automation rules are triggered by scanned barcodes or changes in the state of the user interface. The rules are written in JavaScript and operate both in offline and online mode.

Kiosk UI is the feature of UI Automation. Developers can describe the display flow of data elements to present the alternative views of data in Touch UI. The following screenshot demonstrates the complex master-detail presentation of the Order Form that can be easily operated even by the inexperienced end users.

The comprehensive video tutorial is available on our YouTube channel. The source code developed in the tutorial can be found at https://codeontime.com/blog/2020/05/hello-barcodes-sample-code.

Part 1: Live demo. (33 minutes)

The live demonstration of barcode, QR code, and RFID processing in a demo app running in Firefox browser. Watch this part and skip the rest if you are short on time.

Part 2: Building Order Entry Form (1 hour 45 minutes)

Learn how to build the Order Entry Form shown in the live demo. You will learn to assign default values, calculated extended price and order total in the manner compatible with online and offline modes. We demonstrate the application working in the web browser and in “offline” mode in Cloud On Time app. Watch this segment to learn how to create apps with Code On Time (there are no barcodes - just the new “approved” method to app development)

Part 3: Barcode Input and UI Automation (3 hours 30 minutes)

This segment starts with an explanation of barcode processing in Touch UI. Learn how to enable barcode/QR code/RFID input in the app and how to perform the low-level processing of scanned values.

The bulk of the video explains the brand new UI Automation. You will learn how to build “if this then that” rules to bring Artificial Intelligence into your app. The rules handle barcodes, QR codes, and RFID tags.

You can make your own rules to perform complex user interface activities in response to keyboard shortcuts or custom actions. UI Automation makes possible “post production” app enhancements without making changes to the core app with simple JavaScript declarations written in Prolog style. Barcode processing is just one of the capabilities of UI Automation.

The segment ends with the demonstration of barcode, QR-code, and RFID tag processing in “offline” mode.

Part 4: Kiosk UI (2 hours)

Learn to create an alternative presentation for the Order Entry Form that will work great for the inexperienced users and the users on-the-go. Kiosk provides a “remote control” for the Order Entry Form.

You will learn about Display Flow technology and Kiosk User Interface (optional feature of UI Automation). See the brief introduction of Kiosk UI from part 1 at https://www.youtube.com/watch?v=35Vh_aOuQQc&t=1474.

The segment ends with the demonstration of Kiosk-style order entry in “offline mode.

The following features and bug fixes are also included:

(PostgreSQL) Model Builder displays entities in alphabetical order.
(PostgreSQL) Model Builder now "sees" the database views in the schema.
(Framework) Method dataView.sync() correctly assigned the key to the selectedKeyList.
(Touch UI) Method $app.touch.focus does not crash when the container is null.
(Touch UI) Fixed CSS rules for the icons in the modal form titles.
(Touch UI) Apps based on Touch UI do not perform processing of "Chart" view type.
(Touch UI) Projects based on Touch UI do not have "ChartHandler" references in the web.config.
(Touch UI) Panels display a solid top border in native mode.
(ASPX) Membership manager is correctly initialized in the apps based on ASPX page model
(AppGen) The app generator will not report DirectoyNotFound exception while copying the Addons to the ~/bin folder of the app prior to compilation.
(Touch UI) Built-in tooltip does removes "script" tags from the rich html tooltips.
(Touch UI) Context items with "hidden:true" property are no visible in the Context Menu.
(Offline Sync) Partial refresh of changes client-side objects with the server data will also update the $app.syncMap. The views on the page will get refreshed when the sync is over.
(ODP) If the request to read data does not specify the view of the data controller then the ID of the first view is assumed to be requested.
(ODP) Display properties of the DataView field are correctly initialized. Previously the display properties such as Page Size were ignored.
(Touch UI) Method extension.headerText() is called to refresh the current command row when the view is refreshed.
(Touch UI) State of the checkbox is toggled in the grid view style if the field is not read-only and edit action is available.
(Touch UI) A correct header data is displayed in the form of automatically selected "new" record after insert even at all times. Prior to the fix the data text of the previously selected record was displayed.
(Data Aquarium) Calculate command errors are display as notification.
(Data Aquarium) Values with "p" format are converted into a "percent value" between 0 and 1.
(Data Aquarium) Data and time parsing is performed in the data fields "with tryParseFuzzy..." method before an attempt is made to parse the date string with Date.parse() method.
(Touch UI) Chrome OS and Android will use "Google Sans" fonts.
(Touch UI) Calendar popup has a pronounced border and displays a semitransparent background when modal.
(Touch UI) Chrome OS is detected and the UI will look like Android.
(Framework) Lookup view hides fields other than those that are specified in DataTextField and Copy map when Kiosk UI is active.
(Touch UI) Forms are always modal when displayed on top of Kiosk UI.
(Touch UI) Method $app.touch.toggleTooltip changes the tooltip of the element between "Collapse' and 'Expand'.
(Touch UI) The scrollable view displayed when the "See All" button is pressed is now behaving just like its originator.
(Touch UI) All forms are displays as modal when kiosk is active.
(Data Aquarium) Sync is not performed on reverse return from the form view to the the grid if there is no selection.
(Touch UI) The command row is assigned to the data view if it is blank even thought the primary key has not changed.
(Touch UI) Shortcuts can be triggered in touch devices.
(Touch UI) Sensitivity of touch movement is now set at 4 pixels. Previously it was set to 0.
(Touch UI)
(Touch UI) Event "themechanged.app" is triggered on the document when the app theme has changed.
(Touch UI) Method ResetUI will update the sticky header.
(Framework) Aliased and non-aliased field filter are detected in dataView.filterOf() method.
(Framework) Filtered by value primary keys are correctly presented in filter details in Kiosk mode.
(Framework) Method dataview.sync() will apply the primary key filter for better performance in Kiosk mode. Only one selected row will be displayed after sync
(Framework) Method dataView.sync() will clear the primary key fields from the filter unless sync is requested in UI automation mode.
(Framework) Data types without matching .NET counterpart (such as geography in MS SQL) are returned as binary strings starting with "0x" prefix. Previously the framework has crashed.
(Model Builder) Data preview works correctly with the SQL data types that are not mapped directly to .NET. such as "geography" in Microsoft SQL Server.
(Touch UI) Method $app.touch.showAccountManager() does not fail if membership is not enabled in the app.
(Touch UI) Search button in modal lookup forms is moved to the left side of the modal form title. The button is hidden when the search form is opened.
(Framework) Refresh token cannot be used to authenticate API requests.
(Touch UI) Activation of inline editor in response to user typing is performed with a delay to capture the input.
(Touch UI) Tooltip with the error message is displayed as as the raw user input is incorrect even if the user is trying to exit the field. This will help understanding the error messaging when entering incorrect numbers and dates.
(Touch UI) Activation of inline editor in response to user typing is performed with a delay to prevent conflicts with rapid input detection generated by barcodes scanners and RFID readers. It also improves the qualify of keyboard input capture prior to activation of inline editor.
(Touch UI) Popup calendar does not appear at random location when the user is rapidly changing focus to another field.
(Touch UI) Removed slight shifting of text in the drop down input in inline editing mode.
(Framework) External JavaScript business rules can execute before and after with optional async promises.
(Framework) Method $app.execute automatically figures the controller, view, data processor and other configuration properties if "from" or "in" property is specified in the options.
(Framework) Method $app.ifThisThenThat registers the UI automation.
(Touch UI) Focus frame takes the height of the row for checkbox fields.
(Touch UI) Direct click on the checkbox will toggle its value in inline editing mode. The same will happen if the user will press Space key int the cell with the checkbox.
(Touch UI) Inline editor advances to the next field in the row when user submits value on a mobile device. Inline editor displayed in overlay mode will continue to advance to the same field in the row.
(Touch UI) Delete key will clear the value of the active cell if the field is not read-only and not required.
(Touch UI) Auto-focus in the form in edit mode is perfomed is following the event 'pagereadycomplete.app'. Previously focus was set prior to the event.
(Touch UI) Direct click on the checkbox in grid will toggle its state if the user is allowed to edit the record the field is not read-only.
(Touch UI) Method $app.touch.isInTransition() performs an improved verification of the transitional state of the GUI.
(Touch UI) Method $app.touch.touched() will return true if the element specified in the argument has been clicked directly or through the layer of other elements. By default the boundaries are inflated by 2 pixels. The optional second argument allows specifying a more precise inflation.
(Touch UI) Method $app.touch.resetUI() will reset the user interface after UI automation to reflect the current state of the app. Various user interface elements are not updated during automation to improve performance. The makes possible a perfect refresh of the UI upon completion of automation.
(Touch UI) Method $app.touch.notify will accept an array as argument. Elements of array are join into a comma-separated string .
(Touch UI) Event 'ifttt.app' is triggered when the app has started to enable the initial "if this then that" automation.
(Touch UI) Lookup items are not created if the barcode input is in progress.
(Touch UI) Backspace key will activate editor and clear the field value in inline editing mode.
(Touch UI) Inline editor always activates with the maximum length to allow editing the field value without scrolling.
(Touch UI) Ctrl+Enter will post he field value and stay in the input field in inline editing mode.
(Universal Input) Shortcuts Ctrl+Z (undo) and Ctrl+Shift+Z will undo/redo the field value in each individual input. Typical web forms will gradually undo input values across all form fields.
(Touch UI) Popup calendar is not displayed when the focus of the date input is rapidly changed.
(Touch UI) Improved formatting of inputs and placeholders in inline-editing mode.
(Touch UI) Removed static rules used to position drop arrows in lookup/autocomplete/dropdownlist controls. This is now done programmatically for perfect positioning.
(Touch UI) Header of the active column is not displayed in "bold" font anymore. The column status is emphasized through the color only.
(Touch UI) Lookup does not request "formatted" data anymore. Formatting has caused text values to be copied to the borrowed fields. Formatting was used when duplicates were returned in the lookup and additional values are revealed to help the user to make the correct choice.
(Touch UI) Method $app.touch.inlineEditing() will toggle the inline editing mode of dataview specified in the argument.
(Framework) Method $app.execute will execute the request after a brief delay if ODP instance will be utilized. This improves overall responsiveness o the GUI.
(Touch UI) Method $app.input.execute() now accepts simple "map" object argument with the values that must be assigned to the mapped field names.
(Classic UI) A non-blank Editor property will not break the app in Touch UI mode.
(Touch UI) Processing of date keyboard shortcuts is performed in the timeout instead of instant response to keydown event. This improves consistency across browsers.
(Touch UI) The primary dataview on the "offline" page was using the data processor instance to delete records, which has caused the change not to be committed unless the delete was performed in the child form. Now the data processor is created only if the app is running in a true "offline" mode.
(Touch UI) The dedicated grid/list of items displayed for a lookup is always provided with a standard icon in the page header if a custom icon is not defined.
(Touch UI) Changed alignment of collapse/expand icons in the form category headers.
(Touch UI) The height of modal title has been increased from 32 pixels to 40 pixels.
(Touch UI) Ctrl+Enter does not populate the date. It simply refocused the field.
(Touch UI) Pressing space in the blank "date" field will enter the current date.
(Touch UI) Ctrl+Down|Up|Left|Right will change the current value of the date field.
(Universal Input) Input with focus is re-focused if its value has changed. This ensures correct display of value.
(Touch UI) Universal input $app.input.execute accepts field references in the values parameter specified as "field" property.
(Touch UI) Date/time input supports the following keyboard commands:

Ctrl+Enter - enter the current data/time in the empty field.
Ctrl+Left, Ctrl+Right - change the date by one day.
Ctrl+Up, Ctrl+Down - change the date by one week if the calendar is visible on by one day if the calendar is hidden.
Escape - close the visible calendar
Alt+Down, Ctrl+Space - show the calendar popup.

(Touch UI) Message "Loading..." is displayed in normal font (previously italic).
(Touch UI) Refactored lookup autocomplete to delay execution of server-side lookup while the user is typing. Also delayed replaced of value entered by the user to prevent lost keys.
(Touch UI) If the current selected item has a NULL value in the "Data-Text" field then "N/A" is displayed in the summary on the sidebar.
(Touch UI) Numeric input correctly places cursor at the end of the value on iOS devices.
(Touch UI) Popups will not restore focus after closure on touch devices.
(Touch UI) Lookup will not focus the input on mobile devices when the "Select" button is tapped by the user.
(Touch UI) Fixed alignment of "chevron/arrow button " in lookups to ensure accurate position.
(Native Apps) The current UI culture is used to filter out the resources required in the native front-end. Previously the internal culture was used as a filter instead.
(Framework) Lookups based on data controllers populated with business rules ("code" and SQL) are working correctly.
(Touch UI) Dates are correctly cleared when the date vale is erased by the end user in the form.
(Touch UI) Option ui.embedding controls if the app adjusts presenting when hosted in iframe of another website. The default value is 'auto', which will cause the app to disable inifinite scrolling and hide the navigation menu. If ui.embedding:false then the full user interface is displayed.
(Touch UI) Option {"host":{"enabled":false}} placed in ~/touch-settings.json will disable automatic user interface adjustment when the app is running in iframe.
(Touch UI) Built-in membership manager correctly closes the user form after Delete command
(Touch UI) The framework triggers menuinit.app event on the document at the start of the page construction. If the "nodes" property of the event is assigned then the menu nodes will be uses as the main menu of the app. Offline Sync uses this event to provide a trimmed menu when the device does not have an online connection.
(Touch UI) The framework handles menuchanged.app event. It uses the "nodes" property of the event as the new main menu. Offline Sync triggers this event in response to the changes in online/offline state of the device to expand/trim the menu nodes of the app visible to the user.
(OfflineSync) Triggers menuchanged.app event to let the app know about changes in the menu nodes.
(AppGen) If the generic Windows app is selected as the preview target for the app then the app generator makes sure that [Documents]\Code OnTime folder existis in order to persist the uma-launch.json action exchange file.
(Touch UI) System "Help" item is not displayed in the context menu of hosted apps.

Labels: Application Builder, Low Code, Rapid Application Development, Release Notes

Friday, April 17, 2020Print Subscribe

Announcing Barcode/QR/RFID support, UI Automation, Kiosk UI, and Display Flow

Code On Time reaches another milestone in the journey to the low code application development nirvana. The unparalleled integration of barcode, QR code, and RFID tag processing with an optional Kiosk UI is now in the hands of developers!

Following our commitment to the mobile business apps, we have embarked on the implementation of the Barcode Scanning feature listed on our roadmap. Ability to interact with the real world objects through graphical codes and radio frequency tags is essential to the mobile end user experience

Our use case called for the end user to scan a sequence of barcodes, representing product UPCs, the QR code of a customer loyalty card, and reading the RFID tag of the salesperson’s access card. The data is sent to the app in a random sequence that results in a new order being created, line items inserted, quantities increased, and the customer and the salesperson associated with the order.

Sounds simple? Our own specification has required assigning the special markers to the certain fields in the Order and Details configuration for the use case to work. Soon we have realized that it is impossible to come up with the coherent markers that are translated into execution of complex actions in response to the incoming barcodes and tags.

Through trial and error we have developed an amazing technology to make our “Hands-Free Order Entry” use case a reality. The pattern of order entry is universal and will apply to many business processes beyond the typical point-of-sale system: order delivery, stock inventory check, membership verification, self-service price check, security patrol, check-in and check-out, timecards, and much more.

Barcode Queue

We have extended the Touch UI framework to have a queue of barcodes. The generic term “barcode” also includes QR codes, RFID tags, or any other sequences of characters. The framework raises the “barcode.app” event for each “barcode” in the queue. Developers can handle the barcode immediately or in an asynchronous fashion when needed. The queue can accept new entries while the barcode at the front of the queue is being processed.

The wireless and wired barcode scanners, QR-code scanners, and RFID readers behave as human interface devices. They send characters representing scanned data to the keyboard input. Touch UI framework automatically detects the rapid submission of characters from virtual keyboard devices and places individual codes in the barcode queue. Touch UI can distinguish between the user typing rapidly and the barcode scanner sending the keys. That makes possible the barcode input detection in the online apps in the web browsers. Scanners working in the inventory mode are also supported.

Applications executing on the devices with cameras can also capture barcodes and QR codes when running in the native mode in Cloud On Time app or its white-label derivative on iOS, Mac OS, Android, Chrome OS, and Windows platforms. End users of the native app can activate the camera scanning mode and capture one or more barcodes. The captured barcodes are placed in the queue for processing.

UI Automation

Let’s say the end user of your app is scanning a UPC barcode on a box. Your app must respond to this simple action by starting a new order, creating a line item, finding the product for that barcode, and saving the line item. If the product is not found, then the order must be canceled.

The user of a custom Order Entry app can press the “New Order” button to create a new order. Next the user will press the “New Detail” button to enter a new line item. The product lookup field will help finding the product by the name or UPC. The business rules of the app will assign the default quantity and calculate the extended price. Finally, the user will click the “Save” button to add the line item to the order. The order total will be updated to reflect the new line item.

We have decided to take advantage of the highly structured metadata-driven Touch UI to allow creating automation scripts executed in response to the certain conditions (e.g. barcode scan on Orders page) and simulating the user actions by automatically pressing the buttons and entering values. The new $app.ifThisThenThat API makes it possible.

This script will respond to the barcode scanned on the Orders page and cause your Touch UI application to create an order with a line item.

From the perspective of the end user, the scanning of the barcode has magically created an order with the new line items. The form appears filled with the data.

In fact, the automation script has caused the app to execute the corresponding commands on behalf of the user. The business rules have been faithfully executed on each step. The forms have remained invisible during automation. Transition effects and other user interface enhancements were disabled.

UI Automation is built into Touch UI. Developers can design the core user experience based on Touch UI and later on enhance the app with the ability to respond to the scanned barcodes or other conditions. The barcodes can be simulated with the keyboard shortcuts or special custom actions and allow automating complex user interface sequences by manipulating the user interface of the app.

An automation script consists of multiple “if this then that” rules written in JavaScript and evaluated by the framework when the page loads up or when a barcode appears in the queue. The first rule that matches the current state of the app will be executed.

Kiosk UI

The responsive nature of Touch UI makes it possible for your app to display effortlessly on the screen of any size. The user interface provides a consistent set of features and controls that are easy to learn and match those found in the modern mobile operating systems.

If you place our Order Entry app in front of the customers in the grocery store, then you may inadvertently end up creating delays on the self-checkout lines. Some customers may be intimidated by the popup windows and multiple user interface options.

You need to reduce the app capabilities to the level of a sketch. Here you have the line items, there you have the customer information. Important buttons are clustered together. The order total must be easy to spot. A virtual terminal must be present to allow keying in the barcodes that cannot be read by the scanners due to poor quality.

Welcome to the Kiosk UI, the UI Automation feature that makes it possible to create an alternative presentation for your application suitable for mobile and occasional users with minimal training.

Kiosk-style presentation can be designed as a part of your application or introduced later on by the app administrator without any involvement on your part. The usability of your application can be extended in ways that you cannot even imagine when delivering apps built with Code On Time to your clients! They can take care of it themselves!

Consider another example of Kiosk UI displaying the customer information and responding to the loyalty card QR code.

The kiosk is displayed right on top of your app hiding the complexity and making emphasis on the core functionality that is important to certain end users.

Below is the actual screen that the kiosk is hiding from the end user. The kiosk is serving as a remote control for your application. End user is pushing buttons and making choices that are reflected in the form hidden behind the kiosk display.

Barcode input is always “on” when the kiosk display is active.

Kiosk presentation is activated by “if this then that” rules. The definition of the kiosk is an array of JavaScript objects describing the flow of information on the kiosk display. A particular display can be activated in the response to the state of the application.

Try matching the display definition above with the fullscreen Kiosk UI display shown below:

Kiosk UI is activated through UI Automation scripts. The kiosk presentation can be selectively disabled for certain user roles, while retaining the automation. The advanced user may have access to all features of your app. The end users on the go can be provided with the Kiosk presentation for a streamlined experience.

Display Flow

The technology in the foundation of Kiosk UI is called “display flow”.

This is a sample of the point-of-sale layout with the button cluster on the left created through movement of the corresponding JavaScript objects to the top of the display flow list with the minor changes to the properties.

The display flow is fully responsive. The point-of-sale system collapses into a tabbed user interface with the smaller buttons on a phone-size screen. Screen size breakpoints and device orientation can be used to configure the properties of the display flow.

Optional user interface elements can be hidden and brought up on-demand. The virtual terminal is turned off in the next screenshot.

The height of the display objects can be set to fill the screen. If that is the case then the display will cover the entire screen of the device and the “fillers” will become scrollable. This requires no CSS or HTML knowledge and works like magic. Multiple scrollable areas are supported.

The display flow is themed and accented as any other component of Touch UI.

Here is another example of the same display with the invisible gaps creating a simple modern user interface floating in the space.

It takes only a few minutes to rearrange the content.

Better yet, you can design multiple kiosk displays for the same app when needed.

JavaScript encoding of the display flow makes it suitable for online and offline applications.

We are very excited about this new addition to the Touch UI. The display flow will replace the current HTML based layouts in the forms/grid/list/cards and will help us to unify and simplify the various kinds of presentation in the framework. The display flow will allow drag & drop modification with the Visual Designer in the upcoming Code On Time v9. Imagine any Touch UI form with a display flow in the scrollable area and you will get the idea. Please note that we will retain the current look and fill and will still support HTML view templates.

It took many sleepless nights to work out a simple and expressive language for low code user interface design that is accessible and easy to manage with the visual development tools.

Availability

This new exciting technology is available in the release 8.9.5.0.

Get Code On Time and build amazing apps that work online and offline with barcodes, QR codes, and RFID tags. Give your apps an infinite life span and unexpected use cases with UI Automation and Kiosk User Interface.

Labels: Application Builder, Barcodes, Kiosk, Low Code, QR codes, Rapid Application Development, RFID tags