Suppose that a chart is made for the Orders page in the sample Northwind app. This chart will show the count of orders made by each customer, sorted in descending order. The tag configuration is listed below.

The result of the tag can be seen in the screenshot.

The data for the chart can be seen below.

With such a large number of rows, it becomes difficult to read the row values. In order to fix this problem, restrict the number of rows by using the “topX” keyword, with the X value being equal to the max number of rows displayed.

The new chart now displays the column for only 5 customers.

The data reveals that only 5 rows are present.

However, it may be desirable to group the rest of the values into a single “Other” column, in order to show the relative size of the top 5 compared to the rest of the data. This can be done with the “other” keyword in combination with “topX” keyword.

The chart showing the “Other” column is displayed below.

The data reveals the sixth row combines the values of the hidden rows.

Lookup data fields in forms will automatically show a lookup details arrow button to the far right of the field. The screenshot below shows the lookup details arrow for the Customer Company Name field of the Orders controller in the sample Northwind web app.

Clicking the arrow will allow the user to directly access the lookup record.

Sometimes, it may be necessary to prevent the user from accessing the lookup record.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab and double click on Orders / Views / editForm1 / CustomerID data field node.

Append the following tag to the Tags property.

Press OK to save the data field. On the toolbar, press Browse to regenerate the app.

When the app opens in the browser, navigate to the Orders page and select a record. Note that the lookup details arrow next to the Customer Company Name field is now hidden.

Code On Time release 8.5.2.0 significantly improves the speed of loading of complex master-detail pages in Desktop UI and introduces new user interface options in Touch UI. Both presentation modes can now take advantage of more than 250 icons  from Bootstrap library  integrated in the generated apps. Meta-data compression reduces the size of JSON responses for requests to read data by more than 60%.

Master-Detail Pages in Desktop UI

Desktop applications with complex master-detail pages will see immediate increase in speed of initial page loading and refreshing of selected master rows and linked children. We have recently discovered that a large number of data views may lead to degradation of page rendering. One customer has close to 40 data views connected in various master-detail configurations on a single page. Application essentially uses data views to create an electronic data record giving a comprehensive understanding of a business process at a glance. Application has been created two years ago and has performed very well. Recent modifications have uncovered that the same page is rather slow when produced with newer releases of Code On Time. We have corrected the issue – the page with 40 data views loads fluidly and rapidly.

Touch UI Enhancements

This release brings the action bar to Touch UI. Compare the screenshots of Products screen presented in two different interfaces.

User interface components of Touch UI look almost identical to the Desktop presentation. If the promoted actions are turned “off” in settings then the floating “+” button will disappear and New Products action will migrate back to the action bar.

Summary views now display “See All” button with the count of records when only a subset of records is visible. Summary views also keep track of the current selection.

Also note that the page title is not displayed anymore on the toolbar if there is enough space to display at least three menu options. The title will reappear in the toolbar on devices with narrows screens. The navigation menu migrates under “menu” button on the left-hand side of application toolbar.

We are committed to transforming Touch UI in a true replacement for the legacy Desktop user interface of generated apps. Future releases will allow displaying all levels of master-detail relationships on the pages in Summary mode. This release finally introduces complete support for cascading lookups in Touch UI. We now support dynamic lookups for Drop Down List, List Box, Radio Button List, and Check Box List with full processing of Context Fields.

Icons in Actions

It is now possible to use glyphicons from Bootstrap library as icons of actions in Desktop and Touch user interface. Touch UI also supports a dedicated set of icons from jQuery Mobile. See sample icons at http://demo.codeontime.com/northwind/touch/icons.html.  Follow the link to see configuration instructions. The screenshot below shows a custom glyphicon-leaf icon in configuration of New Products action.

Miscellaneous Enhancements

Here is the list of fixes included in this release:

• Annotations are disabled in Touch UI. Multiple file upload will be implemented in the future instead of "one note" + "one file" at a time in Desktop UI.
   
• New drag & drop file upload works with annotations in Desktop UI.
   
• Desktop UI shows summary on first selection of a master row when a child view with "Show In Summary" = true is placed on a different tab.
   
• Touch UI supports creating new lookup values with context filter based on the current field values.
   
• Cascading lookup works with Drop Down List, Radio Button List, Check Box List, and List Box.
   
• Dedicated login page issue on iPad has been resolved in Touch UI.
   
• Pivot API: Quarter calculation fixed.
   
• Minifier now adds ";" to every script file as a fix for DNN script compression.
   
• Fixed transparency issues on iOS and made enhancements to the keyboard input on android.
   
• Charts: Added ICU Decimal Format support with "pivot1-val1-format:'##'" tags. Supported .NET-compatible formats are “c”, “C”, “d”, “D”, “e”, “E”, “f”, “F”, “n”, “N”, “p”, “P”, “x”, “X”.  Example of Orders chart:

EmployeeID Tag: pivot1-row1-column

Freight Tag: pivot1-val1-sum-format:'c' 

• It is now possible to use $row.FieldName and $master.FieldName syntax in business rules and various expressions instead of old syntax ([FieldName] and [master.FieldName]).
   
• Dates are correctly processed in JavaScript business rules in Touch UI.
   
• Enhanced error reporting when compiling JavaScript business rules.
   
• Data access objects correctly convert dates to Universal Time when using PageRequest to retrieve data.
   
• MySQL will hide string primary key fields of length 36 (GUID).
  
• Bug with "Remember Me Checked" in HTML page implementation has been fixed.
  
• MySQL Session State Provider will use mediumblob instead of longblob.
   
• Embedded ASP.NET membership provider for Oracle is now generated if membership feature is enabled.
   
• Membership business rules correctly handle representation of GUIDs and "bool" in Oracle databases.
   
• Synchronization command wraps primary key field names in "quotes" specific to the database engine.
   
• Membership bar extender uses "_invoke" as a path for service requests in SPA applications.
   
• Adding a GUID parameter to an SqlText or SqlProcedure will perform automatic conversion from Guid to byte[].
   
• Partial implementation of ApplicationServices class allows overriding of UserSessionStart, UserSessionEnd, InstanceStart, InstanceStop, and HandleError methods to handle session-level and application-level events. Delete ~/global.asax file to ensure that the new code is being engaged if you plan to use any of these methods.
   
• Custom Session State provider is now generated in Azure Factory, Mobile Factory, Web App Factory, and Web Site Factory projects if installed on database connection settings page of Project Wizard. Use session state provider if application is deployed in  multi-server configuration.
   
• It is now possible to have a "root" page when CMS is enabled. Give it a name “index” with blank path.
  
•  Dynamic Controller Customization in CMS now supports When-SQL and When-Test to allow data-driven customization of controllers
   
• Application framework now support VirtualControllerConditionally method. Developers can call SelectFieldValue method to inspect values of the current row when virtualizing form views.
   
• Added data view tags view-style-charts-disabled, view-style-grid-disabled, view-style-list-disabled, view-style-cards-disabled, and view-style-map-disabled to allow disablement of specific view styles.
   
• Fixed bug in Firefox and IE10 of chart context menu not opening.
  
• Data views can now be configures with the property "Tags" and "data-tags" instead of Tag and "data-tag".
   
• Site content is not visible if Role or User exceptions are detected. Previously, both "Role Exceptions" and "User Exceptions" would have enabled access to content instead.
   
• If a site content page exists in CMS and it is visible to the user then it will override the "design time" page definition. Previous implementation has been using the application-defined page even if a site content page is available.
  

Code On Time release 8.5.3.0 resolves several issues introduced in the previous update.

• Fixed exceptions raised by custom confirmation controllers in Touch UI.
• Fixed the issue with an exception raised if “Read Only When" and "Visible When" expressions are defined in a data field or category.
• SPA applications disable script localization to prevent incorrect "combined" script name in apps created with Unlimited edition.
• SPA applications are created with correct localizations based on aspx/ascx library resources when  "html" user controls and pages are generated.
  
  

Line-of-business applications are about collecting and processing data. Content Management Systems are about publishing, editing, and modifying content. The former is typically designed to implement a very specific business process, while the latter can be used to create information for public consumption after implementation and deployment.

Why would you put these two together in the same database?

Some developers modestly believe themselves to be design-challenged and will not start a new project without picking up their favorite content management system (CMS). It gives them an edge when it comes to a great looking menu and page layouts. Application data will look so much better in a great surrounding.

Others will admit the allure of having an integrated content repository, but will flatly refuse to put a “monster” next to their precious data. A typical CMS will come with copious configuration tables and will have its own user management system. One can come up with a decent graphical interface design by putting faith in the web frameworks abundantly available on Internet. Sure it is nice to have a built-in blog, but the overhead of a CMS is too high.

The Sweet Spot

A perfect content management system for a line-of-business application must have the following characteristics:

• Ability to store software customizations in the database to simplify application configuration and maintenance after deployment.
• Integration with the user management system of application.
• Ability to store multi-media content generated by end users (images, posts, tutorials, etc.)
• Ability to turn application into a marketing,  educational , and support center for the end users.
• Compact size.
• Extensibility.

Integrated content management system of applications created with Code On Time is an optional feature that has all of the above characteristics.

End users can store images and other  user-generated content directly in application database. Application administrators can customize data pages, menu options, data controllers, access control lists, and configure workflows for end users. Availability schedules can be associated directly with the workflow register entries or content objects stored in the CMS to provide enhanced access control.

Next you will learn to configure an integrated CMS for your app and practical ways of using it.

Configuration

Content management system can be integrated into an app created with Code On Time either at the start of a  project or later when needed. It can also be taken out at any moment.

The only requirement is to have Page Implementation model of the application to be set to Single Page Apps in the section of the project settings called Namespace, Framework and UI.

Database configuration required for CMS can be done either manually or with the help of the options available in the database connection string settings. Click the button […] located next to Connection String input.

Specify the database connection parameters if you have not done so already.

Add support for users and roles to the project by clicking Add button under Membership section. If you have Unlimited edition and using Active Directory or have a custom membership provider then do not add Membership feature to the database – your chosen security system will do the job.

Click Add button in Content Management System (CMS) section to configure CMS support in the project database.

A confirmation window will be displayed.

If you are creating a new project then select the SiteContent table along with the database tables that are needed for your application.

Developers evaluating the free version of the app generator may consider creating a project based on the Northwind sample and have tables Categories, Employees, Products, SiteContent, and Suppliers included in the project.

If you are adding CMS to an existing project then make sure to refresh the project metadata. This will incorporate the database table SiteContent in the application design.

Note that the name of the core CMS table for the database engines other than Microsoft SQL Server may be SITE_CONTENT or site_content.

Save Connection String settings and proceed to the next step.

Developers working with Premium or Unlimited edition shall activate Shared Business Rules in the Business Logic Layer section of the project.

This will enable two powerful features of the application framework called Dynamic Access Control List and Dynamic Controller Customization. Both features work together with CMS to enable runtime customization of application behavior that does not require re-deployment of the app.

Finish the remaining project configuration steps and generate your application.

Sign in as administrator using account admin/admin123%.

Menu option Site Content will be displayed next to Membership.

This is the sample project with an integrated CMS rendered with Touch user interface.

Here is the same project rendered with Desktop user interface.

Trying It Out

Let’s put the integrated content management system through its paces. We will create a multi-media content, define a few new pages, configure new menu items, upload a customized data controller, and play with data controller customization and data access control list.

Multi-Media Content

Navigate to Site Content and start creating a new content object. Click or tap on the drop box in the Data field to select an image. Specify a “pretty” location of your choosing in the image Path.

`

The image will be stored in the database when OK button is pressed.

Direct your web browser to the image URL, which must be entered as a combination of the website address,  Path,and image File Name.

If a BLOB adapter is configured for SiteContent data controller then the image will be stored in the file system, Windows Azure Storage, or Amazon S3. BLOB adapters enable storing the binary content outside of the application database.

Static Pages

Now let’s create another content object with the following properties:

<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body data-authorize-roles="?">
    <div data-app-role="page" data-content-framework="bootstrap">
        <div class="container">
            <h1>Hello World!</h1>
        </div>
    </div>
</body>
</html>

This object defines an HTML page compatible with the application. The page is treated as a “content” page configured to use Bootstrap content framework. The title of the page is “Welcome”. All end users are authorized to access the page content thanks to the “?” in data-authorize-roles attribute. Attribute data-app-role will ensure that the content will be displayed in both Desktop and Touch user interface. The page is available at ~/public/welcome location.

Navigate to the page URL and observe the content rendered in a browser.

Touch UI version of the page is shown next.

Desktop UI will render the page in a virtually identical fashion.

Data Pages

Now let’s  change the behavior of our application for some of its users. Here is a product category selected in an app rendered with Touch UI.

We will  prevent users other than administrators from being able to see products linked to the categories on the page ~/pages/categories.

Create another HTML page in the site content database with the following properties.

<!DOCTYPE html>
<html>
  <head>
    <title>Categories (Customized)</title>
    <meta name="description" 
content="This page allows categories management." />
  </head>
  <body data-authorize-roles="*"data-theme="Petal">
    <div data-flow="row">
      <div id="view1" data-controller="Categories" data-view="grid1" 
           data-tags="view-style-cards"
           data-show-in-summary="true"> </div>
    </div>
  </body>
</html>

Page property Path will override the built-in application page available at the same location in the generated app. All authenticated users are authorized to see this page. The page is configured to display in Petal theme. Data controller Categories is configured to display its views in the div element view1. Data items will be rendered with multiple columns. Users will see the new definition of page instead of the one specified in application design. The exception is made only for the users that have Administrators role assigned to them.

Let’s have a look.

If a user is logged in as an administrator then the page is displayed as designed.

All other users will see the page differently. The page is displayed in Petal theme and categories are presented in the view style Cards, which forces two or three columns of items displayed if possible.

Products are not visible if a category is selected by a non-administrator.

Tying It Together With a Menu

If a new content is created then there must be a way for application end users to access the content without typing a URL in the address bar of a browser. Only one content object out of the three that we have created is available through the application navigation system. Data page ~/pages/categories is a part of the application design and therefore its customized version stored in CMS will seamlessly integrate in the navigation menu.

Navigate to the Site Content manager and create a new content item with these properties:

This content item defines a sitemap that will merge with the navigation menu of application. Two new items will be added under Home option if it exists. If the top-level option Home is not available to the end user then a new option will be added to the right of last top-level item displayed on application toolbar.

Refresh the page loaded in the browsers. Immediately you will notice additional menu options inthe menu item Home.

Try creating another content item with the file name “main” to replace the entire application menu. Assign specific roles and users to the main sitemap content item to limit the impact of the menu replacement to a specific group of end users.

This illustration shows the app when the sitemap defined above is renamed to main. Note that if a page is not available in the menu then it will still be available when its address is typed in the address bar of the browser. Use attribute data-authorize-roles specified in the body element of the page to limit access to a page stored in CMS.

Custom Data Controller

Data page ~/pages/categories stored in the integrated content management system defines a Single Page Application. Data controller Categories specified as an attribute of the div element on the page will be instantiated when the page is loaded in a browser. The data controller instance will communicate with the server-side components of your application by making JSON web requests and will orchestrate rendering of application-defined views directly in the browser without reloading the page. Data controller views are rendered as lists, grids, maps, charts, calendars, and forms.

We have already customized ~/pages/categories data page to render a reduced set of data controllers for end users without administrative privileges. It is quite possible that the presentation details specified in the data controller design may require customization in live application deployments as well.

For example, consider the page ~/pages/products. The illustration below shows a list of products rendered as responsive grid view. This view style will cause your app to try to fit the most columns in the available real estate of web browser. Let’s customize the headers for the first three columns.

Open the file ~/Controllers/Products.xml in Visual Studio and select “File | Save Controllers/Products.xml as” menu option. Save the file under a different name in any folder. Make the changes highlighted below directly in the copy of the data controller XML file.

<fields>
  <field name="ProductID" type="Int32" allowNulls="false" isPrimaryKey="true" label="Product#" readOnly="true" />
  <field name="ProductName" type="String" allowNulls="false" label="Product" length="40" showInSummary="true" />
  <field name="SupplierID" type="Int32" label="Supplier#" showInSummary="true">
    <items style="Lookup" dataController="Suppliers" newDataView="createForm1" />
  </field>
  <field name="SupplierCompanyName" type="String" readOnly="true" label="Supplier" length="40" />
  <field name="CategoryID" type="Int32" label="Category#" showInSummary="true">
    <items style="Lookup" dataController="Categories" newDataView="createForm1" />
  </field>
  <field name="CategoryCategoryName" type="String" readOnly="true" label="Category" length="25" />
  <field name="QuantityPerUnit" type="String" label="Quantity Per Unit" length="25" showInSummary="true" />
  <field name="UnitPrice" type="Decimal" default="((0))" label="Unit Price" showInSummary="true" />
  <field name="UnitsInStock" type="Int16" default="((0))" label="Units In Stock" />
  <field name="UnitsOnOrder" type="Int16" default="((0))" label="Units On Order" />
  <field name="ReorderLevel" type="Int16" default="((0))" label="Reorder Level" />
  <field name="Discontinued" type="Boolean" allowNulls="false" default="((0))" label="Discontinued" />
</fields>

The cloned file now defines custom labels for the fields ProductName, SupplierCompanyName, and CategoryCategoryName. It also specifies a larger value in “length attribute of CategoryCategoryName  field.

The changes will have no effect on the application since the file is not linked to any of the pages. You can use the customized controller if you upload the file into CMS. Start creating a new Site Content item and tap or click the drop box in the Data field area. Then enter values for properties File Name, Path and Users as shown in the table.

Log in as user/user123% and you will see a customized presentation of products.

The new labels are also visible when products are rendered as a list.

The same changes are visible to user when viewing products as cards.

Smart charts are also aware of the new labels.

You are observing in action the virtualization of a data controller in a live app. Nothing in the design of the application has been changed. You do not need to redeploy this application. The scope of changes may be limited to a specific user accounts or groups of users. You can specify a custom schedule to have modifications taking place on certain date and turn them “off” after a period of time when not needed.

What can be changed in the data controller? Everything can be altered with the exception of custom code business rules that may exist in the application by design. Developers can create new calculated fields, views, actions. Application workflows can be enhanced with SQL, JavaScript, and Email business rules on demand. New status bars can be assigned. None of these will require application redeployment.

Dynamic Controller Customization

You may feel excited about being able to customize an application data controller without changing anything in the application design. Remember though that the application implementation will likely evolve over time and there may be some breaking changes in the database that will render incompatible the data controllers stored in the CMS .

Dynamic Controller Customization is the technology available in apps created with Premium and Unlimited edition of Code On Time.  It allows changing design of a data controller without uploading a customized version of its XML file into CMS.

The same customization of the products controller can be done if the following content item is stored in the CMS:

select-field("ProductName")
    .set-label("Product(1)");
select-field("SupplierCompanyName")
    .set-label("Supplier(2)");
select-field("CategoryCategoryName")
    .set-label("Category(3)")
    .set-length("25");

The text defines a script of data controller customization instructions. Each instruction is a sequence of chained method calls separated by “.” and ending with “;” symbols. The methods are those defined in ControllerNodeSet class of the application framework used to create virtualization of data controllers in code. Parameter value passed to a method must be enclosed in double or single quotes.

Our sample customization looks much simpler than the one discussed in the previous step. It does not require application redeployment, it will work on top of Products data controller definition that comes with the application. Any future deployments of the application do not require changes to the DCC since the data controller customization instructions will tolerate even the removal of the fields from the application design.

This is how the administrator will see products after logging in. Other user accounts are not affected.

The sample alteration of Employees data controller below will change the list presentation of employees without photo and notes into the one with both data fields visible.

Page Employees is presented without photo and notes without sys/controllers/Employees.Alter content item in this screenshot.

Page Employees is presented with photo and notes as a result of a data controller customization instructions applied to Employees controller.

Numerous dynamic controller customizations may be created to alter the application workflow and selectively applied to alter experience of specific users or groups of users with optional schedules applied to DCC content items.

Dynamic Controller Customization enables treating application implementation of data controllers as a collection of building blocks that can be re-arranged at any moment to reflect the changing business requirements:

• An important client want to have a certain form to look differently – alter it with DCC.
• Another client requires an email notification to go out when data is changed – alter the data controller with DCC to create an email business rule that is not a part of application by design.
• A group of users should not have access to a sensitive information in the application views – create DCC instructions for the data controller and specify the user roles that must be affected.

There is no need to deploy your application. DCC rules are stored in the integrated content management system.

Dynamic Access Control List

A typical line-of-business application must support multi-tenancy. Tenants (application end users) are storing their records in the same building (shared database tables) and shall not interfere with each other when conducting their affairs.

There is a common multi-tenancy implementation strategy employed by application developers. One or more database tables are associating identities of end users with slices of data stored in shared database tables. For example, a table may link user id and customer id in an order management system. If a user logs in then customer records are automatically filtered to match the current user id.

The described approach works but there are several complications:

• Each request retrieving data from the database must be programmed to take into account the association of user identity with retrieved data.
• Some requests may require alternative identity filtering criteria, which further complicates programming.
• Association tables do not handle well various real-life business exceptions. For example, a particular user may need to see data that belongs to others on a temporary basis. The temporary nature of such business exception may require creating additional tables in the database and by inference will make all data queries more complex to program.

Dynamic Access Control List is a solution to the problem of multi-tenancy implementation that is unique to apps created with Code On Time. 

Requests to retrieve data are always following the same sequence. Application makes a JSON request from the browser to the server components of application. A single entry point accepts the request and routes it through the processing stack. Standard and custom business rules can participate in the processing of a request. Finally application framework create SELECT statements coded in SQL dialect specific to the database engine and passes the query with parameters for execution. This makes it possible to inject fragments of SQL into the query prior to execution in a centralized fashion.

Dynamic access control rules can be coded in the application business rule. An access control rule is a snippet of SQL that filters data based on arbitrary conditions. Application implementation may register a number of access rules that will get triggered by the presence of fields in the output requested by the client application. Modifications of rules require application deployment.

Dynamic Access Control List is a collection of access control rules stored directly in the integrated content management system. DACL entries can be assigned to individual users and groups of users with optional schedules attached. There is no need to redeploy application when new rules are created.

Let’s take a look at DACL in action.

Here is the database schema describing relationships between three tables that are used in our sample application.

There is no natural table creating association of user identities with Products, Categories, and Suppliers. This will not stop us from introducing multi-tenancy in the app. DACL allows creating security restrictions out of thin air when needed. For example, we will assume that the user with name user must be able to see products that belong to three categories only: Beverages, Meat/Poultry, and Seafood.

Create the new site content with the following properties:

Field: CategoryID

select CategoryID from Categories
where CategoryName in (
 'Beverages', 'Meat/Poultry', 'Seafood'
)

Login with identity of user and observe that sys/dacl/restrict-user-by-categories rule causes less Categories and Products displayed.

Only three categories are now visible to user.

Only 30 products are visible to the user out of the 77 products stored in the sample database.

If user selects a category while creating a new product then only a limited subset of categories is displayed in the lo0kup view.

Access rules defined in dynamic access control list are propagated through the entire application when triggered.

A single DACL site content entry can define multiple rules triggered by different data fields present in data controller views. It is possible to limit the scope of  a rule to specific data controller only. Users, roles and exceptions can be specified in the access rule definition.

SQL fragments can be defined as SELECT statements of any complexity returning IDs of those records that application end users are allowed to see. SQL fragments can be also defined as simple filters. Parameters referencing current user identity and any custom properties implemented in the shared business rules of application can also be utilized.

Activation of a DACL site content entry itself is controlled by user identities, user roles, and optional schedules. DACL entries that do not match identity of the current user or schedule will be ignored.

It is not possible to create DACL entries controlling other DACL entries. Nevertheless developers are still able to create application-level dynamic access rules written in code to segregate DACL entries between client accounts.

Compact Size and Extensibility

This table is the core of the integrated content management system. It looks deceptively simple but does a lot of work.

The illustration shows SiteContent table for Microsoft SQL Server. Note that other supported database engines may have  table and column names  in all-lower-caser or all-upper-case separating words with underscores.

CMS supports two methods of enforcing security in the application – traditional and Workflow Register. Traditional approach is based on assigning users and roles to content objects stored in the database. Columns Roles, RoleExceptions, Users, and UserExceptions help accomplishing that.

Workflow Register discussed below makes these columns unnecessary.

Column Data is provided to store binary content straight in the application database. We recommend using BLOB adapters to externalize the binary content.

If both Workflow Register and BLOB adapter are relied upon then the schema may be simplified even more.

This does look very compact to most people and will not likely cause a heartburn at night.

On purpose we have excluded the columns that can be used to track modified/created dates and GEO locations from the design of SiteContent table . MD5 hash value of the content in Data or Text field may be optionally stored to simplify synchronization of CMS content between databases. A dedicated field can be used to control the sort order of the content. A separate junction table can be used to link various content objects with each other. 

Developers are free to change the length of text columns or add any additional columns as they see fit. For example, developers may consider adding ClientID or PortalID columns to segregate content management system entries that belong to different clients and have them correctly filtered via dynamic access control rules. The data type of the primary key field can also be changed. For example, an integer data type with identity specification may replace “Guid” data type of SiteContentID.

User interface of the content management system relies entirely on the capabilities of Desktop and Touch user interfaces. It is easy to envision a few views in SiteContent data controller serving as dedicated lists of user-generated content, pages, DCC, and DACL entries. We have decided against forcing a particular user interface paradigm on end users and expect that customizations of SiteContent that matches business practices of end users will evolve on its own without much effort. Some developers may end up creating multiple dedicated pages to manage content. Others will resort to the default presentation created by application generator.

We will offer our vision of site content management in the product http://cloudontime.com scheduled for release in Summer of 2015.

Security

The site content is secured either by its association with user identities and roles or via a unique technology called Workflow Register.

Users and Roles

Four optional security columns Users, Roles,User Exceptions, and Role Exceptions will control access to content.  Any combination of these columns can be implemented in the SiteContent database table.

The site content with empty values in “security” columns is visible to all end users.

End users can download content by entering a known URL in the browser.

If the path of the content item starts with “sys/” or “site.” then an empty site page is always displayed.

The same response is produced if the content does not exist in the integrated content management system.

Application framework will match user identity to each of the four “security” columns specified in the Site Content data row if the column values are not blank.

Specify comma-separated lists in Users and Roles  to restrict access to content. If the secured content is not intended for the current user, then a page with “404 Not Found” response is displayed as if the content does not exist.

If the current user identity matches the exceptions specified in User Exceptions and Role Exceptions then the content also becomes invisible.

System content has its Path value starting with “sys/”. It is used internally to locate sitemaps, data controllers, schedules, DCC, and DACL entries. The same exact matching of user identity is performed against the system content. Application framework does “see” all system content items but ignores them if the current user identity is not matched.

Two special roles can be specified in Roles and Role Exceptions:

• Enter “?” without quotes to make content available to anonymous users.
• Enter “*” without quotes to make content available to authenticated users.

For example, if you want to customize the default navigation menu for anonymous users, then create sys/sitemaps/main content item, define the sitemap, and enter “?” in Roles column and “*” in Role Exceptions column. If you want to customize the default navigation menu for authenticated users, but have administrator see the site menu as designed, then enter “*” in Roles and “admin” in User Exceptions for the sitemap.

Workflow Register

Permissions expressed via Roles and Users are easy to configure but difficult to maintain. Changing security requirements present a major difficulty for application administrators since security columns of multiple content items need to be changed at once.

The second method of securing content stored in CMS is not relying on “security” columns. In fact, columns Roles, Users, Role Exceptions and User Exceptions can be physically removed from Site Content database table when Workflow Register is enabled.

The alternative security mechanism is engaged as soon as at least one workflow is declared in the site content.

Create a content item with these properties:

Save the new workflow and wait for half a minute. Try navigating to any site content item previously available to the current user - the content has disappeared, even though it still exists in CMS.

The site content becomes visible to a user if it is described as a part of a workflow and the workflow is registered to that user.

Workflow Register

The term “workflow” conjures in our minds a precise diagram of a business process produced by a system analyst. It represents a sequential flow of information collected when a business process is executed. Data statuses are changed, emails are sent out, and data updates are performed at various stages of a process… Except the beautifully detailed sequential diagram quickly turns into a hairy graph where each step is repeated numerous times under various conditions.

Line-of-business applications created with Code On Time rely on state-based workflows instead. Application data controllers describe actions available to the current user based on the state of data. Actions triggered by end users are handled via SQL, JavaScript, Email, and Code business rules also defined in the data controller.

Integrated content management system brings the  workflow to a new level and includes the following components:

• State-based workflows expressed via actions and business rules of a data controller.
• Data pages connecting data controllers in complex master-detail relationships.
• Content pages and multi-media resources delivering information to end users.
• Menu items providing the end user with means of accessing data and content pages.
• Data controller customization instructions that allow transforming presentation views.
• Dynamic access rules that allow or disallow access to data.

A workflow is a content object with a simple list of exact names of logically connected content items stored in the CMS of application. If an item in a list is preceded with a keyword regex then the rest of the text is treated as a regular expression that must be evaluated to match the site content. A workflow content object must have its path start with sys/workflows.

Registration entry in the CMS can assign a collection of workflows to individual users or roles. The name of the workflow register entry identifies either a user or a role. The path must start either with sys/register/users or sys/register/roles accordingly. The text of the workflow register entry must list all workflows associated with the user or role. Optional schedule and schedule exceptions can further enhance the registration record.

It is expected that developers will create workflows by listing all resources that are combined to provide a specific application functionality.

Application administrators will create workflow register entries to associate application users and roles with specific workflows.

This separation of configuration duties enables continues modifications of the workflows without the need to reassign specific access right to the content stored in CMS.

Content Segregation

If the same application database is intended to serve as a multi-tenant data store then addition of Portal ID or Client ID columns to SiteContent table will enable segregation of CMS content. We recommend implementing application-level access rules that will filter site content based on the Portal/Client ID associated with the current user.

Scheduler

Columns Schedule and Schedule Exceptions further increase flexibility of the CMS. If a simple date is entered then that date will determine availability of the site content. A date specified in exception will disable the content. Both columns can reference named schedules stored as CMS content items with sys/schedules path. Complex recurring schedules can be defined. Schedules are supported in Unlimited edition applications.

Interactive Content Creation

Interactive content creation comes to CMS in the Summer of 2015. Content templates will allow “live” editing of content items directly in the browser. Images inserted in the content from clipboard will become dedicated items in the CMS. Authorized content editors will be able to create content items by simply entering an address in the browser pointing to a location within the app.

Application data controllers will be tapped to create table and pivot views of data statically embedded in the content pages. This capability will be available in apps created with Premium and Unlimited editions.

Education, Blog, Forum, and Support

Applications created with Unlimited edition will also include modules for leaning content, blogs, forums, and support. We also anticipate addition of online payment acceptance.

Is This a Replacement for a Well Established CMS?

Developers familiar with DotNetNuke and SharePoint may ask themselves if apps created with Code On Time are designed to compete with these and other similar products. The flexibility of the integrated content management system certainly may inspire some of you to produce software solutions that do just that. Our objective is to provide developers with a refreshingly simple solution to a complicated problem of turning a line-of-business database application in a end-to-end solution that may go beyond the solving of a particular business problem.

jQuery Mobile is the foundation of apps created with Code On Time.  Touch UI is the primary user interface of generated apps. It relies on capabilities of jQuery Mobile to partition an HTML page into multiple virtual pages. Touch UI also takes advantage of the navigation architecture implemented in  jQuery Mobile framework. Navigation between virtual pages happens without reloading of the physical page container even when Back and Forward buttons of a web browser are pressed. Transitions between virtual pages are animated by jQuery Mobile, which provide “native” feeling to the apps. Virtualization of mouse and touch events of modern web browsers is another core feature of jQuery Mobile, that enables handling of user interactions in line-of-business applications with Touch UI.

Let’s create a line-of-business app that showcases the single page application model and the above-mentioned jQuery Mobile features.

Creating Page Template

First,  download application generator and configure a sample Web Site Factory project for Northwind database.  Choose an option to generate only the data controllers when you are stepping through pages of Project Wizard.

This is how the app will look when it is started in a web browser.

Follow instructions and login as admin/admin123%.  Instructions will disappear from the home page and you will see an additional menu item that allows managing user accounts and roles.

Let’s add a new page to our project. Activate project designer and create a new page.

Enter SinglePageApp as the page Name, select “(blank)” for Template, set Generate property to “First Time Only”, and click OK button. The icon of the page will have a lock image displayed on it to indicate that it is safe to modify the page in any text editor after it has been generated.

Drag the page to the desired location in the navigation system of the app. Right-click the page and choose “View in Browser” option to preview the page. App generator will create a file for the page, start IIS Express development web server and launch the default web browser. This is our new page.

Right-click the page once more and choose Edit in Visual Studio option.

This is the HTML markup of the page defined in ~/Pages/SinglePageApp.html file.

<!DOCTYPE HTML>
<html>
<head>
    <title>Single Page App</title>
</head>
<body data-authorize-roles="*">
    <!--The contents of this page will be overwritten by app generator.
        Set page property "Generate" to "First Time Only"
        to preserve changes.-->
    <div data-app-role="page" data-activator="Button|Single Page App">
        This is the content of <i>SinglePageApp</i> page.
    </div>
</body>
</html>

The default empty page specifies a single virtual page container element with data-app-role attribute set to “page”. You may know that jQuery Mobile uses data-role attribute for the same purposes. Touch UI framework relies on APIs available in jQuery Mobile to correctly initialize the page container as a virtual page. Only authenticated users are authorized to see the virtual page of this SPA.

Multiple Virtual Pages in a Single SPA Page

Let’s replace the default virtual page with the three virtual pages instead.

<!DOCTYPE html>
<html>
<head>
    <title>SPA1</title>
</head>
<body data-authorize-roles="*">
    <div id="spa1" data-app-role="page" data-activator="Button|Supplier List">
        <ul id="supplier-list" data-role="listview" data-inset="true"
            data-filter="true" data-autodividers="true"></ul>
    </div>
    <div id="spa2" data-app-role="page" data-activator="Button|jQuery">
        <p>
            Learn about jQuery:
        </p>
        <a href="http://jquery.com" class="ui-btn ui-btn-icon-left 
           ui-corner-all ui-icon-arrow-r ui-btn-inline">jQuery</a>
    </div>
    <div id="spa3" data-app-role="page" data-activator="Button|jQuery Mobile">
        <p>
            Learn about jQuery Mobile:
        </p>
        <a href="http://jquerymobile.com" class="ui-btn ui-btn-icon-left 
           ui-corner-all ui-icon-arrow-r ui-btn-inline">
            jQuery Mobile</a>
    </div>
    <script src="~/Scripts/Suppliers.js"></script>
</body>
</html>

Virtual pages spa1, spa2, and spa3 are div elements with data-app-role attribute set to “page”. Data activators are assigned to each page. Refresh ~/pages/single-page-app page in the web browser and you will see a list of activators.

Select the first activator and jQuery Mobile framework will activate the page, which will be indicated by the hash value #spa1 in the address bar of the browser.  The page header displays the text specified in the page activator and there is a also an empty list view with a filter. There is no code connected to the list view in the current implementation so there will be no data even if you enter sample text in the search box.

Return back and try one of the other virtual pages. Notice that the physical page does not reload in the browser as you navigate between virtual pages. jQuery Mobile handles changes of the history state in the app with Touch UI.

Click on a link and the application framework will execute an off-band HTTP request to download the content . If other virtual pages are found in the downloaded page then the framework will inject them in the physical page and transition user to the first downloaded virtual page. If the content is not compatible with the application framework then the app will create a virtual page with iframe element configured to display the linked content as shown in the next screenshot.

Making Database Request

The primary purpose of Code On Time application generator is to accelerate development of database apps. This application already includes a collection of data controller that can handle interactions with the Northwind database. This picture shows configuration of Suppliers data controller displayed in Project Designer. The data controller has been created by app generator straight from the schema of the database.

Add new JavaScript file ~/Scripts/Suppliers.js to the project in Visual Studio and enter the following code:

(function () {
    var supplierList = $('#supplier-list');
    $('#spa1').on('navigating.app', function () {
        $app.execute({
            controller: 'Suppliers',
            sort: 'CompanyName',
            success: function (result) {
                $(result.Suppliers).each(function () {
                    var supplier = this;
                    var li = $('<li/>').appendTo(supplierList);
                    var a = $('<a class="ui-btn"/>').appendTo(li);
                    $('<h3/>').appendTo(a).text(supplier.CompanyName);
                    $('<p class="ui-li-aside"/>').appendTo(a).text(supplier.Phone);
                    $('<p/>').appendTo(a).text(supplier.ContactName + ' | '+
                        supplier.Address + ', '+
                        supplier.City + ', '+
                        (supplier.Region || '') + ''+ supplier.PostalCode + ', '+
                        supplier.Country);
                });
                supplierList.listview('refresh');
                $app.touch.navigate('spa1');
            }
        });
        return false;
    });
})();

The script is designed to work specifically with this single page app. It will make a request to obtain a list of suppliers whenever a user is activating the virtual page Supplier List.

Application framework supports asynchronous pre-loading of data in virtual pages. Developer can fill a page with data before the page is displayed to the end user.  The majority of database apps based on HTML fail to do so and display empty pages that are filled with data after being presented to the user. Event navigating.app is triggered on the virtual page when the framework detects a request to display a virtual page. If the event handler returns false then the navigation is postponed indefinitely.

The script does just that. The handler of navigating.app event is making a request to the server-side components of the app by calling $app.execute method asking for a list of suppliers sorted by CompanyName column. This method is executed asynchronously. Immediately the handler tells application framework to stop navigation without waiting for a list of suppliers to come back from the server.

The second phase of client-side processing happens when a response is received from the server. The callback method success iterates through the suppliers in the response and creates corresponding list items marked with CSS classes ui-btn and ui-li-aside available in jQuery Mobile framework. The final step refreshes the list view supplier-list and resumes navigation to the virtual page spa1 by calling $app.touch.navigate method.

The script needs to be hooked to the page ~/Pages/SinglePageApp.html. Place the script reference just before the closing body tag in the page markup to accomplish that. Note that symbol “~” indicates that the path to the script must be resolved from the root of the site instead of being a relative reference. That enables the page to be moved in the project structure without the need for changes in the script reference.

. . . . . . . . . . . . . . . . .  . . . . .  . . 
<scriptsrc="~/Scripts/Suppliers.js"></script>
</body>
</html>

Refresh the page in the browser and navigate to Supplier List. Notice that there is a little pause and then the page with data  appears. This is the result of data preloading and delayed navigation. If download of data is taking longer than three quarters of a second then a progress indicator will be displayed at the top of the page and “back” button will start spinning.

Filtering in the list happens without interactions with the server as a filter value is typed. Filterable widget from jQuery Mobile makes this possible.

Note that this application is capable of displaying data with different display densities on various screen sizes in a responsive fashion. For example, click on the menu button and choose Settings.

Change display density of application to Comfortable and application theme to Dark. Reduce the width of the window and the sidebar will disappear. The page will look close to how it is presented to users of modern touch-enabled smartphones.

Under The Hood

Those of you with the curious minds may be already asking themselves how this seemingly minimalistic HTML page and lean JavaScript code are getting the job done. There are no references to jQuery or jQuery Mobile library or any other components.

Select View Source option in the menu of your browser or press Ctrl+U on the keyboard. The source of a live page will be displayed. This is what it may look like.

<!DOCTYPE HTML>
<html xml:lang=en-US lang="en-US">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta charset="utf-8" />
    <meta name="application-name" content="Hello World SPA" />
    <link id="MyCompanyTheme" href="/appservices/stylesheet-8.5.3.0.min.css"type="text/css" rel="stylesheet" />
    <title>SPA1</title>
</head>
<body>
    <script src="/appservices/combined-8.5.3.0.en-us.js?_spa"></script>
<divid="PageContent" style="display:none"><div id="spa1" data-app-role="page" data-activator="Button|Supplier List">
            <ul id="supplier-list" data-role="listview" data-inset="true"
                data-filter="true" data-autodividers="true"></ul>
        </div>
        <div id="spa2" data-app-role="page" data-activator="Button|jQuery">
            <p>
                Learn about jQuery:
            </p>
            <a href="http://jquery.com">jQuery</a>
        </div>
        <div id="spa3" data-app-role="page" data-activator="Button|jQuery Mobile">
            <p>
                Learn about jQuery Mobile:
            </p>
            <a href="http://jquerymobile.com">jQuery Mobile</a>
        </div>
        <script src="/Scripts/Suppliers.js"></script>
    </div><footer style="display:none"><small>&copy; 2015 MyCompany. All rights reserved.</small></footer>
    <script>
var __targetFramework="4.5",__tf=4.0;__servicePath="../_invoke";__baseUrl="../";var __settings={appInfo:"HelloWorldSPA|admin",mobileDisplayDensity:"Auto",desktopDisplayDensity:"Condensed",mapApiIdentifier:"", labelsInList:"DisplayedBelow",labelsInForm:"AlignedLeft",initialListMode:"SeeAll",buttonShapes:"true", sidebar:"Landscape",promoteActions:"true",transitions:"",theme:"Azure",maxPivotRowCount: 250000, help:true,ui:"TouchUI"};Web.Menu.Nodes.Menu1=[{title:"Home",url:"/pages/home",description:"Application home page",cssClass:"Wide"},{title:"Membership",url:"/pages/membership",description:"User and role manager"},{title:"Single Page App",url:"/pages/single-page-app",selected:true}];Sys.Application.add_init(function() {
    $create(Web.Membership, {"displayHelp":true,"displayLogin":true,"displayMyAccount":true,"displayPasswordRecovery":true, "displayRememberMe":true,"displaySignUp":true,"enableHistory":false,"enablePermalinks":false, "id":"mb_b","rememberMeSet":false,"user":"admin"}, null, null, null);
});
    </script>
</body>

</html>

You will find a reference to a minifies CSS  file that contains user interface definitions for jQuery Mobile and Touch UI. There is also a link to a combined JavaScript library that includes jQuery, jQuery Mobile, Data Aquarium, and Touch UI frameworks. Container element PageContent is hidden by default.

Application framework will instantiate and initialize virtual pages spa1, spa2, and spa3 when the document is loaded and ready for processing. The static script variables at the bottom of the page provide the default application settings and navigation menu.

Element PageContent incorporates the content of ~/Pages/SinglePageApp.html. Arguably more complex than the original version, the physical page served to web browsers on desktop and mobile devices is still very lean. Code On Time applications will be equipped with ability to work entirely “offline” by the end of 2015. The page structure is perfect for storing directly in the offline browser cache.

The dynamic component of this single page app is the virtual page with the list suppliers. As you can see, the source code of the physical page does not have supplier data in it. Application requests data from the server by calling $app.execute method as explained above.

This is the JSON request sent to the server components of the app by $app.execute method.

{"controller":"Suppliers","view":"grid1","request":{"PageIndex":-1,"PageSize":100,"PageOffset":0,"SortExpression":"CompanyName","Filter":[],"ContextKey":"","Cookie":"undefinedcookie","FilterIsExternal":false,"LookupContextFieldName":null, "LookupContextController":null,"LookupContextView":null,"LookupContext":null,"Inserting":false, "LastCommandName":null,"ExternalFilter":[],"DoesNotRequireData":false,"LastView":null,"RequiresFirstLetters":false,"SupportsCaching":true, "SystemFilter":null,"RequiresRowCount":false,"RequiresPivot":false, "PivotDefinitions":null,"RequiresMetaData":true}}        

The response is returned as compressed JSON string. Method $app.execute makes the response available for processing in success callback function. This how the list of suppliers looks when inspected in Visual Studio while debugging the app.

Method $app.execute can be used to select, pivot, insert, update, and delete data. Custom actions can also be invoked and processed by server-side business rules written in SQL or C#/Visual Basic. Email business rules are automatically executed in response to actions when specified.

Project Structure And Deployment

Solution Explorer of Visual Studio will show the location of the SinglePageApp.html page in the project hierarchy. There are no binary files in the project, the entire source code is included. Files with the names Application.*.xml, Controllers.*.xml, and DataAquarium.*.xml are used by application generator at design time only.

Components of jQuery, Data Aquarium, and Touch UI frameworks are located in ~/scripts folder. Files from jQuery Mobile library are located in ~/touch  folder.

Publish the project to produce a set of files that are ready for deployment to a production web server.

Window Explorer will show up with the  published files. The binary folder ~/bin contains compiled application DLLs. Files specific to application generator are not included.

Using App Generator to Create Data Pages

Touch UI application framework provides sophisticated data access user interface components based on jQuery Mobile. For example, you can easy create a master-detail page displaying suppliers and linked products with full support for search, sorting, filtering, and editing of data with just a few clicks of a mouse.

Create a new page in Project Designer and call it Suppliers. Activate Controllers tab in Project Explorer and Ctrl-click Supplies and Products  data controllers. Right-click Products controller and choose Copy in the context menu.

Activate Pages tab in Project Explorer, right-click the new page Suppliers, and choose Paste.

Drag data field Suppliers / c102 / view2 (Products) / grid1 / SupplierID onto Suppliers / c101 / view1 (Suppliers) node in the hierarchy of pages.

This will configure the data view of products to be filtered by the primary key of a record selected in the data view of suppliers.

Right-click Suppliers page and select View in Browser. A grid of suppliers will be displayed.

Select a supplier to see the linked products.

This responsive data page can be displayed comfortably in a mobile or desktop browser on a screen of any size and resolution. It allows searching, filtering, sorting, and editing of data. The data can presented as grids, lists, cards, charts, maps, and calendars.

The markup of the page is so simple that it is hard to believe.

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Suppliers</title>
  </head>
  <body data-authorize-roles="*">
    <div data-flow="row">
      <div id="view1" data-controller="Suppliers"> </div>
    </div>
    <div data-flow="row" style="padding-top:8px">
      <div class="DataViewHeader">Products</div>
      <div id="view2" data-controller="Products" data-view="grid1" data-filter-source="view1" 
           data-filter-fields="SupplierID" data-page-size="5" 
           data-auto-hide="container" data-show-modal-forms="true"> </div>
    </div>
  </body>
</html>

Attribute data-controller causes application framework to create virtual pages for each of the data views. Single page app Suppliers automatically zooms into virtual page view1 to display a master list of suppliers. Virtual page view2 is available when a supplier is selected in the user interface. Additional virtual pages are created by application framework in response to various user actions.

Creating Content Pages

Wait, there is more. Touch UI application framework combines jQuery Mobile and popular content framework Bootstrap. This enables creation of content pages with a simple and effective presentation. Add one more page to your project and configure it to use Jumbotron template. Preview the page in a browser and you will see the following:

This will surely give you a few ideas about enhancing your line-of-business database application with a few public facing pages to promote the application capabilities. These content pages will look great on mobile and desktop devices.

Integrated Content Management System

We are still not done here. This line-of-business application can be further enhanced with an integrated content management system. Built-in CMS allows creating dynamic multimedia content in a live application without the need for re-deployment. Data and content pages can be stored directly in the application database thanks to their lean HTML-based structure.

Content management system also allows creating custom navigation menus, uploading of modified data controllers, definition of Dynamic Controller Customization rules, and custom security through Dynamic Access Control List.

Learn how to create a directory of suppliers shown at the top of the article in a live application without re-deployment or access to the server file system.

Conclusion

If you are looking to take a full advantage of jQuery Mobile framework then you must take it for a spin with Code On Time line-of-business application generator. Create premium database apps for mobile and desktop devices with Code On Time now!

It is easy to add integrated content management to an app created with Code On Time.

Let’s say you have an application that was created without automatically generated pages. If the membership option has been enabled for the project then the sitemap of the app may look as follows.

Select the project name on the start page of the app generator and choose Settings, continue to Database Connection section.

Click “…” button on the right-hand side of Connection String input.

Scroll to Content Management System (CMS) section and choose the desired security system for CMS.

Click Add button to install the database support for CMS in your project. A confirmation will be displayed.

Click OK button to close the window and press Finish to skip the rest of the configuration steps for the project.

Click Refresh button to add CMS database objects to the project.

The window with the list of available data controllers will be displayed.

The screenshot above shows dbo.SiteContent table in the list of project data controllers. The table will be visible in the list if all database tables and views are included in the project.

If the project includes only a subset of database tables and views then the screen may look as follows.

Click Change Tables/Views button and add SiteContent database table to the app.

Finally press Refresh button to refresh the project metadata.

The remaining step is to create a page for Site Content management. Activate project designer and create a new page with the name of your choice in the desired location.

Switch to Controllers tab, right-click SiteContent  data controller, and choose Copy. Return to Pages tab in Project Explorer and paste the controller into the new page.

Exit project designer and generate the app. Select CMS option in the navigation menu.

Upload test content to see CMS in action.

Try the content in the browser.

Every application created with Code On Time is composed of data and content pages. Application framework user interface  Touch UI uses a combination of jQuery Mobile  and Bootstrap when rendering pages in mobile and desktop browsers. Every page is a Single Page Application.

Examples of a single page applications explain how to create a custom data-aware SPA in a project with jQuery Mobile and Bootstrap. Both examples suggest creating physical HTML and JavaScript files in the project folders. Naturally the project has to be deployed for a custom SPA to become available to end users.

Integrated content management system enables creating custom SPA pages without making any changes to the physical project thus eliminating the need for redeployment. This allows timely delivery of custom code that may be needed to satisfy the needs of application end users.

Lets create a custom searchable supplier directory in the Northwind sample. Make sure to install integrated CMS into the application database.

Login as application administrator and choose Site Content option in the navigation menu.

Create a new content item with the following properties:

Text:

<!DOCTYPE html>
<html>
<head>
    <title>Supplier Directory</title>
</head>
<body data-authorize-roles="*">
    <div id="spa1" data-app-role="page" data-page-header="Supplier Directory" 
            data-sidebar="false">
        <ul id="supplier-list" data-role="listview" data-inset="true"
            data-filter="true" data-autodividers="true"></ul>
    </div>
    <script src="~/js/supplier-directory.js"></script>
</body>
</html>

Add the second content item next:

Text:

(function () {
    var supplierList = $('#supplier-list');
    $('#spa1').on('navigating.app', function () {
        $app.execute({
            controller: 'Suppliers',
            sort: 'CompanyName',
            success: function (result) {
                $(result.Suppliers).each(function () {
                    var supplier = this;
                    var li = $('<li/>').appendTo(supplierList);
                    var a = $('<a class="ui-btn"/>').appendTo(li);
                    $('<h3/>').appendTo(a).text(supplier.CompanyName);
                    $('<p class="ui-li-aside"/>').appendTo(a).text(supplier.Phone);
                    $('<p/>').appendTo(a).text(supplier.ContactName + ' | '+
                        supplier.Address + ', '+
                        supplier.City + ', '+
                        (supplier.Region || '') + ''+ supplier.PostalCode + ', '+
                        supplier.Country);
                });
                supplierList.listview('refresh');
                $app.touch.navigate('spa1');
            }
        });
        return false;
    });
})();

Content item ~/js/supplier-directory.js is referenced by html page of Supplier Directory.

Navigate to ~/help/supplier-directory and try the new supplier directory in action.

The implementation of the application is discussed in details here.

Application uses listview widget from jQuery Mobile toolkit to present a filterable list of suppliers. The data is retrieved with the help of $app.execute method from Data Aquarium framework.

Both content items are stored directly in the application database. Dynamic URL of the page is instantly available to application users. There no need to deploy application for the directory to go live.  Use security columns of Site Content table or configure a workflow to make both files available to specific groups of uses.

The final step in the configuration of Supplier Directory is to make available through the application navigation system.

Create a third content item shown next.

Add a second content item next:

Refresh the page loaded in the browser. Now there is a new menu item for Supplier Directory listed also in the site map. Note that the name of the last content item is irrelevant and is used for reference purposes only.

Integrated content management system provides a powerful customization tool for any application. It can also be used to create public facing pages, custom sitemaps and menus, dynamic controller customization rules, and dynamic access control lists.

Code On Time release 8.5.4.0 introduces several important enhancements.

Touch UI now uses glyphicons to indicate sort and filter state. Contents of cells in responsive grid is wrapped to maximize the amount of visible information. The same “wrapped cell” design is implemented in “data sheet” view style, which will be available soon to complement responsive grid. The new view style will display a complete set of fields that can are scrolled horizontally on any screen size. The original implementation of responsive grid displayed rows of the same height making it difficult to read the content in the cells.

User identity icon is now displayed on the menu bar. The name of the user is displayed partially or completely next to the icon if the width of the device allows that. Otherwise the user name is displayed in the popup menu assigned to the icon.

Install integrated CMS in your app with Single Page App implementation model and you can try live editing of content pages. Add a content page based on any Bootstrap template to your project and select “Edit Page” in the “More” menu. If you choose “Properties’ then the app will redirect to the site content page. Only administrators, content editors, and developers are allowed to edit content pages.

Click on any content and change it directly in the browser.

Change the properties of content items.

Select glyphicons from context menu:

Save the page directly to integrated content management system.

Content pages stored in CMS are rendered both in Desktop and Touch UI. Live editing is only supported in Touch UI. Future releases will introduce a complete set of page editing capabilities that will enable constructing appealing content without effort. A collection of page templates and content fragments will be installed directly in the CMS.

The following bug fixes and enhancements are also included:

• Master view refresh when children are changed is now supported in Touch UI. If a master view has one or more fields derived from child tables as aggregates (totals, counts, averages, etc.) then specifying “controller:NAME_OF_CHILD_DATA_CONTROLLER” in Context Fields property of a field will cause the master view to refresh and forms to recalculate the fields. This syntax is supported in both Desktop and Touch UI. The old syntax will also work.
   
• Fixed desktop CSS but that has colored glyphicons in "content" pages. Now the color is scoped to ".DataViewContainer" selector.
   
• Removed xmlns="http://www.w3.org/1999/xhtml" from SPA apps and enhanced content encoding tag in the output markup.
   
• Introduced data-editable tag in content page templates to enable live editing of content.
   
• Site content is considered to be text if its type is "application/javascript".
   
• Desktop UI cancels pending "valueChanged" call in calcualted fields that leads to exceptions when a modal data view is closed.
   
• Client framework will pass a combined filter that includes standard user filters and advanced search options when executing actions.
   
• User Lookup does not crashes desktop UI anymore.
   
• If a popup list of options does fit entirely on screen than Touch UI does not resize the menu and instead positions it sideways.
   
• Touch UI aligns thumbnails vertically when Cards view style is active.
   
• Touch UI aligns thumbnails to the top in lists with multiple paragraphs.

Calendar View Style is Coming Soon

We are getting close to completion of the new view style called Calendar. Take a look at a few screen shots below. The new view style uses a common “horizontal infinite scrolling” infrastructure in day and week sub-views shared with the upcoming “data sheet” view style. The screen shots are displayed without data. Data will be displayed on demand when user stops scrolling. The data pivoting technology implemented to support Smarts Charts is the foundation of the Calendar view style.

Year

Month

Week

Year View on  a Small Screen

The “geo” chart type will render a map of the Earth. Each value will be a country, region, or city with a number associated with it. Countries with larger numbers will be a darker shade. The scale for the values is shown in the bottom right corner. The example below shows the location of customers by country in the Northwind sample app.

To use “geo” chart type, add the keyword “geo” to any “pivot-” tag, and make sure that it is separated with hyphens (-).

The data for the chart can be seen below.

Hovering over a data point will reveal the data. An arrow will be rendered on the scale in the bottom right corner.

The label for each row is attempted to be resolved by Google Maps. Please see the Google Maps Terms of Service for more information on their data policy.

Display Mode

The “displaymode” property determines the rendering of data points on the chart. By default, the mode is determined automatically. When using countries, such as in the example above, it will render using “regions”. One alternative mode is to place markers that are relative to the size of the value by specifying “markers”.

To define the display mode, add the keyword “displaymode”, followed by a colon and the value in quotation marks. This keyword must be the last in the tag.

Hovering over densely packed data points will magnify the region.

Using a display mode of “text” will render the value as a string over the correct location. The size and boldness of the text reflects the size of the value.

Region

The “region” property allows setting the zoom level of the map. By default, the property is set to “world”, to display the full map. The value can be set to a continent using its 3-digit code, a country with the ISO 3166-1 alpha-2 code, or a state in the United States with the ISO 3166-2:US code. If using a state, the resolution property must be set to “provinces” or “metros”.

The example below is set to zoom into the continent of Europe with code “150”.

Resolution

The “resolution” property determines the display of data points on the geo chart. By default, it is set to “countries”. The “provinces” value is supported for some country regions and US state regions. The “metros” value is supported for US country region and US state regions only.

An example of the “metros” resolution mode can be seen below. The chart uses “markers” display mode.

The upcoming release 8.5.5.0 will incude the brand new Calendar view style, mini-calendar on the sidebar, ability to sort, and group data by multiple columns in Touch UI.  The release is expected to go out in the third week of July. The screen shots show the working version of the features, which may change at the time of release.

Calendar View Style

“Year” mode displays a full calendar with indication of data activity.

This mode scales in a responsive fashion on the phones.

“Month” mode  shows a vertically scrollable infinite list of months.

This is how it scales on smaller screen.

“Week” mode provides a horizontally scrollable wireframe of data.

“Day” mode reduces “week” presentation to a single day.

Smaller form factor will migrate calendar mode selector to the view selector.

Mini-calendar in Sidebar

The brand new mini-calendar feature works in “see all” mode of display. It complements well the calendar view style as can be seen in the pictures above. Mini-calendar also works with the other view styles as well. Mini-calendar becomes visible as soon as at least one “date” field is detected in the dataset.

Mini-calendar will be integrated in the Desktop UI in release 8.5.6.0.

Click on a day to select a week. If a day in a selected week is clicked or touched then the “day” selection mode is activated. If the selected day is clicked or touched then “week” selection mode is activated.

Multi-Column Sorting

Users can now sort by multiple columns. Taping of column names will set the sort order. Subsequent tapping will cycle sorting of the fields between “ascending”, “descending”, and “none”.

Multi-Column Grouping

Powerful new feature bring the grouping capabilities in the hands of developers and end users.

This screenshot shows employees grouped by “Reports To” field displays in “Cards” view style.

This screenshot shows products grouped by Supplier Company Name and Category Name.

Multi-column grouping works as extension to multi-column sorting. Data is sorted first by “group by” columns and then by “sort by” columns.

The “geo” chart type will render a map of the Earth. Each value will be a country, region, or city with a number associated with it. Countries with larger numbers will be a darker shade. The scale for the values is shown in the bottom right corner. The example below shows the location of customers by country in the Northwind sample app.

To use “geo” chart type, add the keyword “geo” to any “pivot-” tag, and make sure that it is separated with hyphens (-).

The data for the chart can be seen below.

Hovering over a data point will reveal the data. An arrow will be rendered on the scale in the bottom right corner.

The label for each row is attempted to be resolved by Google Maps. Please see the Google Maps Terms of Service for more information on their data policy.

Display Mode

The “displaymode” property determines the rendering of data points on the chart. By default, the mode is determined automatically. When using countries, such as in the example above, it will render using “regions”. One alternative mode is to place markers that are relative to the size of the value by specifying “markers”.

To define the display mode, add the keyword “displaymode”, followed by a colon and the value in quotation marks. This keyword must be the last in the tag.

Hovering over densely packed data points will magnify the region.

Using a display mode of “text” will render the value as a string over the correct location. The size and boldness of the text reflects the size of the value.

Region

The “region” property allows setting the zoom level of the map. By default, the property is set to “world”, to display the full map. The value can be set to a continent using its 3-digit code, a country with the ISO 3166-1 alpha-2 code, or a state in the United States with the ISO 3166-2:US code. If using a state, the resolution property must be set to “provinces” or “metros”.

The example below is set to zoom into the continent of Europe with code “150”.

Resolution

The “resolution” property determines the display of data points on the geo chart. By default, it is set to “countries”. The “provinces” value is supported for some country regions and US state regions. The “metros” value is supported for US country region and US state regions only.

An example of the “metros” resolution mode can be seen below. The chart uses “markers” display mode.

Applications created with Code On Time use a well defined entity model that prescribes presentation of data as grid and form views and determines transition of views via actions. Data may come from any source. For example, a developer can defined an SQL query or stored procedure to read data from the database. An entity can also be programmed to read/write data from a web service, file system, or any other source. Application framework interprets the entity and displays data in various view styles. For example, a typical grid view can be rendered as responsive grid, list, collection of data cards, map, and charts. Request an interactive Webex presentation to learn more.

“Calendar” is a brand new view style that will become available with update 8.5.5.0 on September 2, 2015 . A presence of a “date” field will tell application framework that there is possibility of rendering data as a calendar. New view style offers Day, Week, Month, Year, and Agenda modes. Any field in the view can serve as a “color” field. The framework will assign a color to each data value.  End users can drag and drop events to change values of date fields. Standard form view of an entity is display when an event is selected enabling seamless editing of data.

“Day” view in the screen shot shows 4 data records rendered as events.

Mini calendar on the side bar uses bold font to indicate dates of the month with events. Mini calendar alternates presentation of data between day and week mode when a particular date is clicked. Color legend shows associated data values, which represents the name of the employee assigned to the “order” event. An “event” is a record from Orders table of the Northwind sample.

“Week” view offers seven days of events. Future updates are expected to support 3 and 4 day weeks. Both “Day” and “Week” view are infinitely horizontally scrollable.

“Month” view offers infinitely scrollable events organized in months.

Click on any item in the color map on the sidebar and the application will “dim” events associated with other employees in “Day”, “Week”, “Month”, and “Agenda” views.

“Year” view offers analytical presentation of an entire year and also enables quick data-driven navigation to a month or a specific day.

“Agenda” view provides a convenient condensed summary list of events with a dynamic timeline.

All modes of the calendar view style are responsive. Smartphone users will see presentation scaled to fit the form factor of their device. For example, these two screen shots demonstrate “Day” and “Agenda” view on a typical smart phone.

These amazing capabilities require no programming or coding. Developers can opt to disable the calendar when not desired. Otherwise application will simply offer the end user yet another way to see their data.

Calendar view now joins a first class collection of presentations styles that were made available in the previous releases and greatly enhanced with this new iteration. View selector and sidebar provide access to every view style available for a particular dataset.

For example, charts view displays automatically constructed charts without developer writing any code.  Any number of custom charts can be defined when needed at design time.

“Cards” view presents data items as multi-line cards with the same size. Application framework breaks each three fields in paragraphs offering another way to see data. Cards presented in 3, 2, or 1 column based on the screen size. The screenshot shows two columns of automatically configured cards.

“List” view is the most universal presentation style that will work with fields of any length and any screen size. Field values float from left to right and continue on the next line.

“Grid” view style enhances responsive presentation by introducing automatic data balancing. The new release reduces the number of visible columns by applying 2, 5, 8, 10, and 12 column breakpoints based on screen size when data is rendered. This makes it possible to display a grid of rows with “important” fields without being forced to scroll horizontally. For example, this screenshot shows five columns of data rows in Orders table.

Developers can indicate the minimal screen size that a particular column must be displayed on. For example, tag “grid-tn” will force a column to show up even on “tiny” screen. Small screes with show every column marked as “grid-sm”. The release notes of the update will explain expected logical pixels of tiny, extra small, small, medium, large, and extra large screens.

Previous release required explicit tagging of each field. The new approach is to assume that all fields must be displayed if possible. The mere intent of a developer to place a field in a grid implies that it must visible. Developer-defined tags simply enforcing display of fields on particular screen sizes in responsive grid. The next screenshot shows 8 columns displayed when the sidebar is not visible. Automatic data balancing ensures that “shorter” fields reclaim more real estate from “longer” fields with enforced minimal width to ensure quality “balanced” presentation of data in columns with fixed width.

All view styles also support “long press” that allows displaying of context menu and selection of records on both desktop and touch-enabled devices. The screenshot above shows context-sensitive filtering and sorting options.

“Map” view style is one more method of presenting data that becomes available when latitude/longitude or Address/City fields are present in the gird view.

Context menus and data cards are now displayed at the bottom of the screen on devices with small form factor to enable easy touch operations. A couple of screenshots below show data card of “Map” view style and view selector on a small screen.

The standard collection of presentation styles will be enhanced with horizontally scrollable “Datasheet” view and “Hierarchy” view styles. The implementation of remaining view style is well under way and is based on horizontal scrolling mechanism that was developed and perfected with “Calendar” view.

We were surprised to learn that Iron Speed, Inc. has decided to discontinue operations. The primary reasons were cited by the company CEO as “expense of litigation with patent troll” and “product sales have been severely impacted”.

Iron Speed has always been a product that generates a large number of data input forms from database tables. These data input forms were based on aging Web Forms technology virtually abandoned by Microsoft. The fact that “product sales have been severely impacted” indicates the possibility of IronSpeed going out of business even in the absence of litigation.

Code On Time has been focused on generating custom premium database applications with a solid extensible architecture. Our own Data Aquarium Framework and a concept of a data controller make it possible. We are inviting all Iron Speed customers to attend a live WebEx presentation of Code On Time. We will show you amazing Touch and Desktop UI in action, perform live project modifications, and answer any questions you may have. Open a support ticket to request a presentation.

Our Technology

A data controller defines an entity with a data model expressed as a collection of fields. Individual views describe presentation of data, while actions and business rules define the built-in and custom application behaviors.

Code On Time application generator is a single executable program for Microsoft Windows that allows creating custom software projects. The intended operator of the application generator is a software developer, who has designed a database and wishes to create a custom application source code for it. Several project types are supported and differ by deployment model of the source code “written” by application generator.

Premium database applications created with Code On Time may include content pages and data-aware pages.

A typical use case of the application generator would be the following: a software developer starts the application generator, selects a database for the project, and chooses to create the project source code without data controllers or to have data controllers configured from the database.

• A project without data controllers must be populated with pages and controllers manually. A data controller can be configured to consume data from external web services or file system. The developer may also create a custom SQL statement to configure a controller.
  
  Use this option if you are developing an application on top of stored procedures or web services.
   
• A project may have data controllers configured from the database tables. Application generator will de-normalize existing table relationships and define a singular entity that presents a user-friendly logical view of data. De-normalization of relationships is mandatory for a premium application.

For example, a database may define three separate tables to persist products, categories, and suppliers. The table of products would reference categories and suppliers via a numeric values instead of including the name of category or supplier information. Application generator will configure a data controller for products by “borrowing” fields from categories and suppliers.

The application generator has completed its work after the source code of the project has been generated.

The application developer needs to publish and deploy the source code to a web server to see the generated application in action. Microsoft IIS or IIS Express web server is required for an application to come alive.

End user must operate a web browser to access an application deployed to a Microsoft web server. All major web browsers are supported.

Non-human agents can also interact with the application data controllers via REST API if the software developer configures this type of interaction.

If the database has changed, then the application developer will have to update data controllers and produce a new source code for the application. The old application will have to be physically removed from the web server and replaced with the new published application.

Applications created with Code On Time are not able to detect changes in the database schema. Changes in the database schema will either render application inoperable or remain invisible, depending on the nature of database modifications.

An application created for one database is unique and will not work with a database that has a different schema.

Database metadata with information about tables, columns, and relationships is not included with the published application. Metadata about the database is not used by the application when serving requests from web browsers or external non-human agents.

Fundamentally our application generator is an automation tool for software developers that provides a service of writing the source code of custom line-of-business applications.

Microsoft Visual Studio can be used to customize generated source code.

Introducing Universal Database Browser

The claim of patent infringement against IronSpeed, Inc. mentioned above is based on the patent with the following abstract:

Computer software for, computer apparatus for, and a method of automatically generating a user interface for a relational database comprising extracting schema information from the relational database and automatically generating corresponding schema and user interface metadata, storing the metadata in a repository, and automatically developing from the metadata a user interface appropriate to the relational database.

The first reading of the abstract will certainly cause anyone familiar with software development to scratch their head. There are virtually no applications that do not rely on a database in some way. Databases can be found in computer gaming, accounting, word processing, anti-virus protection, health care, package delivery - you name it. There is virtually no application code that does not rely on user interface metadata generated by computer software in some shape or form. How could this generic idea be awarded a US patent?

The second reading of the abstract will show that the word “code” is not mentioned at all. You will not find the word “code” in the claims section of the patent either. So if it is not about code generation then what does “automatically developing from the metadata a user interface appropriate to the relational database” mean?

A thorough reading of the entire patent and review of 87 illustrations will reveal that it does introduce a rather neat invention in the form of a Universal Database Browser.

1. The invention includes a utility that we shall call Metadata Extractor. The purpose of this utility is to convert information about tables, columns, and relationships between tables into user interface metadata.
    
2. The main component of the invention is the utility that we shall call Universal Database Browser. This browser interprets user interface metadata and displays data input forms at runtime.  
    
3. The invention also makes provisions for the possibility of enhancing user interface metadata with custom scripts containing business rules and triggers.

Database administrator will utilize Metadata Extractor to produce and refresh user interface metadata after each round of database schema changes. User interface metadata about the database is stored in a central location.

An instance of Universal Database Browser is deployed to a computer of each end user. Browsers are configured to access the central location of user interface metadata files.

End user starts her Universal Database Browser and chooses metadata retrieved from the central location by database name. The browser will display a menu of available entities. A list of data rows is displayed after entity selection has been made.

End user can activate a data entry form for any row. She we also see a collection of directly linked child records. For example, if an order is selected then a data input form is displayed for that row along with linked data tables.

Any child record or entity can be promoted to become a focus of Universal Database Browser. The browser is the sort of a looking glass that is being moved by end user from a data row to the row’s linked entities in various directions.

Universal Database Browser also supports an interesting concept of “search path”, whereby search operations are traveling connected data entities to help locating data.

Note that Universal Database Browser is a smart software capable of interpreting user interface metadata to provide all of these capabilities to the end user. Not a single line of code has to be written. The browser is the embodiment of the central idea expressed in the summary of invention:

“It is the primary object of the present invention to provide a method and system by which data entry forms for relational databases may be generated dynamically at run-time without the necessity of writing computer code to accomplish this task.”

The invention is certainly worthy of finding a venture capitalist willing to fund it or maybe having a “Kickstarter” project started.

We believe that it is not possible to provide a truly premium database application experience with such a literal interpretation of database information. End users do not see their data in 1st, 2nd, 3rd, and 4th normal forms. The real-world data is inherently de-normalized and shall be presented as such.

The invention will find traction among database administrators and software developers who need a “native” look at data in its fully normalized glory.

Code On Time vs. Universal Database Browser

Please note that the terms Metadata Extractor and Universal Database Browser are used in an attempt to simplify references to the ideas expressed in the patent.

It is our opinion that Code On Time code generator and Universal Database Browser are two different animals. Let’s compare the two.

Does Code On Time perform substantially the same function as the invention?

Code On Time is designed to assist developers in writing source code for their line-of-business application. The invention is intended to eliminate any need to write source code. The answer is a resounding “no”! Our very name, “Code On Time”, seeks to imply that code is in our DNA.

Does Code On Time function in substantially the same way?

Our code generation product does not serve the same function. Code On Time produces source code, while the invention eliminates source code. The answer is “no”.

Does Code On Time yield substantially the same result?

Code On Time produces source code for an application developer. This developer will compile and publish this code to a Microsoft web server. Any web browser or non-human agent can make requests to interact with the application. The invention produces user interface metadata, and interprets this metadata as data input forms to the user. Again, the answer is “no”.

We wanted to share with you that Iron Speed, Inc. has discontinued operations. Diligent developers have surely tried Iron Speed Designer and for various reason have turned to Code On Time instead. Read our comment about Iron Speed to learn more. We are charging ahead - expect to be amazed!

Calendar view style

Code On Time update 8.5.5.0 introduces a brand new view style into the already potent mix of visualization methods available to end users of Touch UI. View style Calendar brings a whole new level of interactions with data. Drag & drop is fully supported with numerous enhancements planned ahead. Take a look at the Calendar and other view style supported right now.

The following tags allowing controlling otherwise fully automatic display of Calendar view style:

• calendar-date will mark a particular data field as start date or “general” date of event. An event is a database row with a date column.
• calendar-end specifies the “end” date of the calendar event. Mark a field as “end” date to allow “resizable” events.
• calendar-text specifies the field value displayed on the event
• calendar-color specifies option “color” source for the events. For example, an order event can be presented with a different color for each employee associated with it. 24 standard colors are supported.
• calendar-disabled excludes “date” field from being displayed on the calendar.

Mini-Calendar

A permanent sidekick called mini-calendar is display on the sidebar whenever at least one data field is available to the user. Mini-calendar filters data in all data views and serves as a navigator in Calendar view.

Other highlights include responsive grid with auto-balancing, multi-column sorting, and support for Hyperlink Format String property in Touch UI.

Multi-Select

Ability to select multiple rows is now fully supported in Touch UI in Grid, List, and Cards view styles. End user can select up to a 1000 items at once.

Responsive Grid with Auto-Balancing

The responsive Grid view style has been redesigned and now support auto-balancing of data.  Notice that the data is densely distributed on the screen. Built-in screen-size breakpoints automatically reduce the number of fields visible to the user .

Application framework uses these breakpoints:

• tn (tiny) – 480px
• xs (extra small)  - 768px
• sm (small) – 992px
• md (medium) – 1199px
• lg (large) – 1440px
• xl (extra larget) – anything larger than 1440px

If you want to ensure that a particular data field is display on a tiny screen in Grid view style than tag it as “tn-grid”. The framework will automatically take core of the remaining fields.

Hyperlink Format String

Touch UI now supports hyperlink format strings. Field will be displayed as underline if a hyperlink is present. Context menu will display items for every field with a hyperlink even if it is not visible in the current view style.

Multi-Column Sorting

End users are now able to perform sorting on multiple columns.

Other Enhancements

The release also introduces numerous enhancements to both Touch and Desktop UI.

• High performance reading of many-to-many fields. Framework performs a single database request per many-to-many field to retrieve junction table rows that match the rows of the data page that will be returned to the client. (Desktop and Touch)
   
• Authorized roles can be assigned to individual data views in SPA applications (Desktop and Touch).
   
• Import processor assigns the same default values to all imported rows (Desktop and Touch)
   

• Aggregates are now calculated on result sets based on stored procedures and web services. (Desktop and Touch)
   

• SQL Business rules allow clearing "Modified" property of field values as follows
    set @FieldName_Modified = 0

  Application framework will not use the field in update/insert/delete operation.
   

• Single Page Applications allow anonymous calls to data controllers.
   

• Relationship Explorer links now use shortcuts for data controller URL parameters _commandName and _commandArgument. The new syntax uses _command and _argument.
   
• HTML page implementation is now also supported in Relationship Explorer links.
   
• “Borrowed” blob fields are correctly displaying a thumbnail in Touch and Desktop UI
   
• Touch UI allows right-click of items in all view style with ability to perform quick filtering.
   
• Paging is now supported in “Summary” presentation in Touch UI.
   
• Touch UI memorizes tab selection for the last 10 objects on any given page.
   
• DACL correctly processes parameters @BusinessRules_, @Url_, and @Session_.
   
• Fixed issue with Oracle Session State throwing "Value does not fall within the expected range".
   

Coming Next

We are bring a controller-level Data Model in the Project Designer. You will be able to set up your own tables, columns, and relationships instead of relying on the app generator to do so. This will give complete GUI-based control over the command and fields in the application baseline.

Also Expect a mini-calendar to become a part of Desktop UI. This handy feature work similar to its counterpart in Touch UI.

Databases organize the real-world information and transform it into the structured data. Ends users can share, analyze, and process the contents of databases with the help of custom applications. Application developers write custom database apps. Custom database apps are known as line-of-business applications. What is a Premium Line-of-Business App?

Multiple data presentation styles, sophisticated data entry forms,  complex page layouts, and touch-enabled responsive screens are the hallmarks of  a true Premium Line-of-Business App. Premium features typically imply a premium price of a lengthy application implementation . Code On Time application code generator eliminates the word “premium” from the price and drastically reduces application implementation time for developers.

1. Premium Data Presentation

Naturally, the purpose of a database app is to present data items to the end users. A premium database application will allow viewing data in multiple styles whenever more than one data item of the same type is displayed. List, Cards, Grid, Charts, Map, Calendar, and Spreadsheet presentation styles are elevating an app to a premium level.

List is a mandatory presentation style for a modern app. List makes it easy to present data on a device with any screen size. Data fields of list items in a premium database application will wrap to the next line on devices with a smaller screen size.

List items must have a variable height to allow viewing data composed of any number of fields.

Cards is an alternative to a list view. Cards have the same height and will limit the visibility of long data values .

A premium database application will display cards in multiple columns on larger screens.

Grid presents data as a table of rows and columns to allow comparative analysis of data items.  This is a must-have view style for an application dealing with numbers.

The variable screen size of devices in the hands of end users poses a challenge to the design of a grid presentation. Typical desktop computers have plenty of the screen real estate while the screen size of tablets and smartphones can vary widely. The hallmark of a premium database apps is ability to display a responsive grid. Responsive design of a grid will hide the less important fields from the view on a smaller screen size.

Premium database apps make it possible to display all data fields even on a small screen by enabling horizontal scrolling of data. Spreadsheet presentation style allows freezing columns and scrolling the invisible columns into the view.

Map brings work with data in  a real world in a premium database application. This view style can be triggered by a mere presence of City and Address fields.

Seeing a calendar of data items with dates makes enormous difference for the end users.

Calendar view must be available whenever the application end users are dealing with the dates. A premium database app will offer a variety of ways to see data on a calendar.

For example, Month presentation with drag & drop operations and infinite scrolling transform the traditional “wall” calendar into a powerful electronic record of events.

Scheduling of events is convenient in the Day and Week modes. Make sure that your app does that too.

A premium calendar will give users a bird-eye look at the data in the Year mode.

Everyone needs a “to-do” list. That is the purpose of the Agenda mode in a premium Calendar view style. Application end users will not miss a thing!

Charts allow the end users to “see” their data for what it is. A truly premium database app will offer a built-in ability to render data as charts whenever possible.

Ability to see the same data in multiple graphical representations will transform every list of data items in an instant dashboard. Zooming into charts and seeing data behind the graphs is what a premium database app shall provide. If the time is displayed on a chart then a premium app must choose the most appropriate time scale as well.

Any filters applied to data must be instantly reflected in the charts.

Filtering, Quick Find, Advanced Search

Data discovery comes in all shapes and forms to the end users. Sometimes it is convenient to see weekly or daily data sets. The mini calendar will be required to make it trivial in a premium app.

Sometimes a user looks at the data value and wants to find all data rows with similar characteristics. A premium line-of-business application will let users to right-click any data value and apply an instance filter to it. Mobile devices will allow tapping and holding the value to bring about filtering options.

Selecting multiple values for a filter should be very simple in a premium application.

Search controls must be a touch or a click away in a premium app. Data search with simple conditions need to be supported to assist users with any level of expertise.

Switching between quick find and advanced search will empower experienced users of a premium app.

Multi-Column Grouping And Sorting

Sequence of a data flow can make or break an application. Grouping data items by any combination of columns will make your premium app to stand out of the crowd of mediocre solutions. Much more so if the end users are empowered to do that on their own without requesting help from application developers.

Business life is unpredictable.  Give your end users ability to sort data items by any combination of fields in any order. That will make their work a premium experience.

Premium Data Entry Forms

Data entry forms must automatically fit into any display size while offering sophisticated data lookups and data input controls.

Data fields on the forms need to be organized into multiple columns with optional tabs. A premium application implementation will abandon physical positioning of fields if favor of logical field groupings to enable effective display of forms on any screen size. Any other approach will increase the development costs tremendously.

Complex Page Layouts

Simultaneous display of different kinds of data on a page is known as dashboard. Dashboards with complex page layouts should be easy to organize in a premium application.

Of course, there is no dashboard without charts.

Support for Devices With Any Display Density

The display technology has improved and now even the smallest devices feature an exceptionally high density of pixels that cannot be seen with a human eye.

The following two screens are displaying the same exact application page on devices with a different density.

Application must gracefully adjust to the available “viewport” that defines logical pixels of the display on the device. The icons should look crisp and functionality must be adapted in responsive fashion in a premium line-of-business application.

If your app looks too small or too large for a display then your app is likely not in the premium category.

Don’t forget that your end users will literally touch your apps on many devices. A premium app is ready for “touch” interactions on native touch screens and hybrid devices.

Conclusion

Does your app provide a less than premium experience to the end users? Does it take a lot of money and time to get things done?

If so then schedule a live demonstration of Code On Time. Our code generator will assist developers in producing consistently high quality source code of custom line-of-business applications with premium features for Mobile and Desktop devices. Give us a call at 1-877-467-6340.

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.

BuyCode 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!

Code On Time release 8.5.6.0 introduces Model Builder – a new way to build the app you want.

In the past, applications created with Code On Time created a baseline for every entity in the database, and tried to estimate the best configuration for every page, controller, and application component. A frequent complaint about the previous versions about the app generator is the lack of ability to control this automatic process. In response to these complaints, we have included a new feature, designed to give Code On Time users more control over the application development process.

The Model Builder allows developers to design a data model for each and every database entity used by the app generator. They can pick and choose fields to include in the model, define or create foreign key relationships, and even import fields from several levels away easily. Names and labels can be easily changed, formatting can be applied globally, and sorting and filtering can be applied to form a business entity.

The Model Builder is now the first step for the creation of any Code On Time premium database app.

See an example of the default data model for Order Details table of Northwind database.

In addition to Model Builder, the following noteworthy bug fixes and improvements have been added to release 8.5.6.0:

• Support for Visual Studio 2015
• Support for Azure 2.7 and 2.8
• Support for .NET 4.6
• CodeMirror integration in Model Builder and Project Designer
• Charts in Touch UI now support color tags. Specify a list of colors, like so: "pivot1-row1-colors:'red, green, blue'".
• Added tag “calendar-mini-disabled” to disable the mini calendar on the sidebar
• Fixed scaling problem on high DPI devices.
• Touch UI inputs now show a single line below the input.
• Neutral cultures are now included in the list supported by app generator
• Boolean fields will show check glyphicon in Touch UI when in read-only mode
• Many more minor bug fixes

Working with the Model Builder

After entering the database connection string, a list of database entities will be listed. Select an entity to start building a data model.

The Model Builder will open.

Adding additional fields to the data model is simple. Check the box next to a column to include the field.

Fields defined with a custom SQL formula are also simple to add. Click the “Add Formula Field” button on the toolbar to get started.

Enter a name for the field in the first textbox. Enter the formula in the text area.

Use “Ctrl+Space” to see a list of columns. Fields can also be dragged from the diagram to be added to the formula.

Reorder fields in the model by dragging the Field column to the correct position.

Field labels and options can be changed by clicking in the cell. The following shortcuts can be used to quickly and easily navigate between the different cells:

• If mouse cursor shows text, click to change
• F2 to Select All/End
• Left/Right moves between cells in row
• Tab/Shift+Tab to move between cells
• Up/Down to move up down
• Enter/Shift+Enter to move up down
• Esc once will restore original if changed, Esc twice will exit edit mode
• Ctrl+Enter will save, stay editing

Sorting can be added to the data model by entering the Sort Type and Sort Order.

The Query tab shows the command for the data model.

The Data tab shows the output of the command. By default, Raw Data mode is on. This will show all primary and foreign key fields, and show native value formatting from the database.

Disabling Raw Data will hide primary and foreign keys, and apply formatting.

The Labels button will replace field names with labels.

Click Save to persist the new data model. Proceed to generate the application. A page has been added, showing a grid of products, as defined by the data model.

The user can also switch to list view.

Automatic charts have also been created.

You can edit existing products or create new ones. Notice, however, that the SupplierID and Category ID have not been configured as lookups.

Let’s add Categories and Suppliers data models. Go back to the generator and create a data model for Categories. Notice that these two tables that are referred to are already suggested.

Create the data model for Categories.

Create a data model for Suppliers. Be sure to sort by CompanyName and disable the HomePage field.

Regenerate the project. Be sure to refresh when prompted. Notice that Supplier and Category are now rendered as lookups.

Activating the Supplier lookup will open a list of suppliers.

Activating the Categories lookup will show a list of categories to select.

Let’s create a second data model for Products, that only shows products from North America. There are two ways of creating a copy of a data model – saving a copy of an existing model, or creating a new model, listed under “Defined” section.

Let’s create a copy. Open the Products data model, and change the name to “NorthAmericanProducts” by typing in the name in the top-right corner.

Let’s add a filter to the new model. Click the “Add Filter…” button on the toolbar.

Enter the filter in the text area.

In addition, sort the ProductName in descending order.

The Query tab will show the new command.

The Data tab shows that the sorting and filtering was a success.

To save the data model as a copy, activate the dropdown next to “Save”, and press “Save a Copy”.

Proceed to generate the application. Notice that another page has been added to the sitemap. This page is a Single Page Application created to handle products from North America.

Virtual Connections

One of the most powerful aspects of the Model Builder is the ability to define virtual primary and foreign keys. Let’s create a data model using the view Alphabetical List Of Products.

The application framework is unable to perform any CRUD operations on a business entity until a primary key is defined. Let’s create a virtual primary key by right-clicking ProductID and pressing Set Primary Key.

The spec “VPK” will be added to the first column of the diagram.

Notice that because Alphabetical List Of Products is a view, foreign keys are not known, and values from these foreign key relationships cannot be included until a virtual foreign key is defined.

On the toolbar, click the “Add Table” button.

The field list at the top of the Model tab will be replaced with a list of database objects.

Drag the “dbo.Suppliers” table onto the diagram. Rename the alias of Suppliers to “Supplier” by clicking on the header of the new table in the diagram.

Then, drag the “SupplierID” field from Alphabeticallistofproducts onto SupplierID column of Suppliers table to form a virtual foreign key. You can now check fields from the Suppliers table to include in the data model.

Sort this data model by entering “Descending” in the Sort Type of ProductName.

The final result will show the inclusion of Supplier fields in the grid.

Have you ever wanted to give your grids and forms a personal touch? Release 8.5.7.0 makes it possible with the inclusion of conditional CSS rules. These rules allow defining JavaScript expressions that are executed for every row in the view. These expressions have access to the values of each record. When the expression passes, a CSS class will be added to the row. You can then add custom styling to these rows to tell a story.

The picture below shows several examples of custom styling in Touch UI.

Adding a View Style Rule

The first step is to define a set of rules that will add CSS classes to the correct rows. The following examples will use the sample Northwind project.

Open the Project Designer. In the Project Explorer, switch to the Controllers tab, and double-click on Suppliers / Views / grid1.

The view will be opened on the left side of the window. Switch to the Styles tab at the top of the screen.

On the toolbar, press New | New Style to open the create form. Enter the following settings.

$row.Country == 'USA'

This rule will add the class “myapp-country-usa” to every row where the “Country” column is equal to “USA”. The Test field is an expression written in JavaScript. The “$row” object is declared by the client library, and each field value is attached to this object when the expression is executed. The “myapp” prefix to the CSS class is added to ensure that there are no clashes with standard rules included in the application.

Press OK to save. Add one more style with the following configuration:

$row.ContactTitle != null&& $row.ContactTitle.match(/sales/i)

This rule will add “myapp-contact-title-sales” rule to every row where the Contact Title is equal to “sales”. The “i” at the end of the regular expression will ignore case.

Press OK to save. On the toolbar, press the Browse button to regenerate the app and open it in your default browser.

Notice that nothing has changed! The grid looks the same as it did before. The rules to add the CSS class has been added, but there have been no presentation changes that the user can see. By using Developer Tools (F12), the correct row can be inspected, and you can confirm that the class is present.

Next step will be to add some presentation to these rules.

Customizing Presentation with CSS

Switch back to the Project Designer, and press the Develop button at the top of the screen to open the project in Visual Studio.

In the Solution Explorer, right-click on the “~/touch” folder, and press Add | Style Sheet button.

Paste in the following rule:

.myapp-country-usa> .ui-btn:not(:hover):not(.app-selected):not(.ui-btn-active),.myapp-country-usa> .ui-btn:not(:hover):not(.app-selected):not(.ui-btn-active) .app-frozen-spacer {/* change this property */background-color: #ffd800 !important;
}

This rule will change the background color of the row, which has the class of “ui-btn”, as well as the spacer used as a background on the frozen column when the grid is scrolled to the right. This rule will not be used when the row is hovered over, clicked, or selected.

The result of this rule can be seen below.

Another way of adding a highlight to a row that does not clash with hover, highlight, or select presentation would be to add a bar on the left side of the row.

.myapp-country-usa .ui-btn::after,.myapp-country-usa .ui-btn .app-frozen-spacer::after {display: inline-block;content: '';position: absolute;left: 0;top: 0;bottom: 0;width: 7px;/* change this property */background-color:  #ffd800 !important;
}

See the result in the screenshot. Notice that the yellow bar is still visible in the hovered first row, and the selected second row.

These rules can be combined, like so:

.myapp-country-usa > .ui-btn:not(:hover):not(.app-selected):not(.ui-btn-active),.myapp-country-usa > .ui-btn:not(:hover):not(.app-selected):not(.ui-btn-active) .app-frozen-spacer {/* change this property */background-color: #ffd800 !important;
}.myapp-country-usa .ui-btn::after,.myapp-country-usa .ui-btn .app-frozen-spacer::after {display: inline-block;content: '';position: absolute;left: 0;top: 0;bottom: 0;width: 7px;/* change this property */background-color:  #ffd800 !important;
}

The first row shows the background color, and the second row shows the bar on the left side when the user hovers over with a mouse.

A more subtle way of adding custom styling to a row is to add a colorful triangle to the corner of the record. In this rule, the triangle will only be displayed in “List” presentation style by prepending the class “.app-listview”.

.app-listview .myapp-country-usa .ui-btn::after,.app-listview .myapp-country-usa .ui-btn .app-frozen-spacer::after {display: inline-block;content: '';position: absolute;width: 24px;height: 24px;transform: rotate(45deg);/* change these properties */top: 0;margin-top: -12px;left: 0;margin-left: -12px;background-color: forestgreen;
}

Here is the result. Notice that the triangle is still visible on the selected record.

The previous example places the triangle in the top left corner. It can be easily moved to any other corner by using a combination of “top”, “left”, “bottom”, and “right” attributes, and changing the corresponding margins. The color was also changed.

.app-listview .myapp-country-usa .ui-btn::after,.app-listview .myapp-country-usa .ui-btn .app-frozen-spacer::after {display: inline-block;content: '';position: absolute;width: 24px;height: 24px;transform: rotate(45deg);/* change these properties */bottom: 0;margin-bottom: -12px;right: 0;margin-right: -12px;background-color: red;
}

The picture shows the triangle positioned in the bottom right corner.

Using Glyphicons

Many different glyphicons are included in the application. These glyphicons can be used in conjunction with CSS rules to customize your application even further.

A page that displays all glyphicons can be found at ~/touch/icons.html. Find the glyphicon that you want to use, and you can look up the corresponding class in the file “~/touch/bootstrap.css”.  It will be necessary in order to get the correct character code for the icon.

Once the correct code has been located, it can be used in a custom CSS rule. The example below will place a large orange “alert” glyphicon in the “List” presentation style.

.app-listview:not(.app-grid) .myapp-country-usa > .ui-btn::after {display: inline-block;font-family: 'Glyphicons Halflings';font-style: normal;font-weight: normal;line-height: 1;position: absolute;/* change these properties*/content: "\e209";color: orange;font-size: 8em;bottom: 5px;right: 0;padding-left: 0.5em;opacity: .25;
}

The picture below shows the result.

Glyphicons can also be used in a more subtle way. They can be placed next to any field using the “.app-field-[FieldName]” syntax. This rule will place them next to the correct grid column in the row, and the correct value in other presentation styles.

.app-grid .myapp-country-usa .app-field-CompanyName::after,.myapp-country-usa .app-field-CompanyName .app-field-data::after {display: inline-block;font-family: 'Glyphicons Halflings';font-style: normal;font-weight: normal;line-height: 1;padding-left: .5em;/* change these properties  */color: orange;content: "\e034";
}

The result is below.

Conditional styling is also supported in forms too! When the form is in read mode, the classes will be present. Make sure to add the style expressions defined at the beginning of this article to “editForm1” view of Suppliers controller.

The result can be seen below.

Code On Time release 8.5.7.0 has arrived!

The second iteration of the Model Builder has been greatly enhanced. It works faster, creates smaller models and allows quickly expanding the base query model as needed. It is now possible to “add all entities” at once.

Tables are now displayed in a more compact fashion. Only selected, primary, and foreign key columns are displayed on the diagram by default.

Models created automatically will not have more than 14 tables included.  Previous implementations of the app generator included every possible relationship with several parent levels up. The default discovery depth remains to be set to 3, but the discovery stops when 14 tables are found.  If the desired relationship is missing then right-click the corresponding foreign key column to add a table to the diagram.

Grid view style in Touch UI has been enhanced to display all fields defined in the data controller with the help of horizontal scrolling with ability to freeze columns.

Touch UI also offers exciting conditional styling options for your data.

Place pictograms next to field values in grids, lists, and forms.

Change background color of rows.

Display colorful “corners” to elegantly indicate the status of data items.

Read the tutorial to learn more about conditional styling of data in Touch UI.

Release Notes

This is the summary of the features and enhancements included in this release:

• Grid view shows all columns in Touch UI. Previously a subset of columns when displayed if the screen width was insufficient.
• Horizontal scrolling of columns is enabled in Touch UI grids.
• User interface option “Freeze” to freeze/unfreeze columns is available in Touch UI. By default the first column is frozen).
• Geolocation capturing has been enhanced and now works in Touch and Desktop UI. The client app will now store geolocation before Insert and Update to ensure that the user’s permission to track location is captured upon first attempt to edit data. Location watching starts with a 1.5 second delay to support form transitions in Touch UI.
• Lookup context is correctly passed along with the server-side requests. Both desktop and touch apps can inspect Request.LookupContextField, Request.LookupContextController, and Request.LookupContextView properties.
• Enhanced sidebar summary allows to click or tap the first field value to see all record properties. The summary is now also displayed in the context menu.
• Filtering and Sorting are now automatically enabled on formula fields created in Model Builder.
• New “more” and “less” options are displayed at the bottom of the tables on the diagram.  Tables are presented on the diagram in compact form. Only selected columns, primary, and foreign key columns are visible.
• Right-click on the foreign key column in Model Builder to connect the table to the diagram.
• It is now possible to create models for all undefined at once by selecting “add all entities” option in the menu of undefined entities.
• Discovery depth parameter is now taken into account when Model Builder creates a default model for an entity.

Coming Soon

Next release will bring about a brand new rendering engine for forms in Touch UI. It will be possible to create custom layouts of forms for variuos screen dimensions in a new Form Designer. Also a new Universal Input feature will replace the current “native” inputs of Touch UI to enable unparalleled quality and complexity of form layout presentation and keyboard-friendly and mobile-friendly data entry. 

Field type “DataView” will allow shifting definition of master-detail relationships from pages to the data controllers. Infinite depth of relationships will be possible in both “grid” and “form” views. Form Designer will allow placing “DataView” fields in categories. A custom template will be individually supported on a view level in data controllers. There will be no need to keep a template outside of the data controller definition.