Code On Time: Rapid Application Development

Blog

Rapid Application Development

Sunday, October 3, 2021Print Subscribe

Touch UI was designed to be responsive and functional on a device with any screen size. Forms are presented in modal popups on large screens or in the fullscreen mode on smaller devices. Actions are automatically rendered in the system toolbar bar, in the form button bar, or as a floating button. There is the universal “more” menu providing users with access to all actions available in the current context.

Developers can download HTML templates of live forms and tinker with them by moving fields around and injecting custom actions in the desired position. Touch UI provides a simple method of injecting custom actions in the desired position without a custom form template. The screenshot below demonstrates two sets of actions mixed in the flow of the data fields in the form on the iPad-size screen.

Here is another example of the same form in the Pixel phone preview mode in the app created with Code On Time.

Begin by adding two action groups with the “Custom” scope to the Employees data controller. Place actions with the Custom command name and corresponding Argument and Header Text into each group. Make sure to specify the When Last Command Name property for the actions. Our example has this property set to Any to ensure that the actions are visible in any mode regardless of the last executed action.

Action group IDs are set to ag100 and ag101 by the Project Designer. Right-click an action group in the Project Explorer and choose Rename if you prefer the custom identifiers.

Now create two fields in the same data controller with the matching fields names. Set their item Style to Actions. The framework will treat these fields as virtual and therefore they will not have any impact on the standard data manipulation actions or custom actions.

Drag the fields into the desired position in the data field flow of the editForm1 view.

The framework will render the actions as specified. These actions will be visible only if all conditions specified in their “When …” properties are met. If all actions are invisible, then an empty space will be in their place instead. Use the Visible When property of the data field to hide the empty space when such conditions do occur.

We had attempted previously to come up with a way to mix the data fields and actions without having to build a custom template. Our last attempt succeeded when we were solving the problem of making it obvious to users that the Get Verification Code button in the 2-Factor Authentication form must be pressed in order to get the code via chosen delivery method.

The data field with the Actions style in the form above is also tagged as merge-with-previous to eliminate the line separating the “Actions” lookup from the previous data field.

If you were to move the actions from the Custom group ag100 to the Form group ag2, then the form would look like this. Custom actions Meet, Promote, and Happy Birthday are rendered in the form button bar.

This is how the corresponding configuration of the data controller may look in the Project Explorer.

Arguably keeping the ag100 data field in the form flow right next to the Last Name, First Name, Hire Date, and Birth Date is a better user experience than placing the actions into the form button bar.

Labels: Form Builder, Rapid Application Development, 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, August 27, 2020Print Subscribe

Filled, Outlined, Rounded, and Sharp + SameSite Cookies + NET 4.7.2

Code On Time release 8.9.8.0 introduces support for .NET 4.7.2 both in the app generator and in the application framework. The new projects will target .NET 4.7.2 by default.

The recent versions of Chrome and Edge are enforcing SameSite property of the cookies to be specified. Microsoft has introduced the implementation of SameSite cookie in .NET 4.7.2. The processing of SameSite cookie property is implemented in apps built on .NET 4.7.2 and above. The SameSite property of cookies created by the generated apps is set to "Strict" by default. Make sure to change the target framework of your app from 4.6. to 4.7.2 in Source Code and UI section. The app generator has been recompiled for .NET 4.7.2, which does provide the increased performance when building apps.

.NET Framework 4.7.2 is now required for the app generator to work.

The material icon library has been upgraded to offer 4 choices - filled (default), outlined, rounded, and sharp icons. Specify the desired icon style for your app in ~/app/touch-setting.json file in ui.theme.icons property.

Here is the list of the enhancements included in this release:

(Class Library ) Added hints pointing to the local version of files for ReportViewer binaries.
(Touch UI) Input refocus is always canceled when the active input is losing its focus. Re-focus happens when the value of the active input needs to be changed.
(Export) Export actions will use the view specified in the Command Argument of the action to produce the data set. If the command argument is empty then the current view will provide the data.
(Touch UI) Confirmation controllers do not cause syncing of the "confirmed" view.
(Client Library) First row is not passed with the "confirmed" action if there is no selection in the "confirmed" view. If there is a selected row then only that row is passed with the "confirmed" action as values.
(Client Library) New method DataView.commandRow() returns the current row that will be affected by any action in the context.
(Framework) Array of values is empty when a request to get a page of data is executed while no row is selected.
(Touch UI) Menu bar and page header defined in the master are removed from output with and without authentication.
(Framework) Integrated SamSite cookie property handling in the framework. The default value is set to Strict.
Removed excessive backup for HTML pages.

Labels: Rapid Application Development, Release Notes