Universal Input and Focus Highlighting

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) 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(12) 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) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) 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(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Friday, March 5, 2021PrintSubscribe
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: