Creating Page Templates creating-page-templates

Creating a template requires collaboration. For this reason the Role is indicated for each task.

Depending on how your instance is configured, AEM now provides two basic types of template. This does not impact how you actually use a template to create a page, but it does impact the type of template you can create and how a page relates to its template.

Admin:

• Creates a new folder for templates requires admin rights.

• Such tasks can often also be done by a developer

Developer:

• Concentrates on the technical/internal details
• Needs experience with the development environment.
• Provides the template author with necessary information.

Template Author:

• This is a specific author who is member of the group template-authors

  • This allocates the required privileges and permissions.

• Can configure the use of components and other high level details which requires:

  • Some technical knowledge

    • For example, using patterns when defining paths.

  • Technical information from the developer.

Editable Templates

• Can be created and edited by template authors using the Template console and editor. The Template console is accessible in the General section of the Tools console.

• 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 (that is, initial) content will not be reflected.

• Use content policies, which you can define these from the template editor, to persist the design properties. Design mode within the page editor is no longer used for editable templates.

Static Templates

• Static templates have been available for several versions of AEM.
• They are provided by your developers, so they cannot be created or edited by authors.
• Are copied to create the new page, but no dynamic connection exists after this (though the template name is registered for information).
• Use Design Mode to persist design properties.
• Because editing static templates is the exclusive task of a developer, see the developer document Page Templates - Static for more information.

Use the Template console. This is available in the General section of the Tools console.

• Or directly at: https://localhost:4502/libs/wcm/core/content/sites/templates.html/conf

Can create a folder for the templates if necessary

Create a template, which is initially empty

Define additional properties for the template if necessary

Edit the template to define the:

• Structure - Predefined content that cannot be changed on pages created with the template.
• Initial Content - Predefined content that can be changed on pages created with the template.
• Layout - For a range of devices.
• Styles - Define the styles to be used with the template and its components.

Enable the template for use when creating a page

Allow the template for the required page or branch of your website

Publish the template to make it available on the publish environment

Image

• Image to be used as a thumbnail of the template to aid selection such as in the Create Page wizard.

  • Can be uploaded
  • Can be generated based on the template content

Title

• A title used for identifying the template such as in the Create Page wizard.

Description

• An optional description to provide more information about the template and its use, which can be seen for example, in the Create Page wizard.

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, which cannot be edited by page authors. You can unlock components to let you define Initial Content.

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 resulting page(s).

Layout

Here you can predefine the template layout for the required device formats. Layout mode for template authoring has the same functionality as the Layout mode for page authoring.

Page Policies

Under page policies you can connect predefined page policies to the page. These page policies define the various design configurations.

Styles

The Style System allows a template author to define style classes in the content policy of a component so that a content author is able to select them when editing the component on a page. These styles can be alternative visual variations of a component, making it more flexible.

See the Style System documentation for more information.

Components defined in the template structure cannot be moved on a resulting page nor deleted from any resulting 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 let you define initial content.

The design policies for the components and page are defined.

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

Component Actions

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

It can also be dependent on actions taken such as when a policy has been associated with the component, then 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).

Policy & Properties (General)

The content (or design) policies define the design properties of a component. For example, the components available or minimum/maximum dimensions. These are applicable to the template (and pages created with the template).

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

The configuration window is divided in two.

• In the left side of the dialogue under Policy, you have the ability to select an existing policy or select an existing one.
• In the right side of the dialogue under Properties, you can set the properties specific to the component type.

The properties available are dependent on the selected component. For example, for a text component the properties define the copy and paste options, formatting options, and paragraph style among other options.

Policy

The content (or design) policies define the design properties of a component. For example, the components available or minimum/maximum dimensions. These are applicable to the template (and pages created with the template).

Under Policy you can select an existing policy to apply to the component via the drop-down.

A new policy can be added by selecting the add button next to the Select policy dropdown. A new title should then be given in the Policy Title field.

The selected existing policy in the Select policy dropdown can be copied as a new policy using the copy button next to the dropdown. A new title should then be given in the Policy Title field. By default the copied policy will be titled Copy of X, where X is the title of the copied policy.

A description of the policy is optional in the Policy Description field.

In the Other templates also using the selected policy section, you can easily see which other templates use the policy selected in the Select policy dropdown.

Properties

Under the Properties heading you can define the settings of the component. The heading has two tabs:

• Main
• Features

Main

On the Main tab, the most important settings of the component are defined.

For example, for an image component the allowed widths can be defined along with enabling lazy loading.

If a setting allows for multiple configurations, click the Add button to add another configuration.

To remove a configuration, click the Delete button located to the right of the configuration.

To remove a configuration, click the** Delete** button.

Features

The Features tab lets you enable or disable additional features of the component.

For example, for an image component you can define the cropping proportions, allowed image orientations, and if uploads are allowed.

Policy & Properties (Layout Container)

The policy and properties settings of a layout container are similar to the general usage, but with some differences.

The configuration window is divided in two, just as in the general usage of the window.

Policy

The content (or design) policies define the design properties of a component. For example, the components available or minimum/maximum dimensions. These are applicable to the template (and pages created with the template).

Under Policy you can select an existing policy to apply to the component via the drop-down. This functions just as it does in the general usage of the window.

Properties

Under the Properties heading you can choose which components are available for the layout container and define their settings. The heading has three tabs:

• Allowed Components
• Default Components
• Responsive Settings

Allowed Components

On the Allowed Components tab, you define which components are available for the layout container.

• The components are grouped by their component groups, which can be expanded and collapsed.
• An entire group can be selected, by checking the group name and all can be deselected by unchecking.
• A minus represents at least one but not all items in a group are selected.
• A search is available to filter for a component by name.
• The counts listed to the right of the component group name represent the total number of selected components in those groups regardless of the filter.

Default Components

On the Default Components tab, you define which components are automatically associated with given media types so that when an author drags an asset from the asset browser, AEM knows with which component to associate it. Note that only components with drop zones are available for such configuration.

Click Add Mapping to add an entirely new component and MIME type mapping.

Select a component in the list and click Add type to add an additional MIME type to an already mapped component. Click the Delete icon to remove a MIME type.

Responsive Settings

On the Responsive Settings tab you can configure the number of columns in the resulting grid of the layout container.

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.

  • Already entered content is considered initial content and is only visible in Initial Content mode.

• The parents of the unlocked component cannot be moved, cut or deleted.

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

To save space, the layout container does not grow to accommodate the list of allowed components. Rather the container becomes a scrollable list.

Components that are configurable are shown with a Policy icon, which can be tapped or clicked to edit the policy and properties of that component.

Relationship to Existing Pages

If the structure is updated after creating pages based on the template, then these pages will reflect the changes to the template. A warning is displayed in the toolbar to remind you of this fact along with confirmation dialogues.

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

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

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

If the initial content of the template is updated after pages are created based on the template, then these pages will not be affected by changes to the initial content in the template.

You can select an existing policy for the page from the Select policy drop-down.

A new policy can be added by selecting the add button next to the Select policy dropdown. A new title should then be given in the Policy Title field.

The selected existing policy in the Select policy dropdown can be copied as a new policy using the copy button next to the dropdown. A new title should then be given in the Policy Title field. By default the copied policy will be titled Copy of X, where X is the title of the copied policy.

Define a title for the policy in the Policy Title field. A policy is required to have a title so that it can be easily selected in the Select policy dropdown.

A description of the policy is optional in the Policy Description field.

In the Other templates also using the selected policy section, you can easily see which other templates use the policy selected in the Select policy dropdown.

Specify the client-side libraries you want applied to pages created with this template. Entering the name of a library in the text field in the Client Side Libraries section.

If multiple libraries are needed, click the Add button to add an additional text field for the library name.

Add as many text fields as necessary for your client-side libraries.

Define the libraries’ relative position as necessary by dragging the fields using the drag handle.