Creating Page Templates

You are reading the AEM 6.2 version of Creating Page Templates.
This documentation is also available for the following versions:  AEM 6.3 

When creating a page you need to select a template; this will be used as the basis for creating the new page. The template defines the structure of the resultant page, any initial content and the components that can be used (design properties).

With the template editor, creating and maintaining templates is no longer a developer-only task. A power-author can be involved too. Developers are still required to setup the environment, create client libraries and create the components to be used, but once these basics are in place the author has the flexibility to create and configure templates without a development project or iteration.

The template console allows your (template) authors to:

  • Create a new template (either new or by copying an existing template).
  • Manage the lifecycle of the template.

The template editor allows your (template) authors to:

  • Add (available) components to the template and position them on a responsive grid.
  • Pre-configure the components.
  • Define which components can be edited on the resultant pages (created from the template).

Caution

The Templates console and editor are only available with the touch-optimized UI. Pages and templates created with the Templates console are not meant to be used with the classic UI and such use is not supported.

Note

Although not identical, adding components and assets to a template has many similiarities to comparable actions when page authoring.

Before You Start

The following points are important before you start:

Roles

Creating a new template (using the Templates console and the template editor) requires collaboration between:

  • Admin:
    • Creating a new folder for templates requires admin rights.
  • Developer:
    • Concentrate on the technical/internal details; need experience of the development environment.
    • Provide the template author with some required information.
  • Template Author:
    • Specific authors that are members of the group:
          template-authors
      This allocates the required privileges and permissions.
    • Can configure the use of components and other high level details. Needs:
      • Experience of some technical details; for example, using patterns when defining paths.
      • Technical information - from the developer.

Due to the nature of some tasks (such as creating a folder) a development environment is needed, and this requires knowledge/experience.

Template Types

AEM now offers two basic types of templates:

  • Editable Templates

    • Can be created and edited by your authors using the Template console and editor. The Template console is accessible in the General section of the Tools console (only available in the touch-optimized UI).
    • After the new page is created a dynamic connection is maintained between the page and the template; this means that changes to the template structure and/or locked content will be reflected on any pages created with that template. Changes to the unlocked (i.e. initial) content will not be reflected.
    • Uses content policies (you can define these from the template editor) to persist the design properties (does not use Design mode within the page editor).
  • Static Templates

    • These templates have been available for several versions of AEM.
    • They are provided by your developers, so cannot be created or edited by authors.
    • Are copied to create the new page, no dynamic connection exists after this (though the template name is registered for information).
    • Use Design Mode to persist design properties.

Using a Template to Create a Page

When using a template to create a new page there is no visible difference and no indication of the type of template being used.

Creating and Managing Templates

When creating a new editable template you:

Note

The Allowed Templates are often pre-defined when your website is initially set up.

Caution

The template console and editor are only available with the touch-optimized UI.

Creating a Template Folder - Admin

In a standard AEM instance the global folder already exists in the template console. This holds default templates and acts as a fallback if no policies and/or template-types are found in the current folder. You can add your default templates to this folder, or create a new folder to hold your customized templates; for example, site and/or language specific templates.

When creating folders within the template console, you will want to define the following properties:

  • Title
    A title for the folder, that will be shown in the console.
  • Name
    The folder name, used in the URL.

Template types and policies are inherited across all folders according to the following order of precedence:

  1. The current folder.
  2. Parent(s) of the current folder.
  3. /conf/global
  4. /apps
  5. /libs

A list of all allowed entries is created. If any configurations overlap (path/label), only the instance closest to the current folder is presented to the user.

The new folder should be created under /conf:

  1. A new folder (under /conf) can be created for your instance either programmatically, or with CRXDE Lite.

    The following structure must be used:

    /conf
        <your-folder-name> [sling:Folder]
            settings [sling:Folder]
                wcm [cq:Page]
                    templates [cq:Page]
                    policies [cq:Page]
            

    Code samples are intended for illustration purposes only.

  2. You can then define the following properties on the folder root node:

        <your-folder-name> [sling:Folder]

    • Name: jcr:title
      • Type: String
      • Value: The title (for the folder) you want to appear in the Templates console.
  3. In addition to the standard authoring permissions and privileges (e.g. content-authors) you now need to assign group(s) and define the required access rights (ACLs) for your authors to be able to create templates in the new folder. See Access Right Management for full details.  

    The template-authors group is the default group that needs to be assigned.

    Path Role / Group Permissions - Author Environment
    Permissions - Publish Environment
    Description
    /conf/<your-folder>/settings/wcm/templates template-authors
    read, write, replicate read, write, replicate In a standard installation the template-authors group is empty.
    /conf/<your-folder>/settings/wcm/policies everyone read read  

    Caution

    The template-authors group is only for users that must be able to create new templates.

    Editing templates is very powerful and if not done properly exiting templates can be broken. Therefore this role should be focused and only include qualified users.

Creating a New Template - Author

  1. Open the Templates console (via Tools, General) then navigate to the required folder.

  2. Select Create, followed by Create Template to open the wizard.

  3. Pick a Template Type, then select Next.

  4. Complete the Template Details:

    • Template Name
    • Description

     

  5. Select Create. A confirmation will be shown, select Open to start editing the template or Done to return to the template console.

    Note

    When a new template is created it is marked as Draft in the console, this indicates that it is not yet enabled.

Defining Template Properties - Author

A template can have the following properties:

  • Details
    • Image
      • You can upload an image to be used as a thumbnail for template selection; for example, in the Create Page wizard.
    • Title
      • A title, used for identifying the template; for example, in the Create Page wizard.
    • Description
      • An (optional) description to provide more information about the template and its use; for example, in the Create Page wizard.

To view and/or edit the properties:

  1. In the Templates console, select the template.

  2. Select View Properties from the toolbar or quick options to open the dialog.

    Note

    When a template has been enabled/disabled this is indicated in the console.

  3. You can now view or Edit the template properties.

Enabling and Allowing a Template - Author

To be able to use a template when creating a page you need to perform both these tasks:

  • Enable: to make it available for use when creating pages.
  • Allow: to specify the content branches where the template can be used.

Enabling a Template - Author

A template can be enabled (or disabled) to make it available (or not) in the Create Page wizard.

Caution

Once a template is enabled a warning will be displayed when an author starts to update the template further. This is to inform the user that the template might be referenced, so any changes might affect the pages referencing the template.

Note

You can Disable a template in a similar manner.

  1. In the Templates console, select the template.

  2. Select Enable from the toolbar, and again in the confirmation dialog.

    Note

    When a template has been enabled/disabled this is indicated in the console.

  3. You can now use your template when Creating a New Page, though you will probably want to edit the template according to your requirements.

Allowing a Template - Author

A template can be enabled (or disabled) to make it available (or not) in the Create Page wizard.

Note

Often the allowed templates are pre-defined for your entire site when it is set up.

  1. Open the Page Properties for the root page of the branch where you want the template to be available.

  2. Open the Advanced tab.

  3. Under Template Settings use Add field to specify the path(s) to your template(s).  

    The path can be explicit or use patterns; for example:

    /conf/<your-folder>/settings/wcm/templates/.*

    The order of the paths is irrelevant, all paths will be scanned and any templates retrieved.

    Note

    If the Allowed Templates list is left empty then the tree will be ascended until a value/list is found.

    See Template Availability for Static Templates - the principles for allowed templates remain the same.

    Note

    This is often defined when the website is setup. The path will probably be supplied by the developer.

Publishing a Template - Author

As the template is referenced when a page is rendered, the (fully configured) template needs to be published so that it is available on the publish environment.

  1. In the Templates console, select the template.

  2. Select Publish from the toolbar to open the wizard.  

  3. Select the Content Policies to be published in tandem.

  4. Select Publish from the toolbar to complete the action.

Editing Templates

When creating (or editing) a template there are various aspects that you can define:

  1. Structure

    Components added here cannot be moved/removed from resultant pages by the page authors. If you want page authors to be able to add and remove components to resultant pages, then you need to add a paragraph system to the template.

    When components are locked you can add content, this cannot be edited by page authors. You can unlock components to allow you to define Initial Content.

    Note

    In structure mode, any components that are the parent of an unlocked component cannot be moved, cut or deleted.

  2. Initial Content

    When a component has been unlocked you can define the initial content that will be copied to the resultant page(s), created from the template. These unlocked components can be edited on the resultant page(s).

    Note

    In initial content mode (and on the resultant pages), any components (unlocked) that have an accessible parent (e.g. components within a layout container) can be deleted.

  3. Layout

    Here you can predefine the template layout for the required device formats.

  4. Page Policies

    To connect predefined page policies to the page. These page policies define the various design configurations.

The Mode selector in the toolbar allows you to select and edit the appropriate aspect of the template:

file

While the Page Policy option on the Page Information menu allows you to select the required page policies:

file

Caution

If an author starts to edit a template that has already been enabled a warning will be displayed. This is to inform the user that the template might be referenced, so any changes might affect the pages referencing the template.

Editing a Template - Structure - Author

In Structure mode you define components and content for your template:

  • Components defined in the template structure cannot be moved on, nor deleted from, any resultant pages.
  • If you want page authors to be able to add and remove components add a paragraph system to the template.
  • Components can be unlocked (and locked again) to allow you to define Initial Content.
file

In Structure mode of the template editor:

Note

Although not identical, adding components and assets to a template has many similiarities to similar actions when page authoring.

  • Add components

    There are several mechanisms for adding components to the template:

    • From the Components browser in the side panel.
    • By using the Insert Component option (+ icon) available on the toolbar of components already on the template or the Drag components here box.
    • By dragging an asset (from the Assets browser in the side panel) directly onto the template to generate the appropriate component in situ.

    Once added, each component is marked with:

    • a border
    • a marker to show the component type
    • a marker to show when the component has been unlocked

    Note

    When you add a (out-of-the-box) Title component to the template it will contain the default text structure.

    If you change this, and add your own text, then this updated text will be used when a page is created from the template.

    If you leave the default text (structure) then the title will default to the name of the subsequent page.

  • Component Actions

    Take actions on the components once they have been added to the template. Each individual instance has a toolbar that allows you to access the available actions, the toolbar is dependent on the component type.

    file

    it can also be dependent on actions taken; for example, when a policy has been associated with the component, the design configuration icon becomes available.

  • Edit and Configure

    With these two actions you can add content to your components.

  • Border to indicate Structure

    When working in Structure mode an orange border indicates the component currently selected. A dotted line also indicates the parent component.

    For example, in the screenshot below the Text component is selected, within a Layout Container (responsivegrid).

    file
  • Content Policy and Design Details

    Create a content policy, or select an existing one, for a component. This allows you to define the design details:

    Note

    This is compulsory for container components as it enables you to define components that will be available in the container.

    file
    file

    Once you have created or selected a policy the design icon becomes visible, allowing you to edit the design details held within the policy:

    file

    The design details are specific to the component type; for example, for an Image they are composed of the width and height for both the minimal and maximal sizes, whereas for a Layout Container, you can define the list of components allowed within the container.

    file

    Note

    The design details are equivalent to the design dialogs accessible to page authors when using Design Mode.

  • Unlock/Lock components

    You unlock/lock components to define whether the content is available for change in Initial Content mode.

    When a component has been unlocked:

    • An open padlock indicator is shown in the border.
    • The component toolbar will be adjusted accordingly.
    • Any content already entered will no longer be shown in Structure mode (as it constitutes Initial Content it is only visible there).
    • The parents of the unlocked component cannot be moved, cut or deleted.
    file

    This includes unlocking container components so that further components can be added, either in Initial Content mode or on resultant pages. If you have already added components/content to the container before unlocking it, then these will no longer be shown when in Structure mode (they will be shown in Initial Content mode), only the container component itself will be shown, together with its list of Allowed Components:

    file
  • Relationship to Existing Pages

    If the structure is updated after any resultant pages have been created, then these pages will reflect the changes.

Editing a Template - Initial Content - Author

Initial Content mode is used to defined content that will appear when a resultant page is first created, it can then be edited by page authors.

Although all content created in Structure mode is visible in Initial Content, only components that have been unlocked can be selected and edited.

  • Unlocked components that are available for editing are marked. When selected they have a blue border:

    file
  • Unlocked components have a toolbar allowing you to edit and configure the content:

    file
  • If a container component has been unlocked (in Structure mode) then you can add new components to the container (in Initial Content mode). Components added in Initial Content mode can be moved on or deleted from resultant pages.

    You can add component using either the Drag components here area, or the Insert New Component option from the toolbar of the appropriate container:

    file
    file
  • If the initial content is updated after any resultant pages have been created, then these pages will not be affected.

Editing a Template - Layouting - Author

You can define the template layout for a range of devices. Responsive layouting for templates operates as it does for page authoring.

Note

Changes to the layout will be reflected in Initial Content mode, but no change is seen in Structure mode.

file

Editing a Template - Page Policies - Author/Developer

Using the Page Policy option (on the Page Information menu) you can apply a content policy to either the template or resultant pages. This defines the content policy for the main paragraph system on the page.

Note

The template author actually specifies the page policy on the template, but they will need to get details of the appropriate client-side libraries from the developer.

  1. From the template editor, select Page Information from the toolbar, then Page Policy to open the dialog.

  2. In the dialog you can select/unselect the page policy you want applied to pages created with this template.

    file
  3. Confirm your selection with Done (the tick icon).

Editing a Template - Page Design - Author/Developer

Using the Page Design option (on the Page Information menu) you can define the required client-side libraries on the Page Design dialog. These client-side libraries include stylesheets and javascript scripts to be loaded with the template and resultant pages.

  1. From the template editor, select Page Information from the toolbar, then Page Design to open the dialog.

    file
  2. Specify the client-side libraries you want applied to pages created with this template. Add fields and define their relative position as necessary.

    Note

    Details of the clientlibs should be supplied by the developer.

  3. Confirm your definitions with Done (the tick icon).

Editing a Template - Initial Page Properties - Author

Using the Initial Page Properties option (on the Page Information menu) you can define the initial page properties to be used when creating resultant pages.

  1. From the template editor, select Page Information from the toolbar, then Initial Page Properties to open the dialog.

  2. In the dialog you can define the properties you want applied to pages created with this template.  

    file
  3. Confirm your definitions with Done (the tick icon).

Best Practices

When creating templates you should consider:

  1. The impact of changes to the template once pages have been created from that template.

    Here is a list of the different operations possible on templates, together with how they affect the resultant pages:

    • Changes to the structure:
      These are immediately applied to the resultant pages (publication of the changed template is still needed for visitors to see the changes).
    • Changes to content policies and design configurations:
      These apply immediately to the resultant pages (publication of the changes is needed for visitors to see the changes).
    • Changes to the initial content:
      These only apply to pages created after the changes to the template.
    • Changes to the layout:
      Depending on whether the modified component is part of:
      • structure-only - applied immediately
      • contain initial content - only on pages created after the change

    Danger zone:

    • Locking or unlocking components on enabled templates:
      This can have side-effects, as existing pages can already be using it. Typically:
      • unlocking components (that were locked) will be missing on existing pages
      • locking components (that were editable) will hide that content from being displayed on the pages

    Note

    Therefore, AEM gives explicit warnings when changing the lock status of components on templates that are no longer drafts.

  2. Creating your own folders for your site-specific templates.

  3. Publish your templates from the Templates console.

Any questions?

Have a question about this or any other AEM topic? Ask our Community.
Learn more about AEM topics on our help hub.
Was this helpful?

By submitting your feedback, you accept the Adobe Terms of Use.

Thank you for submitting your feedback.