Code On Time: Features

Blog

Features

Thursday, March 25, 2021Print Subscribe

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.

Labels: Features, Form Builder, User Interface

Friday, March 5, 2021Print Subscribe

Universal Input and Focus Highlighting

Universal Input is the major technological advantage of apps based on Touch UI. The forms do not contain the physical HTML input elements. The values are rendered as text, which is perfect for reading. If the user clicks on the value, then the framework will create a native HTML text input control and place it over the value. It may also open a built-in virtual keyboard to make it easier to type on mobile devices.

This approach makes the forms look natural since the values are not embedded in the restrictive text boxes and flow naturally on the page. It also improves performance making possible responsive data-driven surveys with hundreds of inputs.

The active input control may have one of the three styles of focus that help the user to see the active input.

Underline

The default highlighting for input focus in Touch UI is the line going below the entire length of the field value. The line matches the color of the accent.

Outline Focus

The second alternative is to outline the entire value. The City name is outlined in the modal form in the screenshot.

You will need to change the configuration file ~/app/touch-settings.json as follows to replace the default “underline” style with the “outline”.

Minimalist Focus

There is also a minimalist variation of the focus for a clean uncluttered look. The City name shows up as a selected text ready to be changed or replaced on focus in this screenshot. Set the style to “none” for a minimalist input focus.

Label Color Accent

You have another option to make the input focus more obvious if you prefer. Set up the label property of the focus to true in touch-settings.json.

The input label will get a touch of accent color when the focus is acquired.

Initial Text Selection

The framework makes another important configuration of the input on focus. It will either select the entire text value or place the cursor of the text input control at the end of the value. The former is done when the end user is operating the app with the mouse pointer and the latter is taking on touch screens.

You can override the default behavior like this:

This will result in the direct opposite of the default configuration with the cursor placed right after the last word of the Contact Title in the screenshot:

Labels: Features, Rapid Application Development, Touch UI

Thursday, March 4, 2021Print Subscribe

Light or Dark? Automatic Theme Detection.

If you had a pleasure of setting up a new device recently, then you might remember the challenge of choosing between the Light and Dark themes for the user interface. The modern operating systems also have an optional automatic transition between the two based on the time of the day.

Touch UI does have two major theme variations called Light and Dark with multiple accents that make possible bringing a splash of color to each theme. Your app will automatically detect the theme of the device and switch the theme for you.

Here is an example of iPad Mini with the online app in Dark theme.

The color accent of the app will not change when the switch of the theme occurs. If you have designed your own brand accent or prefer a particular standard accent, then your customization choice will remain in place.

If you are a Windows user willing to experiment with the automatic theme detection, then search for Theme in the Start menu, load up your app in the browser and try switching the dark and light app modes in the Colors settings.

Choose the dark colors and observe the instant change from Light to Dark: The browsers will go “dark” and so is the app.

Flick the switch and bring the light back. The user interface of the operating system changes and so does the application built with Code On Time. The screen shot shows Chrome, Edge, and FireFox respond in exactly the same way.

Your application will also detect that the theme has changed when it loads up.

If you prefer to force the particular theme for the application, then disable the theme detection in ~/touch-settings.json like this:

The dark mode of the operating system will be ignored.

Our recommendation is to keep the theme detection in the enabled state. Light color on the dark display or the dark panels on the light background may cause an unintended distress to the end users of your app.

If you have designed your own “brand-name” accent, then make sure that it supports both themes of Touch UI or make the specific adjustments as we do in the configuration of the Vantage accent found at ~\app\css\themes\touch-accent.vantage.json:

Labels: Features, Touch UI