Tips and Tricks

Blog
Tips and Tricks
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.

Friday, January 19, 2018PrintSubscribe
Dark Theme and Client/Server Configuration

Code On Time release 8.6.12.0 introduces the new Theme Engine with support for custom themes. The new engine comes with new “Dark” theme. Now developers can choose from 70 color combinations provided by 2 themes and 35 accents.

We have also renamed Settings/ Web Server Configuration section Settings / Client & Server.

We have extended the client framework with the foundation for “inline editing” in grids/cards/list. Keep reading to find more.

Dark Theme

An example of  Dark theme with Construction accent.

An example of  Dark theme with Construction accent in app with Touch UI.

This is an app with Dark theme in Vantage accent.

This is an app with Dark theme in Vantage accent. The app was created with Code On Time app generator.

Here is a bootstrap-based page in an app with Dark theme and Aquarium accent. We have implemented new “software breakpoints” for bootstrap content to enable correct rendering of bootstrap content in modal pages and the upcoming split screens. The menu is not displayed on the toolbar if every page with icon is referenced in the Tab Bar at the bottom of the screen.

Here is a bootstrap-based page in an app with Dark theme and Aquarium accent.  The app is implemented with Touch UI.

Client & Server

Project configuration section in Settings previously called Web Server Configuration is now called Client & Server.

image

Client & Server section allows selecting the front end for your app. The default option is the Web Browser. This option is already familiar to developer using Code On Time. The app generator will start the default web browser of the operating system.

image

Two additional options Generic App and Custom App will start a native app either based on Chromium Embedded Framework (all versions of Windows with API compatible with Windows 7) or Universal Windows Platform (Windows 10 and above).

image

The native custom or generic app will install JavaScript, CSS, HTML, Fonts, and Images of your application on the device by downloading them from the server. IIS Express is the server that developers work with to test their applications.

Entire application framework is installed on the device in the native mode. Native app loads local pages in a platform-specific web view. Local pages will request data from the remote server (IIS Express in development mode). The main advantage of native apps is faster load time and ability to interact with the device.

We are launching a new product called Offline Sync Add-On that will enable native app to work in a completely disconnected or “offline” mode. It will perform preemptive downloading of data on the device. No changes to the server-side application will be requires. Any app created with Code On Time and deployed to a server will work in a completely offline mode with the help of the add-on.

The rollout of native apps will begin with Generic App for Windows 7 and Universal Windows Platform.

Custom apps for the same platform will become available in February of 2018. Offline Sync Add-On is expected to become available in the same time frame.

Generic and Custom apps for iOS will become available in March 2018, which will be followed by Android and MacOS.

Release Summary

The following features and enhancements are included in the release:

  • Theme engine has been extended to support multiple themes with accents. The new theme called Dark is introduced. It can be combined with any of the 35 accents.
  • Data fields with HyperlinkFormatString are displays as links in forms. TouchUI
  • SQL business rules use the connection string name specified in the data controller if any.
  • Bootstrap responsiveness is now based on "software" breakpoints calculated for each page in Touch UI.
  • Bootstrap responsiveness is fixed app-min-lg in Classic UI.
  • Method dataView.tagged() does not assign tag cache if there are no tags defined
  • Any view tagged as history-search-none will not retain values in filter, quick find, advanced search and will also forget selected view if different from the default.
  • The following configuration of ~touch-settings.json will disable the search history globally in the lookups.
    {
      "history": {
        "lookup": {
          "search": false
        }
      }
    }
    
  • Section on the project settings Web Server Configuration has been renamed to Client & Server. It allows configuring the front-end on the development that will be used to preview the app. Supported options “Browser”, “Generic”, and “Custom” apps.
  • Running an app created with Unlimited Edition in debug mode of Visual Studio will automatically link “debugging” versions of the JavaScript libraries.
  • Client library now includes uniqcode.js to allow better parsing of text with non-Latin characters.
  • Removed the code related to the legacy transaction management in the server-side framework. It will be replaced with the new code to support ODP (Offline Data Processor).
  • Menu strip is not displayed in the toolbar if all menu items have icons and the Tab Bar is visible. Touch UI
  • Menu strip is not displayed in the toolbar if all menu items have icons and the all icons are visible at the bottom of the sidebar. TouchUI
  • Touch devices with small form factor do not reduce density of summary views anymore.
  • Added "beforeusercontextshow.app" event to add user context menu items in sidebar, menu bar, user dropdown. Touch UI
  • Fixed issue with Web App Factory projects not finding "Template.xslt" file.
  • Password character is now rendered as "black circle" character. Touch UI
  • Tooltip for Boolean values in grids displays values as Yes and No. Touch UI
  • Added CSS minification to theme stylesheet generator. Touch UI
  • Removed the limits on the width of app name in the toolbar when sidebar is minimized. Touch UI
  • View Selector on action bar has the same color as actions and groups. Touch UI
  • Switching between Charts and [ViewStyle+Aggregates] correctly resets the page height. Touch UI
  • Method $app.touch.resetPageHeight will reset the height of the current page. Touch UI
  • Fixed security issue with anonymous access to controller XML in apps with HTML implementation.

Inline Editing

The most frequently requested feature that we hear about from customers is the ability to edit data inline. The direct insertion of inputs in grid/list/cards view styles is complicated by the fact that these styles are displaying data inside of “A” tag. Our internal discussions have led to a conclusion that inline input will be integrated in the future rewrite of these view styles, further delaying availability.

Luckily our independent effort on Universal Input and Surveys allowed us to architect the method of inline editing in Touch UI apps compatible both with touch devices and device with keyboard/mouse input. The foundational components are already in place and will work with the current “link-based” implementation of grid/list/cards.

The complete integration of Inline Editing in the Touch UI in expected in a couple of weeks!!!

Monday, September 18, 2017PrintSubscribe
Executing Requests with the Client API

All apps created with Code On Time app generator contain a single client-side API used for all server-side operations, including Select, Insert, Update, Delete, Report, Batch Edit, etc. One significant advantage of using a centralized API is that any style of user interface is able to access the same API – this has allowed the co-development of Classic and Touch UI.

Another major advantage in the client-side API is that developers are able to extend their apps with custom behavior utilizing the same data access routines – any access control rules, data controller customizations, and security restrictions will also equally apply to these custom requests.

To access the client API from custom JavaScript, simply call the method $app.execute(options) with the required parameters set on the options object. See a list of available options parameters below.

Property Description Default Value
controller The controller to direct the request to. (required)
view The view of the controller to use. grid1
done
success
Callback function when the request was send and received successfully. First argument contains the results. List of records can be found under the result property equal to the name of the controller.
fail
error
Callback function when the request failed.
command The name of the command to execute. “Select”
argument The argument of the command to execute.
lastCommand The last command name.
lastCommandArgument The last command argument.
pageSize The number of records to return in a single page. 100
pageIndex The page number to return. 0
filter An array of field filter objects. Each object must have 3 properties:
- “field” specifies the field name
- “operation” specifies the filter operation to perform
- “value” specifies the value of the filter. For operations with two operands (such as “between”), specify an array of two values.
values An array of field value objects. Each object can have the following properties:
- “name” specifies the name of the field matching the one defined in the controller.
- “value” specifies the current value of the field.
- “newValue” specifies the new value.
- “modified” specifies that the new value will be used in any Insert or Update expressions. Setting “newValue” will set “modified” to true by default.
selectedValues An array of strings that contain the primary keys of the selected records. Used for batch update.
tags Specify a list of tags that can be processed on the server.
requiresData Specifies if data should be returned to the client. true
requiresAggregates Specifies if aggregates defined on the view should be returned with the request. false
fieldFilter Specifies a list of fields to include in the response for each record. Not setting this value will return all fields.
format Specifies if field values should be formatted when the results are returned. true
includeRawResponse Specifies if the result should include the raw response in the rawResponse property. false

The simplest way to test your queries is to use the Developer Tools Console, available in most modern browsers.

First, browse to your running site in your favorite browser. Press “F12” to bring up Developer Tools. Switch to the Console tab.

Using the Console tab of Developer Tools to test the $app.execute() API.

You may now begin typing in $app.execute() requests in the console. Note the use of console.log(result), which will print the JavaScript object to the console when the request returns.

The following examples will use the online Northwind sample.

Select

The simplest use case for using the API is to request a page of data. See the following example below on how to fetch the first 10 records from the Orders table where the field “ShipCountry” is equal to “USA”.

$app.execute({
    controller: 'Orders',
    pageSize: 10,
    filter: [
        { field: 'ShipCountry', operator: '=', value: 'USA' }
    ],
    done: function (result) {
        console.log(result);
    }
})

The result shown in the Developer Tools Console.

Selecting 10 orders with a filter.

Insert

In order to insert records to a particular table, the request must specify the “Insert” command and a list of field values. This list is represented by the values property. Each field value object contains a field name. Values that will be assigned to the new record are stored in the field value’s newValue property. The primary key of the table is added as a field value object with the property value equal to null in order for the response to return the new primary key of the inserted record.

$app.execute({
    controller: 'Orders',
    command: 'Insert',
    values: [
        { name: 'OrderID', value: null },
        { name: 'ShipCity', newValue: 'San Diego' },
        { name: 'ShipCountry', newValue: 'USA' }
    ],
    done: function (result) {
        console.log(result);
    }
})

See the results below.

Inserting a record using the $app.execute() API.

Refreshing the view in the browser window will reveal the new record.

The new record is displayed in the grid.

Update

When performing operations on an existing record, either the primary key or an array of selected values must be specified. New field values must be specified in the newValue property.

$app.execute({
    controller: 'Orders',
    command: 'Update',
    values: [
        { name: 'OrderID', value: 11083 },
        { name: 'OrderDate', newValue: new Date() }
    ],
    done: function (result) {
        console.log(result);
    }
})

The result is shown below.

Updating an order via the $app.execute() API.

The result can be seen by refreshing the list of orders.

The updated field value is visible by refreshing the page.

Delete

Delete operations must specify the primary key in the values array.

$app.execute({
    controller: 'Orders',
    command: 'Delete',
    values: [
        { name: 'OrderID', value: 11079 }
    ],
    done: function (result) {
        console.log(result);
    }
})

See result below.

Deleting a record.

The rowsAffected property will be equal to “1” if the record was successfully deleted.