Web Form Builder

Blog
Web Form Builder
Friday, February 3, 2017PrintSubscribe
Custom Logo and Theme

Universal Business Apps (UBA) created with Code On Time are designed to run on desktop and mobile devices.  UBAs may be packaged as native applications and also work in the web browser in online and offline modes. Each app store dictates certain user interface requirements. The new theme framework of Touch UI 2017 makes it easy to fulfill them.

Native applications are distributed through app stores of the operating system verndors. These app stores have a common requirement not to place your logo directly in the user interface, making it visible at all times. The focus must be on application functionality rather than on company branding.

At the same time, it is important to keep the user aware of your brand. Touch UI makes this easy.

Consider the following logo of a fictitious company:

image

Let’s incorporate this logo into an application created with Code On Time or Cloud On Time.

Creating a Theme Accent

The default theme of the application is Light with Aquarium accent.

image

We will choose Social accent as a basis for the customization.

image

Create a copy of the file ~/touch/touch-accent.social.json and name it touch-accent.acme.json. Open the new file in your favorite text editor.

image

Change the “name” to “Acme”. Find and replace the color #3b5999 with #006940 everywhere in the file. Change header.icon.default from #eee to #ee3a43.  Also change the value of properties button.promo.icon.default and buttons.menu.icon.default to #ee3a43.

Both #006940 and #ee3a43 represent the codes of the main colors used in the log. You can use the standard CSS color names, such as “green” and “red”.

Save the file, switch back to your application, proceed to Themes section under Settings, and select the new theme “Acme”.

image

The application colors will change to match the branding of our fictitious company. It only took a few minutes to give your app a branded look-and-feel.

image

image

image

image    image

Changing Application Name

The name of the app needs to be changed as well. By default, the name will be derived from the page header text specified in the project settings. If the project’s settings for the header is blank, then the name will read as “Code on Time” or “Cloud On Time”.

image

There is configuration file in the root of your project, called ~/touch-settings.json. It controls the application behavior and appearance. Open the file and specify appName property to provide a name for the app.

image

Do not use the brand name there. Instead specify the name that reflects the purpose of the app. Let’s use Inventory Manager for this example. Save the file and refresh the page. The new app name will be visible in the top left corner of the toolbar.

image

Explicit Branding

The best place to display your branding is the Splash Screen and Account Manager.

The splash screen is displayed briefly when the user starts the app.

image

The picture on the left side of the screen and the application name can be replaced with alternative images.

Add a new configuration element splash to the file ~/touch-settings.json, as shown in the screenshot below.

image

Properties logo and background must reference the high-resolution images for the branding of your app. You will need to keep the balance between the quality of the images and their size.

The duration property controls the duration that the splash screen is displayed to users in milliseconds.

Restart the app and see the splash screen displayed.

image

Your branding is also displayed when the user is automatically logged into the app, or when account manager is activated.

image

Disabling Themes in Settings

If you do not wish the theme and accent to be changed by the application users, then add settings section to the ~/touch-settings.json with theme option disabled.

image

Additional settings options can be disabled as needed. The property settings.disabled will prevent the user from modifying any settings.

image

Further Customization

If your projects requirements call for a prominient display of branding, then you can add a logo to the application toolbar with the help of CSS. Create a file under ~/touch folder with the following rule:

image

This result of customization is shown next.

image

image

Wednesday, February 1, 2017PrintSubscribe
New Theme Engine in Touch UI 2017

A new theme engine in Touch UI is included with the release 8.5.12.0. The brand new themes provide a modern look-and-feel for your line-of-business universal apps. Designed to work with both Desktop and Mobile devices, Touch UI offers a universal solution to application developers. Your end users can point with a mouse or a stylus and click or touch the responsive user interface elements.

The user inteface is customized with themes and accents. A theme provides the main color scheme. An accent provides additional color adjustments. The themes are CSS-based. The new release will ship with a single Light theme.  Additonal core schemes are expected to become available in the future. Accents are JSON files describing particular colors and other properties that will customize the theme. Release 8.5.12.0. ships with 35 accents. Developers can make a copy of any existing *.json accent under ~/touch folder and replace the colors with those that are matching the application requirements. Developers can standardize on a particular theme and accent for their app by deleting the standard themes and accents that are not needed.  The upcoming CoT v9 will also include an interactive theme builder that will allow producing custom accents within the live app.

The screenshots of the new Light theme with Citrus accent are below.

image

image

image

image

image

This is the new Azure accent for the Light theme:

image

The new Grapello accent in Light theme in the screenshot showing a modal form:

image

The new Plastic accent demonstrates interactive filtering in Light theme:

image

The new Berry accent demonstrates the view selector in Light theme:

image

This is the Light theme with Dark Knight accent on a small screen:

image

The user interface theme is constructed at runtime by applying properties defined in the JSON configuration of the accent to the chosen color scheme of the theme.

This is the actual configuration file for the Citrus theme.  You can create a new accent by making a copy of an existing one and replacing it’s colors.

JSON:

{
  "name": "Citrus",
  "color": "#FFA500",
  "header": {
    "background": "orange",
    "backgroundTransparent": "transparent",
    "border": "#FFA500",
    "paddingTop": 0,
    "icon": {
      "default": "#000",
      "hover": null,
      "selected": null,
      "backgroundOpacity": null
    },
    "text": {
      "default": "#000",
      "hover": null,
      "logo": null,
      "hoverBackground": "rgba(0,0,0,0.05)",
      "selectedBackground": "rgba(0,0,0,0.08)"
    },
    "split": {
      "background": null,
      "icon": { "default": null }
    }
  },
  "panel": {
    "icon": {
      "default": "#0a6332",
      "hover": "#003D00",
      "selected": null
    }
  },
  "buttons": {
    "promo": {
      "background": "#FFA500",
      "icon": {
        "default": "#000"
      },
      "menu": {
        "icon": {
          "default": null,
          "hover": null
        }
      }
    }
  },
  "sidebar": {
    "full": {
      "background": "#0a6332",
      "border": "#0a6332",
      "selectedColor": "#fff",
      "text": {
        "default": "#eee",
        "hover": "#fff",
        "active": null,
        "static": "#80ba99"
      },
      "icon": {
        "default": "#fff",
        "hover": "#FFA500",
        "active": null
      },
      "toolbar": {
        "background": "#0a6332",
        "border": "#0a6332",
        "selectedColor": "#fff",
        "icon": {
          "default": "#fff",
          "hover": "#FFA500",
          "active": null
        }
      }
    },
    "mini": {
      "background": "#0a6332",
      "border": "#0a6332",
      "selectedColor": "#fff",
      "icon": {
        "default": "#fff",
        "hover": "#FFA500",
        "active": null
      },
      "toolbar": {
        "background": "#0a6332",
        "border": "#0a6332",
        "selectedColor": "#fff",
        "icon": {
          "default": "#fff",
          "hover": "#FFA500",
          "active": null
        }
      }
    }
  }
}

 

The user interface elements and behavior are customized via the new ~/touch-settings.json configuration file in apps created with Code on Time 8.5.12.0.

JSON:

{
  "defaultUI": "TouchUI",
  "appName": "Inventory Manager",
  "map": {
    "apiKey": null
  },
  "charts": {
    "maxPivotRowCount": 100
  },
  "ui": {
    "theme": {
      "name": "Light",
      "accent": "Aquarium",
      "preview": null
    },
    "displayDensity": {
      "mobile": "Auto",
      "desktop": "Condensed"
    },
    "list": {
      "labels": {
        "display": "DisplayedBelow"
      },
      "initialMode": "SeeAll"
    },
    "menu": {
      "location": "toolbar",
      "tiles": null
    },
    "actions": {
      "promote": true
    },
    "transitions": {
      "style": "slide"
    },
    "sidebar": {
      "when": "Landscape",
      "mini": true,
      "apps": true,
      "toolbar": true,
      "icons": true
    },
    "toolbar": {
      "apps": true
    },
    "apps": {
      "location": "toolbar"
    },
    "showSystemButtons": null,
    "smartDates": true
  },
  "settings": {
    "enabled": true,
    "options": {
      "displayDensity": true,
      "theme": true,
      "transitions": true,
      "sidebar": true,
      "labelsInList": true,
      "showSystemButtons": true,
      "promoteActions": true,
      "smartDates": true,
      "initialListMode": true
    }
  },
  "membership": {
    "enabled": null,
    "profile": "view switch login logout",
    "help": true,
    "accountManager": {
      "enabled": true
    }
  },
  "help": true
}

Wednesday, August 17, 2016PrintSubscribe
Batch Edit, Surveys, Universal Input, Date Processing.

Please take a look at the Roadmap for 2016/ 2017. It covers the next six months of the development cycle.

Numerous new features and bug fixes are included in the release 8.5.10.0.

Batch Edit

This release re-introduces Batch Edit capability in both Desktop UI and Touch UI applications. If multiple selection is enabled and two or more rows are selected then Batch Edit command becomes availabe in the context menu of data rows.

image

Select the menu option and a standard form will display a list of fields.

image

Specify the field values and choose Update Selection to update the selected data rows. A similar dialog is displayed in Desktop UI.

For the feature to work, you must enable Multi-Selection. Also specify an action with the command name set to “BatchEdit” in the group with the “Row” context. If there is no argument then the “grid1” will become the source of fields. If  you have a form with a large number of fields then specify the form view ID in the action argument. For example, try editForm1.

You can also enable Batch Edit everywhere if you set the corresponding option in the Grid Properties of Features section in your project settings. Make sure to refresh the project and the Batch Edit action will be added to all data controllers.

Surveys

The dynamically created Batch Edit form is implemented as a data controller produced on demand with the help of the new technology called Survey Controller.  We will post a tutorial explaining how to work with the survery controllers. See the rodmap for more details.

In the future releases, we will utilize survey controllers to re-implement several features in the Touch UI:

  • Advanced Search
  • Field-Level Search
  • Import
  • Standard Calendar Event Dialog

Survey controllers can be used as replacements for “confirmation” data controllers. Here is an example of a confirmation survey controller that allows selecting Customer, Order, and Order Detail.

image

All questions asked in the survey are accessible to the server-side business rules with the “Parameters_” prefix.

This is the defintion of the controller stored in ~/scripts/surveys/ThreeLevelMD.js file:

image

The survery will be loaded and displayed for any action if you specify the following in the Confimation property of the action.

_survery=ThreeLevelMD

 

You will be suprised to learn that the new “survey” controller is essentially a repackaged version of XML data controllers. The difference is only in the language used to define it.

Code On Time v9 will introduce the visual designer that will enable drag & drop development of traditional and “survery” data controllers.

The roadmap provides some additonal insights into our wide-ranging plans for the surveys.

Universal Input

Countless enhanements are made to Touch UI.  Continue reading to learn more about individual capabilities and bug fixes.

We would like to highlight the ability to create new items directly from with the list inputs with the style of items set as List Box, Radio Button List, and Check Box List. The option is shown as the last item of Category Name in the screenshot.

image

Note that the lookups with Drop Down List style have a distinctive icon as shown in Discontinued field. Users can select items with Up and Down keys, via auto-complete, or via direct selection of options from the menu.

All inputs now provide excellent support for keyboard data entry and navigation.

Make sure to clear New Data View property of lookup fields with these presentation styles if you do not want your users to create new items.

Retired Project Types

We have retired Azure Factory and Mobile Factory projects. Microsoft considers Cloud Service apps to be in the legacy category. We recommend creating standard Web App Factory projects instead.

Mobile Factory projects are effectively Web Site Factory projects minus the ability to display Desktop UI. We have removed this project type from the menu of new projects.

Any existing projects of the retired types will still work. We recommend considering a conversion to the remaining project types.

Date Time Processing

We have completely re-designed handling of dates to eliminate any issued with the time zones.

Features and Enhancements

The list of features and enhancements introduced in relese 8.5.10.0 is presented below.

  • Visible When for data fields and categories is now fully supported in Touch UI. We have a brand new implementation designed specifically for the Universal Input controls.
  • Read Only When for data fields is now fully supported in Touch UI.
  • BLOB utility fields are correctly captured in Touch UI.
  • GEO utility fields are correctly captured in Touch UI.
  • Collapsible categories are now collapsing in Touch UI in response to user actions and when configured in Project Designer.
  • Touch UI now supports Causes Calculate with Universal Input.
  • Touch UI now supports cascading lookups with Universal Input.
  • JavaScript business rules do not trigger recursive Calculate in Touch UI.
  • JavaScript business rules of confirmation controllers can refernce the current row data fields as $current.FieldName.
  • Tab selection remains when user switches between read and write mode in a form in Touch UI.
  • Llong text fields and many-to-many fields have a 40 column minimum width in grid in Touch UI.
  • Ttooltip remains next to the input field when the page has been scrolled to set the focus in Touch UI.
    Touch UI correctly handles "_blank:" prefix in Hyperlink Format String property of data fields.
  • Method RefreshChildren works correctly in Touch UI and modal forms of Desktop UI.
  • Sidebar calendar remains inactive until it becomes visible.
  • Multi-selection mode does not reset selected row when activated more than once.
  • Fixed JavaScript business rule compilation issues related to field references.
  • Automatic configuration of "Copy" property now ensures fields are copied, even when lookup contains self-referring FK.
  • Model Builder no longer creates lookups if the field is borrowed from a different table.
  • Capture of exception on Windows 10 Build 1607.
  • Removed dependency on MSXML6.dll fromt he app generator.
  • User theme is now stored in cookie.
  • Touch UI themes are now served individually based on browser cookie.
  • ApplicationServices.UserTheme property added.
  • Web App Factory contains proper DLLs for ReportViewer.
  • DataView fields are hidden in grid1 and createForm1 at rutnime.
  • Added 'calendar-drag-disabled' tag to disable dragging in Calendar view.
  • Added "Normalize Model Names" checkbox to allow disabling removal of underscores and other non-word characters.
  • Fixed issue with "Edit Rule" in Visual Studio not looking in correct folder.
  • Touch UI  enables Google Maps for localhost only. Any production deployments now require a Google API key due to the policy changes by Google Inc.