CMS, Java, UI Development

Editable Templates

Introduction

Editable Templates are the type of templates that get dynamically connected to all the pages that are created using them. The changes that are made in editable templates will be reflected in all the pages that are created out of it. Editable Templates can be created from the templates console in the AEM. Authors with special permissions can create and edit the templates using the templates console. Editable Templates are created based on a template-type rather than on a page component. The template-type, in turn, will have the page component as its base. Having template-type in between the page component and the template will help us reduce the number of page components. This helps us to create a generic page component rather than having a page component for each template.

Templates Console

Page Component Vs Template Type

Using the static templates, we have one on one relationship with the template. Where you create a page component for each template. All the structuring/layout of the page will be coded as part of the page component you create for your template. When you have some n number of layouts of pages then you are forced to create n number of templates and page components associated with the templates. To overcome this a template-type concept is introduced.

A template-type is also like a template which maintains a one on one relationship with the page component. Each template-type will have a page component. Apart from the layout of the page, all the HTML that should be part of every page will be kept in your page. If there are multiple types of pages where the HTML head of the page change then we can even have multiple template-types and page components. As long as the layout is concerned, we’ll just have a template type and then based on it we create our templates.

Creation of Template

An Editable Template can be created using the templates console. Go to the Templates Console and click on the Create button in the top right corner. It takes you to the Create Template Wizard.

Create the Template Wizard

In the Create Template Wizard, select the template-type from the list of available template-types and click on the Next button. Clicking on the Next button takes you to the next screen where you are asked to enter the template Title and Description.

Template Details

Enter the template title and description and click on the Create button. Once the Create button is clicked the template gets created and you can always edit the template and make changes that are required. Once the template it edited or authored with the required content the Enable the template for using it to create pages.

Enable Template

In the Templates Console, select the template that has to enabled and click on the Enable button. Once it is clicked the template gets enabled and will be available for creating pages with it. Once the template is successfully enabled you will see the green selection on the template showing it is enabled.

Advanced Capabilities

Lock & Unlock Components

With Editable templates, you’ll come across with a new concept called locking and unlocking the components in your template. This is to allow the normal authors to edit/configure the components at different stages of the application. Once inside your template if you add any component you’ll see the option to lock/unlock it. If you lock the component, you’ll be able to edit it only inside your template and not in the page which is created using that template.

Component Locked in Template

When a component is locked in the template it gives you the option to configure in the template itself. All the content that needs to be common across pages of that template can be configured in the template itself. The content that is configured in the template cannot be changed in the pages created using that as long as it is locked.

Component Unlocked in Template

If the component is added and unlocked in the template, the component will be available in all the pages created with that template and can be authored individually in each of the pages that are created. An unlocked component cannot be authored inside the template.

Editor Modes

Structure

In the Structure mode of an editable template, we can add different components and we can use locking an unlocking features. All the components in the structure mode with the content will be dynamically updated to the pages created with the template. Whenever the content or the layout of the page in the structure mode is changed it dynamically reflects all the pages created out of that template. If there is any addition or deletion of the components in the template, that reflects in the pages created with that template.

Initial Content

In the Initial Content mode of an editable template, we can add different components and we can use locking an unlocking features. All the components in the initial content mode with the content will not be dynamically updated to the pages created with the template. Rather the content in the initial content will appear for the newly created pages of that template. Whenever the content or the layout of the page in the structure mode is changed and then if a new page gets created out of that template then the content from the initial content will be shown on the page. Initial content can always be changed at the page level.

Layout

Layout mode of an editable template helps to design the layout of the page. It gives you the chance to divide the page into a different number of columns based on the requirement. It helps you to design the layout of the page in different devices as well. The whole page will be divided into 12 columns and with layout, you can design your page in such way that a specific component should take only a few columns out of the 12.

Layout Mode

Policies

Policies are one of the new concepts that have been introduced with Editable Templates. In the template, you have different components that will be added to the template. A component can be different in different places. To achieve that we can set different policies to that component. Usually, we have a Parsys component which is also called a Layout Container. We can set policies to layout container in such a way that it only accepts a particular group of components that can be added inside. This configuration can be saved as a policy and that can be used at different places for that component. Policies are the configurations we give to each component that has been added to the template. We can also give styles from the policies to make sure that similar components take similar styles.

Policy Screen

Editable Templates solves the hand-coded variations of templates by excluding to create different variations of the page headers and footers. Policies allow you to create a different list of allowed components. It also allows you to create different component settings.

Roles Involved

There are a few different types of roles involved in the creation of Editable Templates. Creating new Editable Templates require the collaboration between the below roles.

Developer

The developer is responsible for creating different components that can be used on the template. He is responsible for creating the page components and template types that are used as a base to the templates.

Template Author

Template Authors will be responsible to create different templates. Add components to the templates, add variations and also to add the required configurations for the components that are locked at the template level. He is also responsible to create different policies to the components that are inside the template.

Page Author

Page Authors will be responsible to create different pages using different templates that are available. They are responsible for configuring the components that need to be configured at the page level.

 

About The Author