Content Management System

Labels
AJAX(112) App Studio(6) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(8) OAuth Scopes(1) OAuth2(11) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(10) PKCE(2) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(178) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(80) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Content Management System
Saturday, September 2, 2017PrintSubscribe
CMS (Site Content) Configuration

Applications created with Code On Time may be configured to have a built-in CMS (Content Management System). The purpose of the CMS is to store runtime configuration of an application, which can include:

  • Dynamic HTML pages
  • Images
  • Documents
  • Scripts
  • Dynamic Access Control Rules
  • Data Controller Customization
  • Sitemaps
  • OAuth registrations
  • Workflow registrations
  • Etc…

The CMS data requires a database table called SiteContent (or SITE_CONTENT, site_content). Application generator provides a built-in facility to install the required table in the project database. Follow the instructions below to install the CMS into new or existing projects.

On the home page of the app generator, click on the project name. Select “Settings”, then press “Database Connection”. Tap the “…” button next to the Connection String input.

Opening the connection string settings.,

Under “Membership” section, press the “Add” button.

Adding membership.

Under the “Content Management System”,  press the “Add” button.

Adding the Content Management System tables.

Confirm the installation to add the required table to your database. Once complete, press “OK” to save the connection string, and press “Finish” to skip to the “Summary” page.

It is necessary to refresh the project to ensure the new pages and controllers are present. Press “Refresh”, and confirm.

Refreshing the project.

Upon completion, proceed to regenerate the app. A new page called “Site Content” will now be available to the admin account or any other user with the role “Administrators”.

Site Content page is now available to administrators.

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

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.

image

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.

image

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.

image

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

image

Change the properties of content items.

image

Select glyphicons from context menu:

image

Save the page directly to integrated content management system.

image

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

image

Month

image

Week

image

Year View on  a Small Screen

image

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

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:

Property Value
Name supplier-directory
Path js

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.

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
~/help/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.