Forms, Reports, Apps

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

  Blog

Blog
Thursday, March 25, 2021PrintSubscribe
Lines, Lines, Lines

 Horizontal and Vertical Lines

The signature feature of Touch UI is the “lined paper” style of data presentation. A list of items is rendered in the table format that looks like a spreadsheet. A single data item is displayed in a form with the rows of values separated by horizontal lines. The reading pane mode provides a great example of that.


The height of each row is automatically adjusted to fit the content. The form will also distribute the field values in multiple columns if the floating is enabled and the form is wide enough.


Developers have a great control over the horizontal and vertical lines globally and on the fine-grained level. Let’s learn more about it.

Grid Lines

The vertical lines in the grid can be hidden in the file ~/touch-settings.json:


Setting the ui.grid.lines.vertical property to false will hide the vertical lines and force the framework to display the “n/a” abbreviation in the empty data cells in a muted color to provide a visual point of reference for the “null” values.


Compare this to the default presentation with the horizontal and vertical lines, where the “empty” values are easy to spot without a visual aid.


If you prefer the default grid presentation with the horizontal and vertical lines but need to hide the vertical lines in a particular data view, then have it tagged as
grid-lines-vertical-none to achieve the same effect.

If the opposite effect is needed then hide the horizontal lines by setting the ui.grid.lines.horizontal to false in ~/touch-settings.json or tag a view as grid-lines-horizontal-none.


The minimalist presentation can be achieved by turning the horizontal and vertical lines “off” either in ~/touch-setting.json or by tagging a data view simultaneously with the two tags.


This is the no-lines view in the grid:


The boundaries of the selected field value are easy to see in the inline editing mode whether or not the grid has a look of a spreadsheet.

Form Lines

Get that minimalist look in the forms by getting rid of the horizontal lines.


You can accomplish that by setting ui.form.lines.horizontal option to false in ~/touch-settings.json


The tag form-lines-horizontal-none will hide the horizontal lines in a data view form shown below.


Form with the horizontal lines hidden will display an “Optional” text as a placeholder for the fields that accept the “null” value. The placeholders are visible when the end user is entering a new record or editing an existing one. This standard placeholder text can be overridden by setting a custom placeholder for the data field in the data controller view.


Finally you can have the lines to wrap around the field values like this.


The “outlined” input focus will work well when the input lines are enabled. This configuration of ~/touch-settings.json will display the lines around the text inputs and show the thick outline in the accent color of the theme when an input is focused.


Sunday, March 7, 2021PrintSubscribe
Adaptive Wrapping, Virtual Keyboard, Input Focus, Dark Theme Detection

Code On Time release 8.9.15.0 introduces huge performance improvements in the generated apps. Several issues were resolved to deliver a butter-smooth performance across all operating systems and browsers. The major features, including Adaptive Wrapping, Virtual Keyboards, Input Focus Highlighting, and  automatic Light/Dark Theme Detection are bringing your apps to the new level of user interface excellence. Learn about the new features and scroll down to see the full list of the bug fixes below.

We are also pleased to announce to our loyal fans and new friends that the new customer portal based on Content Hub Add-on will go live soon. It will provide a new place to get help and discuss the product with the community. Stay tuned!

Adaptive Wrapping

A subtle but very significant change comes to the apps running on the small screens. For years, the client framework has used a simple rule to determine the layout of the forms. If the screen size is smaller than the typical tablet, then the field values are wrapped under the label. The updated framework takes another approach. It will render the labels and their field side-by-side. Then it will measure the height of each element. If more than 20% of the elements are exceeding the height of a single line text, then the field values are wrapped under the values. Side-by-side labels and values take significantly less vertical space and present much better on the phones. 


 

There is no guesswork or any effort on your part, since the framework will wrap the longer labels and values automatically when creating a layout for a small screen. The wrapping is now data-driven and we hope you like it! If not, then disable the adaptive wrapping in ~/touch-settings.json by setting ui.form.adaptiveWrapping to false. Note that the adaptive does not apply to custom layouts unless you set up the data-wrap=”adaptive” attribute on the form container.

Virtual Keyboards

Consistent virtual keyboards are automatically displayed by the framework for numeric values and telephone numbers on touchscreens running any operating system. The numeric virtual keyboard does not rely on the native “number” input of the operating system and retains the formatting including the currency. Optional auto-formatting injects the decimal point in the value. The virtual keyboard floats on the tablets and sliders up on the small touchscreen.

 
Build your own custom keyboards to speed up data entry in the apps created with Code On Time.

 

Input Focus Highlighting

The “underline” input focus is now standard in Touch UI. 




Light/Dark Theme Detection

Blending with the preferred theme of the operating system of the device seems to be a good idea. This is especially important if the operating system is changing the theme colors based on the time of the day. Touch UI detects the preferred colors of the device and selects the Light or Dark theme automatically while preserving the selected color accent or custom brand accent.

Features & Bug Fixes

The release has introduced the following features and bug fixes:

  • (Touch UI) Focus on the field in the tab or invisible wizard page will correctly activate that tab/page. This has been broken in the previous releases.
  • (Touch UI) Top-level items of the navigation menu are not underlined when hovered with a mouse pointer if the external URL of the page is set to "about:blank" without quotes.
  • (Touch UI) Fixed the bug preventing the display of page menu on the placeholder pages with the children.
  • (Touch UI) Main menu page links will have have their text underlined when hovered with the mouse pointer if there is at least one top-level navigation option with the page link.
  • (Model Builder) Dragging of the model field name text will not cause an exception. 
  • (Touch UI) iPad OS v13 are treated as iOS devices even though they are being reported as iMac platform.
  • (Server Framework) Bootstrap script is linked to the app pages with the bootstrap content only if server.bootstrap.js is set to true in ~/touch-settings.json. This improves performance of the static bootstrap pages.
  • (Server Framework) Controllers based on custom commands with the generated fields/command/actions will not raise an SQL exception when reading data if DataView fields are included in the controller's view.
  • (Universal Input) Touch devices will activate the modal calendar input without triggering the OS keyboard appearance.
  • (Calendar Input) Calendar appears wider for a more conformable input on devices wide than xs.
  • (Framework) Stylesheet generator will monitor changes to ~/touch-settings.json to detect when ui.theme.icons property is changed.
  • (Touch UI) User-driven persistent "fullscreen" mode will restore the "fullscreen" state of the view if it was previously activated by the end user.
  • (Touch UI) Promo button responds to touch events.
  • (Touch UI) Duplicate match details in the lookup now correctly display the details of the first match. Previously the match details were injected in the second item instead while the first match was displayed without the details.
  • (Rich Text) Unified the text whitespace styling of RTF editor and read-only text representation.
  • (Rich Text) Control toolbar shows up above the lookup chevron icon.
  • (Universal Input) List of items, checkboxes, and radio buttons do not respond to touch if the list is scrolled.
  • (Rich Text) Rich text toolbar is removed before the focus is lost.
  • (Touch UI) Long press in Firefox will not cause the immediate closing of the popup context menu displayed in response to touch. 
  • (Rich Text) Tab and Shift+Tab will correctly "blur" the reach text input. Previously only the click outside of the RTF input has worked.
  • (Rich Text) Fixed the issue with incorrect ordered/unordered list items inserted when Enter key is pressed in the boundaries of the list block.
  • (Reach Text) The RTF input is removed when the user clicks on the lookup selectors.
  • (Touch UI) Up-to-date material icons are now included.
  • (Touch UI) A single previous "revealed" inactive page  stops being visible in reverse navigation only. Previously all "revealed" pages would become invisible.
  • (Keyboard) Event keyboardclosed.app is triggered when the virtual keyboard has been detached.
  • (Touch UI) Empty map input placeholder is not collapsed and is filled with a single non-breakable space.
  • (Universal Input) Right-clicking of the input placeholder will cause it to disappear and make the input focused before the system context menu of the browser is displayed.
  • (Touch UI) Adaptive wrapping in the containers with xs (extra small)  width is enabled by default. The framework will perform a runtime evaluation of the height of the inputs in the form containers. The wrapping of value below the label is performed if less than 20% of them are taller than the normal height. This provides more compact screen presentation on phone-size devices. The feature can be disabled with ui.form.adapativeWrapping in touch-settings.json.
  • (Touch UI) Unified the paddings in the sticky header and view instructions.
  • (Kiosk UI) Reading Pane and Sidebar features are disabled on the app pages with the UI automation and Kiosk UI enabled.
  • (Touch UI) Fixed dark theme colors for the map context card.
  • (Touch UI) Class app-touch is added to the body  for "touch" devices. Mouse pointer interactions will cause the class to be replaced with app-desktop and vise versa.
  • (Touch UI) Input text is selected if ui.input.focus.select.whenTouch is set to true and not selected if ui.input.focus.select.whenMouse is set to false in ~/touch-settings.json.
  • (Touch UI) Notification bar will move the footer with the action buttons of the form when being dismissed.
  • (Touch UI) Radio button lists, check box lists, and item lists are not removed from the form when the form is disposed. This prevents the contraction effect when the user opens up another item in the reading pane.
  • (Touch UI) Fixed the exception raised when the inline editor form input is focused prior to the initialization.
  • (Touch UI) Dark/Light color schema of the operating system is automatic detected and activated by the apps.
  • (Calendar) New styling for the calendar input in Dark theme.
  • (Calendar) Fixed the initial positioning of the modal calendar input. Previously the button bar has covered the date in the form.
  • (Touch UI) Actions buttons in the forms have a uniform padding in all directions.
  • (Touch UI) Scrollable list items, checkboxes, and radio button lists have the horizontal scrollbar aligned with the edge of the right shadow.
  • (Touch UI) Static map input maintains the with that was set at the time of the server request to ensure  a consistent rendering.
  • (Touch UI) Synching of data view fields is not performed during the transition in progress.
  • (Touch UI) Checkbox toggle has a faster animation and does not respond to click/touch while the animation of the state change is in progress. It also gains the focus after click/tap.
  • (Touch UI) Fullscreen zoom in/out is now animated.
  • (Touch UI) Promo button animation is now consistently reproduced under all conditions.
  • (Touch UI) Tag action-buttons-top|bottom|none will control the display of the action bar buttons in the form.
  • (Touch UI) Toggle checkbox is vertically aligned in the input. Previously it was shifted to the top.
  • (Universal Input) Arrow Up key goes to the previous element if the blob element is the active input.
  • (Touch UI) Method $app.touch.scrollable('scrollbar') will return the information about the width and height of scrollbars in the WebView.
  • (Framework) Field tag can be tested with a regular expression as  field.tagged(regex) on the client.
  • (Touch UI) Method $app.input.blur will blur any active element or perform explicit removal with disabled windows focus if the active input element is iframe.
  • (Touch UI) Dark theme uses a white-colored outline for the active item in the list input elements (radio button, check box, etc.)
  • (Upload) The click on the upload icon will cause the upload to blur the current input using $app.input.blur() method to ensure that RTF editor is removed.
  • (Universal Input) All standard inputs are setting up the last focused input element. Previousy on the text input worked that way.
  • (Upload) Added a breakpoint for the prompt to upload input to have a smaller text size on forms that less than "small" in width.
  • (Touch UI) Word "fax" in the field name will cause the phone virtual keyboard to be displayed on touch devices.
  • (Touch UI) Escape key is not handled when the virtual keyboard is displayed. The keyboard handles the this key on its own.
  • (Touch UI) Popup will scroll the partially visible top item to the top.  This improves the presentation when the popup has a selected item and the popup appears as scrolled.
  • (Touch UI) Drop down list popup with the arrow is pointing to the middle of the input text.
  • (Touch UI) Popup header item has a wider right padding for a more balanced of the lists with "short" items.
  • (Universal Input) Method $app.input.move allows locating the next data field without activation.
  • (Touch UI) Lookup forms ("Select Item" and "New Item"), popup with the list of values, and  modal form control buttons (zoom, close) are invoked after the virtual keyboard of the operating system is closes.
  • (Touch UI) Active input is blurred when lookup selection button is clicked or touched.
  • (Touch UI) Visible popups are closed if there is no native virtual keyboard as soon as the resizing of the window starts.
  • (Touch UI) Method $app.input.keyboard('virtual') returns true if the native virtual keyboard of the operating system is active.
  • (Touch UI) Drag manager will not trigger the duplicate drag events of Firefox in the response to mousedown that follows the previously handled pointerdown/touchstart.
  • (Touch UI) Fixed the issue with the focused data input value assigned after a lookup value was selected for another field that was focused at the time.
  • (Touch UI) List view style displays labels to the left of the field value if the visible screen is at least sm. Otherwise the label is display below or above the field value.
  • (Touch UI) Vertically stacked labels in form are now sized at 12px to match the size of grid column headers.
  • (Touch UI) Fixed the padding of text in the collapsible headers of categories.
  • (Touch UI) Menu strip is not hidden when the page is resized vertically of if the width of the master toolbar in the reading pane is unchanged during resizing.
  • (Touch UI) Popup is activated in the response to touch above, below, on the left, or on the right.
  • (Touch UI) New API method $app.touch.keyboard will invoke the callback specified in the arguments after the native device keyboard is closed or immediately if the native keyboard is not visible. This method is used to display the virtual keyboards.
  • (Touch UI) Lowercase "loading..." message is displayed when the page data is loaded.
  • (Touch UI) Long press with the mouse does not trigger the redundant click event when the mouse button is released.
  • (Touch UI) Long press event is repeated every 100 milliseconds if the handler prevents the default processing. Otherwise the drag operation is canceled. This makes possible implementing Backspace processing in the virtual keyboard.
  • (Touch UI) Visual notifications are taking into account the left gap on the device simulation screens in v9.
  • (Touch UI) Collapsible header has the line height equal to the font size.
  • (Touch UI) Dropdown popup is correctly overlaying the input text in the device preview mode and when the page is scrolled to support v9.
  • (Touch UI) Cards sticky header is always occupying the full width of the page.
  • (Calendar) Event "getcolormap.calendar.app" event is raised only if there is the "calendar-color"-tagged field.
  • (Touch UI) Fixed the colors of the toolbar of the rich text editor.
  • (Touch UI) Multi-line text is displayed with ellipses if it does not fit in the boundaries of the text field.
  • (Touch UI) Scrollbars on touch devices are easing in before fading out to make them disappear "slower".
  • (Calendar)  Long press works on events right after the calendar is dragged-scrolled.
  • (Framework) Classic apps do not raise an exception when a new row is inserted.
Labels: Release Notes
Saturday, March 6, 2021PrintSubscribe
Virtual Keyboards

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