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

Good to know :

Template can manage single or multiple documents (defined in the manifest).
Multiple documents can be indexed or not for search, filtering, sorting, paging (defined in the manifest).

The template contains the definitions for :

Content edit form
Template settings edit form
Rendering
Manifest

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
Remark : This files can now be generated by the form builder.

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

Remark : This files can now be generated by the form builder.

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 this file that contains the html markup. Edit data is directly accessible (in the Model variable for razor) and the settings are accessible from the Settings variable (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

4) Manifest

Manifest is only required for multi items templates

More info about Manifest