User Interface

User Interface
Wednesday, May 22, 2019PrintSubscribe
Removing Header Text from Views
The responsive user interface of apps created with Code On Time is intuitive.  Nevertheless the grids and forms do display generic text to provide basic user instructions.

This is an example of a grid view with the header text displayed above the data.

This is how the data form may look.

Each description can be changed individually in the Project Designer.

If you prefer a minimalist user interface then the descriptions may appear to be excessive. The unique architecture of apps created with Code On Time makes possible altering various aspects of an app with a just few lines of code.

For example, enable shared business rules in your app by selecting the corresponding option in Settings | Database Model & Business Logic | Shared Business Rules section of the project configuration. Re-generate the app. If you have existing custom "code" business rules, then open each rule and change the base class from BusinessRules to SharedBusinessRules.

Application framework will create an instance of SharedBusinessRules class or a custom version of it whenever a client request is processed through the server-side code. The framework retrieves the XML description of the corresponding data controller to handle the request.Then it provides the app with a chance to perform changes to the in-memory copy of the data controller. If the matching business rules class indicates that it supports data controller virtualization (customization at runtime), then the customization code is invoked. By default, no customization is performed. Developer can override virtualization code to make changes to the controller.

The header text definitions in views of data controllers are as shown in this sample:

Changed the file ~/app/App_Code/custom/Rules/SharedBusinessRules.cs as follows:

namespace MyCompany.Rules
    public partial class SharedBusinessRules : MyCompany.Data.BusinessRules

        public override bool SupportsVirtualization(string controllerName)
            return true;

        protected override void VirtualizeController(string controllerName)

Save the code file and observe that all views in the app are displayed without descriptions:

You can customize your data controllers selectively by inspecting the name of the data controller specified in the argument of VirtualizeController method.

Take you minimalist presentation even further by removing category descriptions in form views with this code.

protected override void VirtualizeController(string controllerName)

Your forms will now have an even more streamlined data-only presentation:

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 */ .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, May 11, 2018PrintSubscribe
Inline Editing and Native Client

Release is finally here and introduces many new amazing features! Your apps will run in a native mode with inline editing, multi-level master-detail data views, transactional data input, and more.

Inline Editing mode in a form of app based on Touch UI created with Code On Time app generator.

In the coming days we will post multiple video tutorials covering the new features available in your apps. Subscribe to our YouTube to say up-to-date at

Please make sure to watch the following tutorials right now:

  1. Controlling Inline Editing
  2. Multi-Level Master-Detail
  3. Wide Scrollbars
  4. Default Actions in Grid/List/Cards
  5. Transactional Data Input

Native Apps are discussed in these tutorials:

  1. Mobile Development with Code On Time
  2. Online and Mobile Preview
  3. Configuring Application for Cloud On Time.

Inline Editing

We are very excited to offer the first practical and universal implementation of inline editing in Touch UI. Inline Editing is the built-in feature available in apps created with Premium edition of Code On Time. It requires zero configuration and offers a high level of control when needed.

The feature is stable and ready for production use. We have a long list of various enhancements planned already. Many of them will be addressing some imperfections that we know about. 

Another minor release will go out in about a week and will introduce a performance enhancing feature called Optimistic Saving. This feature will be enabled by default in all apps. It will further enhance inline editing and change our approach to data saving via forms in general.

Native Client

The native client is here. We have started with two native clients for Windows 10 and Windows 7. Our app generator is a Windows-based product. We wanted to make sure that you can build native apps without requiring anything else on the development machine. In the next 45 days we will release support for iOS with Android and MacOS to follow.

Download the universal native client for Windows 7 and above at

Download the universal native client for Windows 10 at

Multi-Level Master Detail

Touch UI now supports multi-level master-detail relationships between data views in dashboards, full-screen, and modal forms. Data View fields can another such field in the data controller serve as the filter. Developers can configure relationships with any number of levels and complexity.

Multi-level master-detail form in an app based on Touch UI created wtih Code On Time app builder.

Data Pre-Fetching

Build a new app and try it in a web browser. You will notice that the data displays virtually instantly. Open the source of the page with CTRL+U and you will see that the data comes embedded in the page. This is a performance enhanching feature targeting web users of your apps. We are preparing a tutorial explaining how that works.

Transactional Data Input

Transactional data input is now available. The feature is disabled by default. Enter odp.enabled=true in ~/touch-settings.json and your will be able to enter data in transactional fashion if you add Data View fields in createForm1.

Note that inline editing is not yet compatible with ODP (Offline Data Processor). Some features of the server-side framework are also missing.

Release will go out in June of 2018 along with a new product called Offline Sync Add-On. The release will make ODP a standard feature enabled by default and will make possible to build apps that work in disconnected/offline mode without writing any code. The majority of the code has been completed. We are preparing the infrastructure to start selling Offline Sync.

New Folder Structure

New apps will have a new folder structure. Learn more at

Real Time with Code on Time

We are planning to start hosting live video sessions on our YouTube channel each Friday at 10:00 AM. The purpose is to provide a real time demonstration of various product features. Viewers will be able to submit questions ahead of time, watch the show live, or review the latest episodes at their own convenience. Each session will include answers to your questions, we will tell you about the new stuff we are working on. The primary purpose will be to demonstrate how to use our product with practical exercises.

Release Summary

This is a brief description of the features and bug fixes included in this release:

  • New field values changed with custom actions are displayed when user activates the invisible content with tabs. Previously the original row values were displayed instead.
  • Method $app.execute now supports argument property "background" to control if the UI is to be blocked. If set to true then a non-blocking background call is executed without any indication of progress.
  • Data views displaying data in grid are automatically synced when user returns to the previous pages and there were changes to the same data controllers prior to return.
  • Wide scrollbars are enabled if (1) ui.scrollbars.wide == true or (2) ui.scrollbars.wide == 'pointer' and the pointing device is not "touch".
  • Tags inline-editing, inline-editing-none, inline-editing-when-pointer, and inline-editing-option-none are controlling "Inline Editing" mode in the view.
  • Web.config now includes <authentication mode="None"> for apps with no membership.
  • Ensured js/_ignore.txt is copied to output directory in Web App Factory projects.
  • ListBox, CheckBoxList, RadioButtonList styling is matched to accents.
  • Fixed issue with agenda not selecting rows properly.
  • Fixed issue with incorrect page being displayed as selected in site menu.
  • Added support for "view-selector-none" tag to disable view selector on lookup fields.
  • URL Hashing replaces spaces with "+" when getting from URL to avoid exception.
  • Fixed Azure Publish re-authentication bug.
  • Dbl-click on modal title bar will toggle fullscreen mode of a form.
  • Added haxisformat and vaxisformat properties to allow formatting the axis values using the following options: none, decimal, scientific, percent, currency, short, long.
  • Publish now supports FTPS by using "ftps" in the URL.
  • Blob Handler now checks if user has acess to BLOB column and requested row before streaming to user.
  • Blob adapters are publicly accessible if no membership is enabled.
  • ApplicationServices.HandleError and ApplicationServices.HandleException is now overridable to allow for custom error logging.
  • If command Confirm with argument set to the name of the child dataview field is specified then field values are accessible in business rules of custom data controller as @Parameters_MasterFiel1, etc. It is now possible to implement custom search with stored procedures as explained at
  • SQL business rules support @[FieldName]_FilterValue1 and @[FieldName]_FilterValue2 for reading filter values.
  • New Advanced Search tags for data fields.
      - tag “search-sample-distinct” will force distinct samples
      - tag “search-sample-all” will force all samples
  • Field values with HtmlEncode = false and containing HTML content will not be trimmed.
  • Advanced Search displays "yes" and "no" options for Boolean fields.
Continue to Scrollbars