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
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

Available field types

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

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