Components

TemplateModel

"templates": {
  "TemplateModel": {
    "_selectedTemplate": "<default_template_name>",
    "_templates": [
        <template_definition>, ...
    ]
  }
}

Type <template_definition>

Sample:

    "_templates" : [{
      "name":"seasons",
      "title" : "Seasons",
      "location" : "templates/templates"
    }]

Structure:

...
    "_templates" : [{
      "name":"<name>", //mandatory
      "title": "<title>", //displayed in the template selector
      "description": "<description>", //used as tooltip in the template selector
      "location": "<location_folder>", //the location of the folder containing the template folder
      "requiresCSS": <false|true>, //defines if a CSS file is required by this template.
      "requires": ["<require>"], //requirements needed to be loaded before the template is rendered
      "domId": "<id>", //ID of the DOM element inside the current HTML page that should be interpreted as template
      "i18n": ["<name>"], // list of i18n names
      "templateString": "<template>", // template layout definition
      "layouts": ["<layout>"], // sub-layout definitions
      "widgets" : [   // widget definitions
        <widget>, ...
      ]
    }]
...

The properties i18n, templateString, layouts, requireCSS, requires are typically set by a template developer in a <templatename>.js file and do not need to be configured by an app designer.

Property Overview

The following table gives a brief overview of all properties. See the following section for more details.

Property Details

name

The name of the template.

title

The title for the template, displayed in the template selector.

description

Default: ""

A description for the template, used as tooltip in the template selector.

location

Default: templates/templates

The location of the folder containing the template folder.

This is an AMD path, this means that the name templates is a registered AMD prefix. The default location resolves to the templates folder inside the templates bundle.

If a template is provided inside a custom bundle, the location is typically <bundlename> if the template folders are located directly inside the custom bundle.

requiresCSS

Default: true

Defines if a CSS file is required by this template.

If true the file <templatename>.css is loaded from the template location.

requires

Array of requirements needed to be loaded before the template is rendered.

This is rarely necessary, because requirements should better be listed inside the template JavaScript file.

Sample: requires : ["dijit/layout/TabContainer"]

domId

ID of the DOM element inside the current HTML page that should be interpreted as template.

i18n

Default: []

List of i18n names, for example ["bundles"] which means that the file /nls/bundle.js is present in the template folder.

templateString

The template layout definition as string.

layouts

Default: []

Sublayout definitions.

widgets

Default: []

An array of <widget>s.

Type <widget>

The widgets property of a template object provides a way to customize window definitions and redefine widgetRoles to template attach points.

General widget declaration:

...
    "_templates" : [{
      "name":"seasons",
      ...
      "widgets" : [
        {
            // required:
            "widgetRole" : "<name of a widget role>",
  
            // optional:
            "attachTo": "<attachpoint name in template>",
     
            // optional: additional css-class that is added to the widget's domNode.
            // if no cssClass is defined, the string of widgetRole is added as css class to the widget's domNode.
            "cssClass": "someCssClass",
     
            // additional properties registered at the widget before it is placed in the template
            // what properties are available depends on the kind of the 'attachTo' target.
            // for example if the 'attachTo' target is a dijit/layout/BorderContainer, the property "region" has to be defined.
            "props" : {            
                // can be used to order multiple widgets placed into the same 'attachTo' target
                "layoutIndex" : <number>
            },
            // optional: the widget should be displayed as window
            // this can be string or a json object
            "window" : {
                // list properties of a window, such as marginBox and title.
            },
  
            // optional:
            // this can be string or a json object
            "windowevents" : {
                // event mappings, such as "onClose" : "aMethodInTheWidget"
            },
  
            // optional default is false
            // flag which defines that any configuration provided by the template or bundles should be ignored
            // if false the settings are merged with other available settings
            "nomerge" : true,
  
            // optional
            // the name of the template for which this widget definition should be effective
            // this property makes only sense if the definition is part of the "layout-widgets" property of a bundle
            // input may be a string or an array of strings
            "template": "<name of a template>" | ["<name of template 1>", "name of template 2"],
             
            // optional
            // the name of the sub layout for which this widget definition should be effective
            // input may be a string or an array of strings
            "sublayout": "<name of a sublayout>" | ["<name of sublayout 1>", "name of sublayout 2"]
        }
      ] 
    }]
...