Touch UI

Blog
Touch UI
Saturday, May 19, 2018PrintSubscribe
Home Page and Toolbar

Let’s explore a few customization ideas for the home page and toolbar of your app.

The default home page displays a table of contents. The toolbar has “hamburger” button (“bars” icon) of the left side and content menu button (“more” icon) on the right sidebar. The illustration is presented in Light theme with Modern accent.

The default home page of app based on Touch UI features a table of contents.

A customized home of an app based on Touch UI may display marketing and informative content to the end users instead of a default table of contents. Let’s remove the table of contents from the home page and replace it with a marketing message for the end users of the app.

A customized home of an app based on Touch UI may display marketing and informative content to the end users instead of a default table of contents.

Have you noticed that the new design does not have the Menu and More buttons on the toolbar?

By default the data pages of the app do display both buttons just like the default home page with the table contents.

The standard features of the toolbar in apps based on Touch UI are Menu and Context buttons.

Let’s hide the Menu and More buttons on the toolbar on the data pages as well.

The toolbar of a Touch UI app without Menu and Context button.

This is how the data pages will look when the left sidebar is expanded.

Customized toolbar of a Touch UI with the sidebar expanded.

Select the project name on the start page of the app generator and locate “Home” page in the Project Explorer on the right hand side of the Project Designer.

Hierarchy of pages in Project Explorer of Code On Time app builder.

Right-click and delete both containers on the page.  This will remove the table of contents displayed to the authenticated users and the welcome message displayed to anonymous users.

Double-click the home page, select Jumbotron as the Template, save changes, and generate the app. Inspect the home page. It will look similar to the one in the picture. Try other templates to find the best fit for your app.

Sample customization of the home page in an app based on Touch UI.

Lock the page from being overwritten during the code generation before making any changes to the content of the template. Double-click the home page in the Project Explorer and specify First Time Only in the Generate property. Save the changes. The home page icon will display with the “lock” indicating that any changes to the app will be preserved if the page exists already.

Locked icon of a page in Project Explorer indicates that the page will not be ovewritten.

Click Develop on the toolbar of the Project Designer and add a new stylesheet with the name of choosing under ~/app/css/ folder.

Custom stylesheet in an app based on Touch UI created with Code On Time app generator.

Enter the following CSS rules in the file app/css/StyleSheet.css.

/* 1. Hide "hamburger" button when the toolbar does not have the "Back' button  */

.app-bar-toolbar:not(.app-has-back) #app-btn-menu {
    visibility: hidden;
}

/* 2. Hide the context button with "more" icon*/

.app-bar-toolbar #app-btn-context {
    visibility: hidden;
}

/* 3. Align the logo area of the page with the content when there is no sidebar on the left side */

body:not(.app-has-sidebar-left) .app-bar-toolbar .app-logo {
    left: 16px;
}

/* 4. Shift the logo text more to the left in the expanded sidebar */

body.app-has-sidebar-left:not(.app-has-minisidebar-left) .app-bar-toolbar .app-logo {
    left: 20px;
}

/* 5. Move the "icon" buttons of the toolbar to the right */

.app-bar-toolbar .app-btn-cluster-right .app-btn {
    margin-right: -28px;
}

The comments provided next to the CSS rules explain their effect on the User Interface of the app.

Rules (1) and (2) are hiding Menu and More buttons on the toolbar. Rule (3) shifts the text in the Logo area to the left when the sidebar is not visible.

Customized home page of an app based on Touch UI presented on a narrow device.

The same rules also apply to data pages. A data page of an app based on Touch UI with customized toolbar on a narrow screen is shown next.

A data page of an app based on Touch UI with customized toolbar on a narrow screen.

If the screen of the device is narrow then modal pages will be automatically replaced with fullscreen pages. In that case rule (1) does not apply and the Back is visible next to the name of the previous view.

A fullscreen page in an app based on Touch UI.

In this screenshot the user continues to drill into data and views the Category information of a product. Button Back remains visible and button More is not displayed. Rule (4) shifts context actions to the right of the toolbar.

A fullscreen page in an app based on Touch UI with the image preview in the page header.

Here is how the same changes will look in Dark theme with Construction accent.

This is the home page without Menu and More buttons on the toolbar.

A customized toolbar and home of an app based on Touch UI created with Code On Time app generator.

This is the data page with the expanded sidebar.

Expanded siderbar on app based on Touch UI.

This is the data page with the collapsed sidebar in inline editing mode.

Inline Editing mode of a data row in an app based on Touch UI created with Code On Time app builder.

This is the same app on a small device without More button in the toolbar. A fullscreen page of an app created with Code On Time application generator presented on a narrow screen.

A fullscreen page of an app created with Code On Time application generator presented on a narrow screen.

Touch UI is entirely CSS-driven and allows customization of various aspects of user interface.

Wednesday, April 25, 2018PrintSubscribe
Inline Editing in Multi-Level Master-Detail Pages

Hey there! We are working on completing the video tutorial covering the new multi-level master-detail support in the release 8.7.0.0.  The release has been accumulating numerous features over the past three months. The wait is almost over.

The screenshot shows a master detail page with three connected data views (Customers, Orders, Order Details).

User is entering the freight amount for an order in the screenshot. Inline Editing makes it possible. The feature requires zero programming. All of your grid views support editing as shown at https://www.youtube.com/watch?v=L4tbC5ZeUwA&index=1&list=PLy2g3SjvDe2b2cl9i0msBaMVLntQucZtb.

Notice the horizontal scrollbars showing the depth of grids. The styling of pager has been changed as well.
Three-Level master detail page in app created with Code On Time.

All types of input are working in inline editing mode, just like they do in the forms. Here is  a lookup control with auto-complete feature. Enormous amount of work has been put in comprehensive keyboard navigation support in forms.

Touch UI supports data input in Inline Editing mode.

Apps created with Code On Time support inline editing on mobile devices. The screenshot shows “mobile” inline editing mode.

Mobile inline editing is unique and exclusive to apps created with Code On Time.

Inline Editing is fully supported in List and Cards modes as well.

Edit data inline in grids, lists, and cards or your app.

Don’t forget – native apps, custom search, and a host of other features are coming your away. Subscribe to our YouTube channel and get notified when the new tutorials are out!

Monday, April 9, 2018PrintSubscribe
Changing Field Values Via JavaScript Business Rules

Some form of validation is required in every application to help the user insert the correct data. Applications created with Code On Time app generator offer validation in the form of business rules.

Validating the Last Name field of the New Employees form.

Let’s add validation business rules the Employees controller of our sample Northwind app.

Open the Project Designer. In the Solution Explorer, switch to the Controllers tab, right-click on Employees / Business Rules node, and press New Business Rule.

Creating a new business rule on Employees controller.

Specify the following:

Property Value
Type JavaScript
Command Name Insert
Phase Before
Script
if ($row.LastName == 'Smith') {
    this.preventDefault();
    $row.LastName = null;
}

The above script will run when the user presses Save. It will check if the user has specified a Last Name of “Smith” – if so, it will cancel the save operation and clear the field.

Save the new business rule. On the toolbar, press Browse to run the app. Navigate to the Employees page and create a new record.

Creating a new employee with Last Name of "Smith".

Enter values for the employee and press Save. The save operation will not be executed, and the Last Name field will be cleared.

The Last Name field has been cleared.

Our business rule does ensure the user does not enter an incorrect value, but it does not make it clear to the user what is going on. We will want to add some feedback in the form of a message box to help the user understand.

Change the business rule as shown below:

if ($row.LastName == 'Smith') {
    this.preventDefault();
    // show message box
    $app.alert('Last Name "Smith" is not allowed.').done(function () {
        // update field value to null
        $app.input.execute({
            values: [
                { name: 'LastName', value: null }
            ]
        });
        // focus on the field
        $app.input.focus({ fieldName: 'LastName' });
    });
}

Our updated business rule has a few changes. Notice that the $app.alert function is used to display a message to the user. However, this alert will show a different form and change the current context. Attempting to update the field LastName after an alert is displayed will attempt to update a LastName field inside the alert form – which does not exist. Therefore, a done handler will need to be added to the $app.alert method call in order to execute code after the user closes the alert.

One more point to notice is that the $row variable is only in scope during the execution of the business rule. The asynchronous code in the done handler is executed when $row is out of scope. Therefore, it is necessary to use the $app.input.execute API to update the field values when the user returns to the Employees create form. The execute method accepts an object with the property values that contains a list of key value pairs. The $app.input.focus API is called in order to focus on a field called LastName as well.

Save the business rule and regenerate the project. Create a new employee with the last name of “Smith” and attempt to save. Notice that a message box now notifies the user that the last name is not allowed.

Alert message box is displayed to the user.

Press OK to close the message box. The Last Name field has been cleared and is currently focused.

The last name field is cleared and focused.

There are other ways of displaying a message to the user without interrupting the workflow. Let’s try the following:

if ($row.LastName == 'Smith') {
    this.preventDefault();
    $row.LastName = null;
    // focus and show message next to field
    this.result.focus('LastName', 'Last Name "Smith" is not allowed.');
}

The example above will clear the field, and use the result.focus() method to focus on the field, and display a message next to the input. The result can be seen below.

Focus message displayed next to the LastName field.

Another technique is to use the notification API to display a transient message to the user at the bottom of the screen.

if ($row.LastName == 'Smith') {
    this.preventDefault();
    $row.LastName = null;
    this.result.focus('LastName');
    $app.touch.notify('Last Name "Smith" is not allowed.');
}

The result can be seen below:

image

The notification will disappear after a default of 2 seconds.

Continue to Dynamic Form Builder