Page tree
Skip to end of metadata
Go to start of metadata

Knowing how to create custom templates is a fundamental front end skill and one that you need to be very familiar with when working with Magnolia CMS.

Magnolia 5.4 brings the introduction of YAML as a configuration open for templates (and content apps). You can learn more about YAML in Official Documentation for 5.4

Function of a Template Definition

What is a template definition?

A definition just means 'configuration'. The Java interface  TemplateDefinition  is the base interface of every page and component definition. Because the  AreaDefinition extends the  TemplateDefinition , the same configurations are possible on areas as on pages and component definitions. TemplateDefinition  such as Pages and Components are registered within a module's node templates.

Creating a template

What is the minimum required configuration for a template?

To be renderable a TemplateDefinition must have.

  • templateScript What script to render the output with. The path to the scripts start within the jar module, absolute path after src/main/resources.
  • renderType What renderer to use, e.g. Freemarker, JSP, stk.
  • dialog  Strictly speaking this is optional - but you will need a dialog to create and edit the content. The dialog is referenced with: module-name:path-to-dialog

As best practice the template definition should have:

  • title The title of the definition the author sees, e.g Article, News
  • description A description providing information to the author about the page or component.

Additionally important configuration possibilities on a TemplateDefinition are:

  • modelClass This enables you to attach a Java model class to the TemplateDefintion, see RenderingModelImpl.
  • areas These define a collection of components to add.
  • parameters providing parameters as definition driven constants usable within the scripts and model class.

Not every template defiiniton will feature all of the possible configuration options. Here is a typical STK template definition (stkArticle):


Every template definition is capable of auto generating content. You can enable auto generation of content by configuring an autoGeneration node within the area definition.  An autoGeneration configuration expects a generator class defined. 

Is there a default generator?

The default generator implementation provided is the CopyGenerator.  In turn, the copy generator expects a node content, in order to create a copy process. The copy generator will copy the sub content of the node content. The content is copied 1:1 except for two values:

  • nodeType is used as jcr:primaryType on creation of the node
  • templateId is used to set the value mgnl:template into the metaData of the created node. 

Any kind of auto generator class could be plugged in, for example a 'BootstrapGenerator'. With this auto copy mechanism, a complete page structure with all areas and components could be auto created. STK is primarily used for creating the main component in feature pages.

Learn more

  • No labels

1 Comment

  1. Exercises

    Serious / Pro

    Exercise 1 - Extend and the add a component to a page

    Part 1 - Extending

    1. Add a new class.
    2. Set up a template script.
    3. Assemble the component.

    Part 2 - Adding the component to a page

    1. Add the new component to the content area.
    2. Enter sample data. Notice that the new component has an ID for ease of identification.    
    3. Add some style information for specialQuote and then reload the page with the new component. (Note that the divID that enables you to isolate the component from others.)
    4. Reload the page with the new component. 

    Exercise 2  - Add different areas types to a template

    To a template of your choice, add two more areas of different types:

    • list
    • single
    • noComponent

    Add the CMS area tags for both of the areas to your page script and render them.