Content Management System

Content Management System
Monday, June 1, 2015PrintSubscribe
Responsive Grids, User Identity, and Preview of “Live” Content Editing

Code On Time release 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="" 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 View on  a Small Screen


Saturday, May 16, 2015PrintSubscribe
Create a Single Page App Without Changing Your Project

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.

An example of a data page in line-of-business app created with Code On Time.  An example of a content page in line-of-business app created with Code On Time.

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.

Default Site Content management screen for integrated CMS.

Create a new content item with the following properties:

Property Value
Name supplier-directory
Path help
Content Type text/html


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

Add the second content item next:

Property Value
Name supplier-directory
Path js


(function () {
    var supplierList = $('#supplier-list');
    $('#spa1').on('', function () {
            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);
                    $('<p class="ui-li-aside"/>').appendTo(a).text(supplier.Phone);
                    $('<p/>').appendTo(a).text(supplier.ContactName + ' | ' +
                        supplier.Address + ', ' +
                        supplier.City + ', ' +
                        (supplier.Region || '') + ' ' + supplier.PostalCode + ', ' +
        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.

Custom SPA implemented filterable Supplier Directory in a line-of-business app created with Code On Time.

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:

Property Value
Name supplier-directory-menu-item
Path sys/sitemaps
Text + Home

++ Supplier Directory

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.

A dynamic custom menu item in the navigation system of application created with Code On Time.

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.

Saturday, May 16, 2015PrintSubscribe
Adding Integrated CMS to an Existing Application

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.

Application without integrated content management system.

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.

Activate connection string settings to add integrated CMS to the project.

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

Selecting a security system for integrated CMS.

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

Confirmation of succesful installation of CMS in the project database.

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.

Refreshing project in the app created with Code On Time.

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

Content management system table SiteContent is visible in the list of existing data controllers in the app created with Code On Time.

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.

Changing tables/views included in the project.

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

Selecting SiteContent database table for a project that will have integrated content management system.

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.

A custom page that allows managing content stored in integrated CMS.

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

Content management screen of integrated CMS.

Upload test content to see CMS in action.

Uploading sample content to integrated CMS of an app created with Code On Time.

The first content item stored in integrated CMS of an app created with Code On Time.

Try the content in the browser.

Sample content stored in CMS is displayed in the browser.