Architecture

In OpenContent a template is composed of a number of files in a folder.
The template folders are located in /Portals/[portalid]/OpenContent/Templates

The template contains the definitions for :

Content edit form
2) Template settings edit form
Rendering

1) Content edit form

Schema : schema.json (json schema / alpaca forms)
Layout options : options.json (alpaca forms)
Localization : options.xx-XX.json (alpaca forms overide )

{
    "type": "object",
    "properties": {
        "ModuleTitle": {
            "title": "Module Title",
            "type": "string"
        },
        "Tabs": {
            "type": "array",
            "items": {
                "title": "Tab",
                "type": "object",
                "properties": {
                    "Title": {
                        "title": "Title",
                        "type": "string"
                    },
                    "Description": {
                        "title": "Description",
                        "type": "string"
                    }
                }
            }
        }
    }
}

{
    "fields": {
        "Tabs": {
            "fields": {
                "item": {
                    "fields": {
                        "Description": {
                            "type": "wysihtml"
                        }
                    }
                }
            }
        }
    }
}

More info : http://www.alpacajs.org

Available field types

Online simple form builder for shema.json and options.json generation

2) Template settings edit form

Schema : template-schema.json (json schema / alpaca forms)
Layout options : template-options.json (alpaca forms)
Localization : template-options.xx-XX.json (alpaca forms overide )

{
    "type": "object",
    "properties": {
        "Layout": {
            "title": "Layout",
            "type": "string",
            "enum": [ "tab", "pill" ]
        }
    }
}

{
    "fields": {
		"Layout": {
			"removeDefaultNone":true
		}
    }
}

More info : http://www.alpacajs.org

Available field types

Online simple form builder for shema.json and options.json generation

3) Rendering

Rendering is the fact of transforming the data and the setting entered in the edit and settings form created in step 1) and 2 to html.

- Template file : template.cshtml (razor file) or template.hbs (Handlebars file)
  It is file with the html markup. Edit data is directly accessible (in the Model variable for razor) and the settings are accessible from the Settings variabel (Model.Settings in razor).
Stylesheet file : template.css (optional)
Javascript file : template.js (optional)

many template files can be packaged in 1 template folder

<div role="tabpanel">

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

    <!-- Tab panes -->
    <div class="tab-content">
        {{#each Tabs}}
        <div role="tabpanel" class="tab-pane {{#if @first}}active{{/if}}" id="tab{{@index}}">{{Description}}</div>
        {{/each}}
    </div>

</div>

More info about Handlebars : http://handlebarsjs.com