Help get this topic noticed by sharing it on Twitter, Facebook, or email.

Custom Templates + Form Designer coming in July 2016

Custom Templates
We are extending the new layout engine to provide custom html templates for list/cards items and a dedicated layout for grid rows. The templates are stored in ~/Views folder along with the form templates.

A template will provide a definition of the list item or card for "List" and "Cards" view styles.

"Grid" view style will not support templating of rows. Rows will always be a container for columns.

All view styles (List/Cards/Grid) will support the "drawer" template. The contents of the template will be revealed when user "expands" a data item. An equivalent of +/- icons will be displayed in grid row or card/list item if a drawer template is detected.

Main templates allow all fields with the exception of "DataView" fields.

"Drawer" templates allow any fields including DataView fields. Drawers are displayed within the boundaries of a grid row or list item. Drawer for a Cards item will be overlayed on top of other items.

Templates for Grid/Cards/List are just like forms with full support for editing. Drawers can be expanded on any data items/rows simultaneously.

The template name will determine its purpose:

* Products.editForm1.html - custom template for editForm1
* Products.grid1.list.html - custom template for the layout of an item in List style
* - custom template for the layout of an item in Cards style.
* Products.grid1.grid-drawer.html - custom template for a drawer template displayed when a grid row is expanded.
* Products.grid1.list-drawer.html - custom template for a drawer template.
* Products.grid1.drawer.html - a generic shared drawer for Grid/List/Cards view styles.

Each file can store multiple versions of the template for various display sizes when needed.

Auto-generated templates

The app generator does not create templates when the application is generated. Instead, the templates for forms are created at runtime. Further releases will create templates for other view styles on the fly.

Configuration of views/categories/data fields in Project Designer determines the layout of an automatically created template.

Master/Detail pages

Note that dataview fields placed in grid1 will show up in the "drawer" templates.

This enables a super simple implementation of master-detail pages with any number of levels.

For example, consider "Customers" controller with "Orders" field of "DataView" type. Drawer template will contain a grid of orders. Any order may have its own drawer with linked data view fields that are also expandable.

The drawer templates are providing a mechanism for hierarchies. For example, a list of employees may have a drawer template with a DataView field based on the same controller. Infinite expansion will be possible.

Multiple fields of DataView" type may also be connected in master-detail relationship similar to the current method of master-detail configuration in pages.

Form Designer

The new Form Designer will allow editing templates visually. The new layout engine has been introduced specifically to enable complex presentation reflecting real-world requirements.

A developer can start with an automatically generated template and have it customized to their taste or requirements.

Form Designer will become a part of release with likely availabitly in the last weeks of July 2016.


It is likely that there will be no need to define data views as dedicated nodes of pages. Presently one must create dataview nodes in a page to link data to it.

Instead, we will introduce in the pages a subset of properties currently defined in DataView nodes. The custom properties will be defined directly as attributes of the "body" element in the page. This will likely happen after release

Any page may have its own "bootstrap" style content and a collection of "dataview" properties on the "body" element.

If there are no "dataview" properties then the custom content is displayed.

If there are "dataview" properties and no custom content then page will behave very much like our current data pages.

If both "dataview" properties on the body and custom "bootstrap" content are detected then the page will present either its "content" face or its "data" face, which will be controlled by properties on the body element of the page. The content may serve as an introduction to the data or as a helpful background to the data (sort of help). User will be able to switch "to and fro"

This new kind of pages is the foundation of the customization wizards in customization and Model Builder of Code On Time app genereator.