13

Open Content is a great tool giving inexperienced users a simple solution to maintaining small amounts of content.

Consider the scenario; you build a nice new website for a client who has no technical knowledge of websites. On launch day it is pixel perfect and the client is happy, hopefully. A couple of days later you get a call to say the website is broken. You go to the website and discover that the user has edited a HTML module, in source mode of course, and removed some mark-up; what a mess. All he wanted to do was add another line in a table.

How much easier would it be if all he had to do was click a + icon, enter the text he required into a nice form and click save. That is were Open Content helps and here I will show how to create such a template.

Requirement

Create a template to allow a website admin build a tabbed element with a table on each tab. Each table will consist of rows containing columns for Description and Dates.

Template

Open Content does not, at this time, have a template to achieve this. However, it does have a template for tabs. We can use this template as the basis for a new template.

Start by placing an instance of Open Content on a page. It should look like:

SNAGHTML133c5610

 

Choose Create a new template, marked in yellow above.

 

SNAGHTML133db4b6

 

Give your new template a name and click Save.

 

Schema

A schema is what drives Open Content. The schema defines your data structure. In this example the schema contains a Module Title and an array of Tabs. Each Tab contains a table with an array of RowItems. Each RowItem consists of two columns, Description and Dates.

Open Content uses JSON notation to define a schema. The schema for the example is shown below.

{
     "type": "object",
     "properties": {
         "ModuleTitle": {
             "title": "Module Title",
             "type": "string"
         },
         "Tabs": {
             "type": "array",
             "items": {
                 "title": "Tab",
                 "type": "object",
                 "properties": {
                     "tabName": {
                         "title": "Tab Name",
                         "type": "string"
                     },
                     "RowItems": {
                         "type": "array",
                         "items": {
                             "title": "Row Item",
                             "type": "object",
                            "properties": {
                                 "description": {
                                     "title": "Description",
                                     "type": "string"
                                 },
                                 "dates": {
                                         "title": "Dates",
                                         "type": "string"
                                 }
                             }
                         }
                     }
                 }
             }
         }
     }
}

 

Quite often errors in Open Content are the result of incorrectly formed JSON. Usually a missing { or }. A useful site for checking a schema is http://jsonlint.com/

To edit a schema choose Edit Template Files from the module’s Actions menu.

SNAGHTML1346bb04

SNAGHTML13483e77

 

Because a new template was created from an existing BootstrapTabs template the schema will need to be updated. Copy the schema above and paste it into the Schema text box. Click Save.

Building a Template

The next step is to build the template that will be used to display the data. Select Template from the dropdown. Once again the template shown will be for BootstrabTabs and will need to be updated to reflect the new schema.

The surrounding pair of {{#each Tabs}}  …  {{/each}} will loop through the data and for each Tab will insert an li with tabName from the schema.

Note: Because this template was created by copying an existing template there is an important change required. The original template BootstrapTabs had a Layout option of Tabs or Pills. This is used in the template to set a class of nav_tabs or nav-pills depending upon the setting. This can be seen on the ul tag as class="nav nav-{{Settings.Layout}}s". In the new template only tabs will be used

  
<div role="tabpanel">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        {{#each Tabs}}
      <li role="presentation" {{#if @first}}class="active"{{/if}} ><a href="#tab{{@index}}" aria-controls="tab{{@index}}" role="tab" data-toggle="tab">{{tabName}}</a></li>        
        {{/each}}
    </ul>

    <!-- Tab panes –>
    <div class="tab-content">

    </div>
</div>

 

Click Save & Close then click Edit Content to see the data entry form.

SNAGHTML1380aa7f

Enter a title for the module and then click the + icon to add tabs.

SNAGHTML1381f109

 

Enter a Tab name.

To add more tabs click the image icon just above the tab to the right. A UI of nested boxes shows the nesting of Row Items within Tabs.

Tabs and Row Items may be ordered using the SNAGHTML138857f3and SNAGHTML13888481arrows.

Add Tab One, Tab Two and Tab Three and you should see

SNAGHTML13b97253

 

Next add the html to the template for the table on each tab.

{{#each Tabs}} 
<div role="tabpanel" class="tab-pane {{#if @first}}active{{/if}}" id="tab{{@index}}">
    <div class="table-responsive">
        <table class="table">
	{{#each RowItems}}
            <tr>
		<td>{{Description}}</td>
		<td>{{Dates}}</td>
	    </tr>
	{{/each}}
	</table>
    </div>
</div>
{{/each}}

 

Once again {{#each Tabs}} is used to iterate through each tab in the array and with in each tab {{RowItems}} is used to iterate through each row in the array of rows.

The result is a set of tabs with a table on each that makes life easy for site admins:

SNAGHTML13c0dabf

 

Further Reading:

http://alpacajs.org/

http://getbootstrap.com/components/#nav-tabs

http://handlebarsjs.com/

Actions: E-mail | Permalink |