Touch UI

Forms in Touch UI apps are laid out by HTML templates. When a form view is requested in the application framework, the ~/Views folder is queried for a template with file name of [Controller Name].[View Name].html. If the developer has placed a file matching that name in the Views folder, then the framework will read the file and pass it to the client library. The client will then use this template and inject data field inputs, labels, data views, and other controls into the template before rendering to the user. Otherwise, the client library will automatically build a template based on the definitions of categories and data fields.

The picture below shows the automatically built template for the default editForm1 view of Orders controller in the sample Northwind app.

The generated template can be seen below. 

<div data-container="collapsible" data-wrap="false" data-header-text="Orders">
    <div data-container="row">
        <div data-control="description">These are the fields of the orders record that can be edited.</div>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="CustomerID">CustomerID</span>
        <span data-control="field" data-field="CustomerID">[CustomerID]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="EmployeeID">EmployeeID</span>
        <span data-control="field" data-field="EmployeeID">[EmployeeID]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="OrderDate">OrderDate</span>
        <span data-control="field" data-field="OrderDate">[OrderDate]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="RequiredDate">RequiredDate</span>
        <span data-control="field" data-field="RequiredDate">[RequiredDate]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShippedDate">ShippedDate</span>
        <span data-control="field" data-field="ShippedDate">[ShippedDate]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipVia">ShipVia</span>
        <span data-control="field" data-field="ShipVia">[ShipVia]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="Freight">Freight</span>
        <span data-control="field" data-field="Freight">[Freight]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipName">ShipName</span>
        <span data-control="field" data-field="ShipName">[ShipName]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipAddress">ShipAddress</span>
        <span data-control="field" data-field="ShipAddress">[ShipAddress]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipCity">ShipCity</span>
        <span data-control="field" data-field="ShipCity">[ShipCity]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipRegion">ShipRegion</span>
        <span data-control="field" data-field="ShipRegion">[ShipRegion]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipPostalCode">ShipPostalCode</span>
        <span data-control="field" data-field="ShipPostalCode">[ShipPostalCode]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipCountry">ShipCountry</span>
        <span data-control="field" data-field="ShipCountry">[ShipCountry]</span>
    </div>
</div>

Each category is converted to a div element with attribute data-container set to “collapsible”. A header bar will be rendered, and a border at the bottom of the container. The value of attribute “data-header-text” will be rendered as the text in the header bar. The “data-wrap” attribute is set to “false” in order to allow the field label and value to render in two columns for sufficiently wide screens. Collapsible containers will take the full width if they are the only container in that row. Otherwise, a border and drop shadow will be rendered on the left and right sides. Collapsible containers are an easy way to group fields in an attractive way.

Inside the category, several data containers of type “row” are added. These containers take the full width of the outer container, and will render a border above in order to delineate rows.

Inside each row container, there are various span elements marked with different data-control attributes.

The first data-control element is marked as “description”, and contains the category description. This text will be rendered smaller and with a lighter color.

The next data-control element is marked as “label”, and has a data-field attribute with value defined as the name of a data field in the view. The text of the element will be replaced by the label defined for that data field. When the form is in edit mode, the color of the text will be grey, and clicking on this element will shift focus to the nearest field control with matching data-field.

The other data-control element used in this template is “field”. The content of this element will be replaced by the value of the field matched by the name specified in the data-field attribute. The text wrapped in square brackets provide for easy debugging if the field is not matched to a data field in the view. The text will be rendered as grey when the form is in read-only mode. When the form is switched to edit mode, the color will change to black and the user will be able to click on the element to start editing the field value.

Note that there is no limit to the number of times a data field can be used for a label or field control. The client library will automatically synchronize the values of these fields after a user makes changes to the field.

There are various other utility containers that offer different capabilities for laying out your fields.

Tabs

Tabs are a common user interface element used to group fields. See an example below.

Tabs can be created by defining a “tabset” container that contains a set of tabs. Within this container, several “tab” containers can be defined, each with a “data-tab-text” value that defines the label displayed on the tab. The template used to create the example can be seen below.

<div data-container="tabset">
    <div data-container="tab" data-tab-text="Order Info">
        <div data-container="collapsible" data-header-text="Order Info">
            <div data-container="row">
                <span data-control="label" data-field="CustomerID">CustomerID</span>
                <span data-control="field" data-field="CustomerID">[CustomerID]</span>
            </div>
            <div data-container="row">
                <span data-control="label" data-field="EmployeeID">EmployeeID</span>
                <span data-control="field" data-field="EmployeeID">[EmployeeID]</span>
            </div>
            <div data-container="row">
                <span data-control="label" data-field="OrderDate">OrderDate</span>
                <span data-control="field" data-field="OrderDate">[OrderDate]</span>
            </div>
            <div data-container="row">
                <span data-control="label" data-field="RequiredDate">RequiredDate</span>
                <span data-control="field" data-field="RequiredDate">[RequiredDate]</span>
            </div>
            <div data-container="row">
                <span data-control="label" data-field="ShippedDate">ShippedDate</span>
                <span data-control="field" data-field="ShippedDate">[ShippedDate]</span>
            </div>
            <div data-container="row">
                <span data-control="label" data-field="ShipVia">ShipVia</span>
                <span data-control="field" data-field="ShipVia">[ShipVia]</span>
            </div>
            <div data-container="row">
                <span data-control="label" data-field="Freight">Freight</span>
                <span data-control="field" data-field="Freight">[Freight]</span>
            </div>
        </div>
    </div>
    <div data-container="tab" data-tab-text="Shipping Info">
        <div data-container="collapsible" data-header-text="Shipping Info">
            <div data-container="row">
                <span data-control="label" data-field="ShipName">ShipName</span>
                <span data-control="field" data-field="ShipName">[ShipName]</span>
            </div>
            <div data-container="row">
                <span data-control="label" data-field="ShipAddress">ShipAddress</span>
                <span data-control="field" data-field="ShipAddress">[ShipAddress]</span>
            </div>
            <div data-container="row">
                <span data-control="label" data-field="ShipCity">ShipCity</span>
                <span data-control="field" data-field="ShipCity">[ShipCity]</span>
            </div>
            <div data-container="row">
                <span data-control="label" data-field="ShipRegion">ShipRegion</span>
                <span data-control="field" data-field="ShipRegion">[ShipRegion]</span>
            </div>
            <div data-container="row">
                <span data-control="label" data-field="ShipPostalCode">ShipPostalCode</span>
                <span data-control="field" data-field="ShipPostalCode">[ShipPostalCode]</span>
            </div>
            <div data-container="row">
                <span data-control="label" data-field="ShipCountry">ShipCountry</span>
                <span data-control="field" data-field="ShipCountry">[ShipCountry]</span>
            </div>
        </div>
    </div>
</div>

This template can be used by creating a file at “~/Views/Orders.editForm1.html” and replacing the contents with the above HTML template.

Columns

Data fields can be placed into multiple columns using the data-container=“column” attribute.

Each column container must have a width specified. See example of template below:

<div data-container="tabset">
    <div data-container="tab" data-tab-text="Order Info">
        <div data-container="collapsible" data-header-text="Order">
            <div data-container="column" style="width: 50%">
                <div data-container="row">
                    <span data-control="label" data-field="CustomerID">CustomerID</span>
                    <span data-control="field" data-field="CustomerID">[CustomerID]</span>
                </div>
                <div data-container="row">
                    <span data-control="label" data-field="EmployeeID">EmployeeID</span>
                    <span data-control="field" data-field="EmployeeID">[EmployeeID]</span>
                </div>
                <div data-container="row">
                    <span data-control="label" data-field="OrderDate">OrderDate</span>
                    <span data-control="field" data-field="OrderDate">[OrderDate]</span>
                </div>
            </div>
            <div data-container="column" style="width: 49%">
                <div data-container="row" data-wrap="false">
                    <span data-control="label" data-field="RequiredDate">RequiredDate</span>
                    <span data-control="field" data-field="RequiredDate">[RequiredDate]</span>
                </div>
                <div data-container="row">
                    <span data-control="label" data-field="ShippedDate">ShippedDate</span>
                    <span data-control="field" data-field="ShippedDate">[ShippedDate]</span>
                </div>
                <div data-container="row">
                    <span data-control="label" data-field="Freight">Freight</span>
                    <span data-control="field" data-field="Freight">[Freight]</span>
                </div>
            </div>
        </div>
    </div>
    <div data-container="tab" data-tab-text="Shipping Info">
        <div data-container="row">
            <span data-control="label" data-field="ShipVia">ShipVia</span>
            <span data-control="field" data-field="ShipVia">[ShipVia]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="ShipName">ShipName</span>
            <span data-control="field" data-field="ShipName">[ShipName]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="ShipAddress">ShipAddress</span>
            <span data-control="field" data-field="ShipAddress">[ShipAddress]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="ShipCity">ShipCity</span>
            <span data-control="field" data-field="ShipCity">[ShipCity]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="ShipRegion">ShipRegion</span>
            <span data-control="field" data-field="ShipRegion">[ShipRegion]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="ShipPostalCode">ShipPostalCode</span>
            <span data-control="field" data-field="ShipPostalCode">[ShipPostalCode]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="ShipCountry">ShipCountry</span>
            <span data-control="field" data-field="ShipCountry">[ShipCountry]</span>
        </div>
    </div>
</div>

Custom Content

One of the main reasons to define a custom template for your view would be to place custom content. The example below places several headers, images, and glyphicons among data field rows.

Containers with a type of “content” allow placing any content into them, without any special effects being added by the client library. Styles are applied on the proper elements in order to ensure the correct positioning of form elements.

<div data-container="content" data-wrap="true">
    <div data-container="column" style="width: 50%">
        <div data-container="content">
            <h2 style="padding-left: 12px"><span class="glyphicon glyphicon-cog"></span> General Information</h2>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="CustomerID">CustomerID</span>
            <span data-control="field" data-field="CustomerID">[CustomerID]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="EmployeeID">EmployeeID</span>
            <span data-control="field" data-field="EmployeeID">[EmployeeID]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="OrderDate">OrderDate</span>
            <span data-control="field" data-field="OrderDate">[OrderDate]</span>
        </div>
    </div>
    <div data-container="column" style="width: 49%">
        <div data-container="content">
            <h2 style="padding-left: 12px"><span class="glyphicon glyphicon-time"></span> Date Information</h2>
        </div>
        <div data-container="row" data-wrap="false">
            <span data-control="label" data-field="RequiredDate">RequiredDate</span>
            <span data-control="field" data-field="RequiredDate">[RequiredDate]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="ShippedDate">ShippedDate</span>
            <span data-control="field" data-field="ShippedDate">[ShippedDate]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="Freight">Freight</span>
            <span data-control="field" data-field="Freight">[Freight]</span>
        </div>
    </div>
</div>
<div data-container="content" style="padding: 0 1em 0.5em; text-align: center; height: 100px;">
    <img src="/touch/logo-color.png" style="vertical-align: bottom; padding-right: 6px" />
    <h1>These are my shipping fields.</h1>
</div>
<div data-container="content" data-wrap="false">
    <div data-container="row">
        <span data-control="label" data-field="ShipVia">ShipVia</span>
        <span data-control="field" data-field="ShipVia">[ShipVia]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipName">ShipName</span>
        <span data-control="field" data-field="ShipName">[ShipName]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipAddress">ShipAddress</span>
        <span data-control="field" data-field="ShipAddress">[ShipAddress]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipCity">ShipCity</span>
        <span data-control="field" data-field="ShipCity">[ShipCity]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipRegion">ShipRegion</span>
        <span data-control="field" data-field="ShipRegion">[ShipRegion]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipPostalCode">ShipPostalCode</span>
        <span data-control="field" data-field="ShipPostalCode">[ShipPostalCode]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipCountry">ShipCountry</span>
        <span data-control="field" data-field="ShipCountry">[ShipCountry]</span>
    </div>
</div>

Actions

Form templates also allow positioning actions defined in the controller onto the form.

Actions are defined in the HTML template by placing an element with attribute data-control of value “action”. Then, add an attribute “data-action” with value of “[Action Group ID]/[Action ID]”. The text of the element will be replaced by the action label.

<div data-container="content" data-wrap="true">
    <div data-container="column" style="width: 50%">
        <div data-container="content">
            <h2 style="padding-left: 12px"><span class="glyphicon glyphicon-cog"></span> General Information</h2>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="CustomerID">CustomerID</span>
            <span data-control="field" data-field="CustomerID">[CustomerID]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="EmployeeID">EmployeeID</span>
            <span data-control="field" data-field="EmployeeID">[EmployeeID]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="OrderDate">OrderDate</span>
            <span data-control="field" data-field="OrderDate">[OrderDate]</span>
        </div>
    </div>
    <div data-container="column" style="width: 49%">
        <div data-container="content">
            <h2 style="padding-left: 12px"><span class="glyphicon glyphicon-time"></span> Date Information</h2>
        </div>
        <div data-container="row" data-wrap="false">
            <span data-control="label" data-field="RequiredDate">RequiredDate</span>
            <span data-control="field" data-field="RequiredDate">[RequiredDate]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="ShippedDate">ShippedDate</span>
            <span data-control="field" data-field="ShippedDate">[ShippedDate]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="Freight">Freight</span>
            <span data-control="field" data-field="Freight">[Freight]</span>
        </div>
    </div>
</div>
<div data-container="content" style="padding: 0 1em 0.5em; height: 40px; text-align: center;">
    <h4 style="padding-bottom: 6px">Create a report of this record:</h4>
    <span data-control="action" data-action="ag7/a1" style="width: 25%; float: left">PDF</span>
    <span data-control="action" data-action="ag7/a2" style="width: 25%; float: left">Image</span>
    <span data-control="action" data-action="ag7/a3" style="width: 25%; float: left">Excel</span>
    <span data-control="action" data-action="ag7/a4" style="width: 25%; float: left">Word</span>
</div>
<div data-container="content" data-wrap="false">
    <div data-container="row">
        <span data-control="label" data-field="ShipVia">ShipVia</span>
        <span data-control="field" data-field="ShipVia">[ShipVia]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipName">ShipName</span>
        <span data-control="field" data-field="ShipName">[ShipName]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipAddress">ShipAddress</span>
        <span data-control="field" data-field="ShipAddress">[ShipAddress]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipCity">ShipCity</span>
        <span data-control="field" data-field="ShipCity">[ShipCity]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipRegion">ShipRegion</span>
        <span data-control="field" data-field="ShipRegion">[ShipRegion]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipPostalCode">ShipPostalCode</span>
        <span data-control="field" data-field="ShipPostalCode">[ShipPostalCode]</span>
    </div>
    <div data-container="row">
        <span data-control="label" data-field="ShipCountry">ShipCountry</span>
        <span data-control="field" data-field="ShipCountry">[ShipCountry]</span>
    </div>
</div>

Note that the action will always be visible in the form. If the action is not configured to be usable in the current form mode, it will render as greyed out. For example, see the screenshot below to see the actions greyed out when the user presses “Edit”.

Data View Fields

One powerful capability offered by form templates is the positioning of data view fields. The example below places a list of order details associated with the current order.

For the example below, make sure to add a new field to the Orders controller:

Save the new field. Then, drag the new field onto editForm1 of Orders controller to create a data field.

The template for the example can be seen below. The data view field is placed in the template as a data-control with value “dataview”.

<div data-container="column" style="width: 50%">
    <div data-container="collapsible" data-header-text="Order">
        <div data-container="row">
            <span data-control="label" data-field="CustomerID">CustomerID</span>
            <span data-control="field" data-field="CustomerID">[CustomerID]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="EmployeeID">EmployeeID</span>
            <span data-control="field" data-field="EmployeeID">[EmployeeID]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="OrderDate">OrderDate</span>
            <span data-control="field" data-field="OrderDate">[OrderDate]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="RequiredDate">RequiredDate</span>
            <span data-control="field" data-field="RequiredDate">[RequiredDate]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="ShippedDate">ShippedDate</span>
            <span data-control="field" data-field="ShippedDate">[ShippedDate]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="Freight">Freight</span>
            <span data-control="field" data-field="Freight">[Freight]</span>
        </div>
    </div>
</div>
<div data-container="column" style="width: 49%">
    <div style="padding-left: 1em">
        <div data-control="dataview" data-field="OrderDetails">[OrderDetails]</div>
    </div>
</div>
<div data-container="content" data-wrap="false">
    <div data-container="collapsible" data-header-text="More Info">
        <div data-container="row">
            <span data-control="label" data-field="ShipVia">ShipVia</span>
            <span data-control="field" data-field="ShipVia">[ShipVia]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="ShipName">ShipName</span>
            <span data-control="field" data-field="ShipName">[ShipName]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="ShipAddress">ShipAddress</span>
            <span data-control="field" data-field="ShipAddress">[ShipAddress]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="ShipCity">ShipCity</span>
            <span data-control="field" data-field="ShipCity">[ShipCity]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="ShipRegion">ShipRegion</span>
            <span data-control="field" data-field="ShipRegion">[ShipRegion]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="ShipPostalCode">ShipPostalCode</span>
            <span data-control="field" data-field="ShipPostalCode">[ShipPostalCode]</span>
        </div>
        <div data-container="row">
            <span data-control="label" data-field="ShipCountry">ShipCountry</span>
            <span data-control="field" data-field="ShipCountry">[ShipCountry]</span>
        </div>
    </div>
</div>

Yoga aficionados will testify that the world looks quite different if one masters the position known as a “Headstand”. The point of view changes, and interesting ideas will rush to one’s head when Up is Down and Down is Up. 

That is exactly what we have done with Code On Time application generator.  We have turned a few things upside down.

The fundamental principal of the product has been based on the premise that a foundation of a line-of-business  app can be automatically constructed by application generator from a selection of database entities and subsequently refined by a developer. Think of it this way – you buy a fully furnished apartment, move in, and start redecorating. But there is also a large group of people who will prefer to decorate their apartment from scratch.

The next release of application generator is introducing a new development workflow based on a new built-in tool called Model Builder. The purpose of this tool is to enable fast construction of line-of-business apps from scratch by building out a model, one database entity at a time.

New Development Workflow

Let’s consider how the process is changing when building a classical Northwind sample. First, a developer sets up a database connection for a project.

Next, a list of database entities is displayed on the Data Model & Business Logic page of the Project Wizard. This list includes database tables and views.

The developer selects a desired entity to be added to the project. The Model Builder window is displayed.

Application generator automatically constructs the data model for Products entity by linking in Suppliers and Categories tables and borrowing their identifying fields CompanyName and CategoryName.

Developer adds Country column from Suppliers table to the model to complement supplier information and selects Data tab to preview the output. Previously, application configuration has been performed on top of the baseline model constructed by application generator. It was relatively difficult to select tables joined in the table query. Model Builder enables direct and effective participation of the application developer in the construction of the baseline models. Model Builder allows visual configuration of virtual primary keys and foreign key relationships.

The developer can review the raw output of the model. They can also activate the “end user view” of data with labels instead of field names. Primary and foreign key fields are hidden and data format strings are applied to field values when “Raw Data” option is unselected.

The data model for Products is acceptable.  Developer saves the model and proceeds to generate the app.

An application with a new menu option Products is now displayed in a default web browser.

The process can be repeated multiple times until the model is refined to perfection. Display labels, field names, data format strings, sort order, and calculated fields can be defined directly in the model with inline editing and instant data preview. More than one model can be defined for each database entity.

Model Options

The “Options” tab of Model Builder provides a collection of quick configuration options for the model. The upcoming release will introduce a handful of options to enable quick selection of supported view styles, default view style, and a few more.

We will provide hundreds of quick configuration options to speed application construction with an open API that will enable 3rd party developers to create custom configuration wizards for private consumption and for commercial use in the follow-up releases.

Project Designer remains to be the primary tool when it comes to further project customization. Model Options will equip the baseline model with large chunks of pre-defined functionality, which may reduce and sometimes eliminate the need to use the Project Designer.

Model Query

The live preview of data is based on the query constructed from the visual model of an application entity.

Sample Data Models

This is the model of OrderDetails entity of the Northwind sample.

Mouse over a table to see direct connections highlighted with the primary database table/view of the model.

This is the model of JobHistory entity in HR, a sample database well known to Oracle developers.

User Interface Changes

All fields of the entity model are included in grid1, editForm1, and createForm1. Data Sheet view style with horizontal scrolling of columns is introduced in Touch UI for that reason. We expect this view style to be included in the “Model Builder” release 8.5.6.0.

The pages are not configured as master-detail by default. The developers will have the option to set unlimited levels of master-detail relationships manually, which is available in the current version of Code On Time.

We are also introducing a brand new data field type called “DataView”. Any entity can have a collection of DataView fields defined in its options or in Project Designer. A relationship between the data model of a DataView field and its owner must be configured. Grid, Data Sheet, and List view styles will support expanding and collapsing of rows to show linked data, which will enable creating unlimited levels of table-in-a-table presentation.

The form views will also support “data view” fields and display linked child rows within the form boundaries in both Desktop and Touch UI. The form views will support the flow of categories creating new columns and new rows.

The new field type will be recommended as a primary method of configuring master-detail relationships. It uses exactly the same master-detail features that were a part of apps created with Code On Time from its inception. A little bit of JavaScript magic is the only ingredient that will significantly enhance presentation. 

Tight coupling of master-detail relationships expressed as “DataView” fields will also make the following possible:

• Efficient offline data caching and persistence with easy configuration
• Hierarchical presentation of data with unlimited depth
• New data access objects with child records
• Drag & drop linking of child data rows with master rows by end users

Legacy Development Workflow

If you do plan to try the “Headstand”  Yoga position, then you better make sure that you are not going to break anything! Applications created with previous releases will not be affected. Model Builder will be available in Project Wizard but its use will not be required.  Model Builder is an optional tool in the legacy projects.

Only the new projects will require explicit definition of models for database entities. We are confident that if you try the new development workflow then you will love it! A simple switch in the project configuration file will make it possible to have the legacy development workflow activated for any new project should you feel an instant dislike of visual data modeling.

Inline editing capabilities make it very easy to assign custom field names, labels, and display format strings in Model Builder. This feature is intended to replace the need for Tools for Excel.

Why?

Why are we making these changes given the extensive roadmap for 2015/2016?

The two primary goals in the near future for Code On Time is to support offline mode of operation for generated apps and to provide a completely online development environment called http://cloudontime.com.  We have found it to be difficult to implement master-detail offline editing with the current page-based relationships between data views. It also difficult to build an online database app without seeing the data model as a diagram. New “DataView” field type addresses the offline editing issues with unlimited depth of master-detail levels.Visual Model Builder is a tool based on HTML5. It is actually taken from Cloud On Time code base. This will ensure to seamless transitions from online to desktop development.

We are also experiencing a significant level of interest from former IronSpeed developers who are used to the “page generation” concept based on numerous configuration options instead of a more holistic approach exercised by Code On Time. Model Builder and model configuration options are introduced to appeal to broader group of developers while simultaneously increasing value for the existing customers.

Availability

The next release will have the version number 8.5.6.0 and is expected to go out by the end of November 2015 or in the early December 2015. Full support for Visual Studio 2015 and latest Azure SDK  will be included.

Buy Code On Time application generator now and be ready for tremendous productivity improvements when a prompt to install the next release is displayed!

Open a support ticket to request a presentation and see the new features in action!