Forms, Reports, Apps

Build and deploy rapidly. Use offline, online, on-premises.

  Blog

Blog
Saturday, May 16, 2015PrintSubscribe
“Hello World” Single Page App with jQuery Mobile

jQuery Mobile is the foundation of apps created with Code On TimeTouch 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.

A single page app created with Code On Time application generator is based on jQuery Mobile.

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.

Configuring a sample project without pages in Code On Time app generator.

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

A line-of-business app with Touch UI created with Code On Time app builder. Application uses jQuery Mobile framework for enhanced mobile-friendly user interface.

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.

Site content in a line-of-business app created with Code On Time.

User and role management screen in a line-of-business app created with Code On Time.

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

Creating a new SPA page in Project Designer of Code On Time.

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.

SPA page that can be customized in any external editor without loosing changes during code generation iterations.

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.

SPA page based on blank template in an app created with Code On Time.

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

Activating Visual Studio to modify the page of an app created with Code On Time application generator.

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.

The menu of virtual pages in an SPA app created with Code On Time line-of-business application generator.

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.

jQuery Mobile filterable listview widget in the SPA app created with Code On Time app builder.

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.

Simple content page uses jQuery Mobile CSS classes to style a link to an external page.

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.

External website displayed in an SPA app created with Code On Time.

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.

The stucture of Suppliers controller displayed in Project Explorer of Code On Time app generator.

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.

. . . . . . . . . . . . . . . . .  . . . . .  . . 
<script src="~/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.

Listview widget of jQuery Mobile displays a list of suppliers in SPA app created with Code On Time.

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

Filterable widget of jQuery Mobile in action in an app created with Code On Time.

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.

jQuery Mobile menu drawer/panel  opened in an SPA app created with Code On Time.

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.

jQuery Mobile responsive design shines through in the app created with Code On Time.

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>
<
div id="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.

JSON request to retrieve a list of suppliers displayed in IE11 development tools.

{"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.

Inspecting JSON response returned from the server components of the SPA app created with Code On Time.

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.

The structure of the application created with Code On Time displayed in Solution Explorer of Visual Studo.

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

Code On Time deployment folder with published application.

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.

The structure of the published application created with Code On Time line-of-business application generator displayed in Windows Explorer.

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.

Copying two data controllers to clipboard in Project Explorer of Code On Time app builder.

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

Pasting data controllers on a page in Project Explorer of Code On Time.

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

Establishing a master-detail relationship between the list of suppliers and the list of products in SPA page of an app created with Code On Time.

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.

A master-detail configuration of two data views on single page of SPA.

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

A responsive grid of suppliers in the app created with Code On Time.

Select a supplier to see the linked products.

Master-detail view of a supplier and linked products in the applicaiton created with Code On Time line-of-business app generator.

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.

List view of suppliers in the app created with Code On Time.

Map view of suppliers in the app created with Code On Time.

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:

A bootstrap content page in the app created with Code On Time. Touch UI application framework combines together jQuery Mobile and Bootstrap.

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!

Thursday, May 14, 2015PrintSubscribe
Integrated Content Management System for a Line-of-Business Application

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.

image   image

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.

image

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.

image

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.

image

A confirmation window will be displayed.

image

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.

image

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.

image

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.

image

Here is the same project rendered with Desktop user interface.

image

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.

`image

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

image

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

image

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:

Property Value
File Name welcome
Path public
Content Type text/html
Text
<!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.

image

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

image

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.

image

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.

Property Value
File Name categories
Path pages
Content Type text/html
Text
<!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>
Roles Users
Role Exceptions Administrators

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.

image

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.

image

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

image

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:

Property Value
File Name custom-menu-items
Path sys/sitemaps
Text

+ Home

++ Photo of a Bear
~/images/animals/koala.jpg

++ Welcome Message
~/public/welcome

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 in the menu item Home.

image

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.

image

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.

image

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.

Property Value
Data tap to select the customized data controller file
File Name Products.xml
Path sys/controllers
Users user

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

image

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

image

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

image

Smart charts are also aware of the new labels.

image

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:

Property Value
File Name Products.Alter
Path sys/controllers
Text
select-field("ProductName")
.set-label("Product(1)"); select-field("SupplierCompanyName")
.set-label("Supplier(2)"); select-field("CategoryCategoryName")
.set-label("Category(3)") .set-length("25");
Users admin

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.

image

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.

Property Value
File Name Employees.Alter
Path

sys/controllers

Text

select-view("grid1")
    .create-data-field("Photo")
    .create-data-field("Notes")
        .set-text-mode("Note");

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

image

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

image

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.

image

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:

Property Value
File Name restrict-user-by-categories
Path sys/dacl
Text
Field: CategoryID

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

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.

image

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

image

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

image

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

image

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.

image

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.

image

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.

image

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

image

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:

Property Value
File Name test
Path sys/workflows
Text test

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.

image

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.

Thursday, May 14, 2015PrintSubscribe
Maintenance Release

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.