Generally, the control of creating and structuring templates is given to more specialized author groups called “Template Authors”.
The diagram below depicts the requirements to create a content page.
In order to fulfill these requirements, the collaboration of roles below is important:
1. Developer concentrates on the development of page components and template types and provides the necessary information to the template author.
2. Template Author is responsible for creating templates using template types, configuring the use of components on templates.
3. Content Author is responsible for creating and editing content pages using templates.
Dynamic templates provide tremendous capabilities and flexibility in configuring templates:
Rather than developers, template authors can create and edit templates.
Provides template authors with touch-optimized UI “Template Console” for managing the lifecycle of templates and “Template Editor” to configure templates.
For any page a content author creates using a dynamic template, template authors need to configure three parts of the template:
Structure: Define components and content for the template
Initial Content: Define content visible on page when it is first created
Policies: Define design properties of a component
The dynamic connection is maintained between the page and template, modification in structure will reflect on all pages created using the template, whereas modification in initial content is reflected only on the new pages created using the template.
All the dynamic templates are stored under /conf
Design mode is not offered on pages created using dynamic templates. This can be achieved by creating component policies in the template editor.
Provides the concept of Page Policy to define specific client-side libraries to be loaded on each template.
Let’s jump into implementation and see how to create dynamic templates in AEM.
Rather than developers, template authors can create and edit templates.
Provides template authors with touch-optimized UI “Template Console” for managing the lifecycle of templates and “Template Editor” to configure templates.
For any page a content author creates using a dynamic template, template authors need to configure three parts of the template:
Structure: Define components and content for the template
Initial Content: Define content visible on page when it is first created
Policies: Define design properties of a component
The dynamic connection is maintained between the page and template, modification in structure will reflect on all pages created using the template, whereas modification in initial content is reflected only on the new pages created using the template.
All the dynamic templates are stored under /conf
Design mode is not offered on pages created using dynamic templates. This can be achieved by creating component policies in the template editor.
Provides the concept of Page Policy to define specific client-side libraries to be loaded on each template.
Let’s jump into implementation and see how to create dynamic templates in AEM.
Step 1: Activate Editable Templates in your project
With editable templates, templates are stored under /conf. In order to create a project-specific template hierarchy under conf, we can use the configuration browser.
With editable templates, templates are stored under /conf. In order to create a project-specific template hierarchy under conf, we can use the configuration browser.
Navigate to Tools > Configuration Browser
Click on Create
3. On Create Configuration dialog, configure:
Title: Enter title with your project name
Editable Templates: Check this option
4. You can see below the generated template structure on CRXDE:
Click on Create
3. On Create Configuration dialog, configure:
Title: Enter title with your project name
Editable Templates: Check this option
4. You can see below the generated template structure on CRXDE:
Step 2: Create a new Page Component
Open CRXDE Lite User interface : http://<host>:<port>/crx/de/index.jsp
Navigate to the page components folder of your project
Create a new page component with the following details:
Rename base-page.jsp created below base-page component to base-page.html
Open CRXDE Lite User interface : http://<host>:<port>/crx/de/index.jsp
Navigate to the page components folder of your project
Create a new page component with the following details:
Rename base-page.jsp created below base-page component to base-page.html
Step 3: Next step is to create a template type
Navigate to /conf/argildx-project/settings/wcm/template-types
Create a node with the name “empty-page” and Type “cq:Template”
3. Create jcr:content node under empty-page with below properties
Navigate to /conf/argildx-project/settings/wcm/template-types
Create a node with the name “empty-page” and Type “cq:Template”
3. Create jcr:content node under empty-page with below properties
<jcr:content jcr:primaryType="cq:PageContent" jcr:description="ArgilDX Empty Template for generic pages" jcr:title="ArgilDX Empty Page"/>
4. Create an initial node of type cq:Page under empty page
5. Create jcr:content node under initial with below properties
4. Create an initial node of type cq:Page under empty page
5. Create jcr:content node under initial with below properties
<jcr:content jcr:primaryType="nt:unstructured" sling:resourceType="wcm/core/components/policies/mappings">
</jcr:content>
6. Create policies node of type cq:Page under empty page
7. Create jcr:content node under policies with below properties
6. Create policies node of type cq:Page under empty page
7. Create jcr:content node under policies with below properties
<jcr:content jcr:primaryType="nt:unstructured" sling:resourceType="wcm/core/components/policies/mappings">
</jcr:content>
8. Create structure node of type cq:Page under empty page
9. Create jcr:content node under structure with below properties
8. Create structure node of type cq:Page under empty page
9. Create jcr:content node under structure with below properties
jcr:content cq:deviceGroups="[mobile/groups/responsive]" jcr:primaryType="cq:PageContent" sling:resourceType="argildx-project/components/structure/base-page"> <root jcr:primaryType="nt:unstructured" sling:resourceType="wcm/foundation/components/responsivegrid"/> </jcr:content>
The template type is all set and the hierarchy should look as shown below.
The template type is all set and the hierarchy should look as shown below.
Step 4: Now template authors can go ahead and create templates using template type Go to Tools > Templates > Go to your project(argildx-project) > Click on create from Toolbar You can see created ArgilDX Empty Page template type. Select this Template Type and click on Next
4. Provide a suitable Title and Description and click on Create.
5. Click on Open from the confirmation dialog to view the template.
6. Template contains a layout container to drag and drop components as shown below:
Note: This layout container is picked from the structure node (wcm/foundation/components/responsivegrid) of the template. For your custom page component to pick components from the structure node, add the below code in the body of your page component.
4. Provide a suitable Title and Description and click on Create.
5. Click on Open from the confirmation dialog to view the template.
6. Template contains a layout container to drag and drop components as shown below:
Note: This layout container is picked from the structure node (wcm/foundation/components/responsivegrid) of the template. For your custom page component to pick components from the structure node, add the below code in the body of your page component.
<sly data-sly-use.templatedContainer="com.day.cq.wcm.foundation.TemplatedContainer" data-sly-repeat.child="${templatedContainer.structureResources}" data-sly-resource="${child.path @ resourceType=child.resourceType, decorationTagName='div'}"/>
Note: Add below code in the head section of your page component to enable tab view of components in structure mode when layout container is unlocked:
Note: Add below code in the head section of your page component to enable tab view of components in structure mode when layout container is unlocked:
<head data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.all@categories='wcm.foundation.components.parsys.allowedcomponents'}"/>
</head>
Step 5: Working with templates
There are three parts to be built in each template:
Policies define the design properties of a component i.e. allowed components and its design.
Step 5: Working with templates
There are three parts to be built in each template:
Policies define the design properties of a component i.e. allowed components and its design.
Initial defines default components and content to be available when a page is first created using this template.
Structure defines the structure of a template.
5.1) Template Policies
When a page is created using dynamic templates, content authors will not have design mode, in-page editor. Now template author defines content policies in the template editor to persist the design properties of components.
There are two types of policies which we can define:
a. Template Level Policy (Page Policy):
– It allows template authors to define specific client libraries to be loaded on each template, it reduces unnecessary calls to libraries.
– Template author has control to add or remove client libraries rather than developers.
Let’s check out how we can make use of it:
Create a client library folder with name clientlibs (can use any name) of type cq:ClientLibrary under page component with unique categories value defined.
Add required client-side libraries to be loaded on base page.
3. Now we have to apply Page Policy on the new template created.
4. Open the newly created template.
5. Click on the Toggle button on the toolbar and Click on Page Policy
6. On the left side of Policy Dialog, we have
– Select Policy to select any existing policy.
– In Policy Title, provide title Base Policy
7. On the right-side, Properties dialog we have
– Client-Side Libraries field, add the categories name defined in the properties of the clientLib created in step 1, i.e argildx.base
– Click on submit
8. On Submit, you can see that an alert message pops up on the template which was added in the alert.js file of clientlib(argildx.base)
Note: For your custom page component to pick template level policies, add below code in the head section of your page component (base-page.html)<head data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"> <sly data-sly-test.clientlibCategories="${currentStyle['clientlibs']}" data-sly-call="${clientlib.all @ categories = clientlibCategories}"></sly> </head>
b. Component Level Policy
– It allows authors to define design properties for each parsys.
– To add policies on components using design dialog.
Let’s configure Policy on layout container:
1. On the Template, select the layout container and click on the policy toolbar action shown below:
2. On the left side of Policy Dialog, we have
– Select Policy to select any existing policy.
– In Policy Title, provide any suitable title. Ex: General group
3. On the left side Properties Dialog, we have
– Allowed Components which has a list of components and group that can be selected to be made available on selected layout container
– Select any group (General)
4. Click on submit
5. Now you can see that the selected group of components can be added in the layout container.
5.2) Lock/unlock Components:
1. Components can be locked/unlocked using the Lock button next to the policy button on the toolbar. This feature defines whether the content is available for modification in the initial content mode.
2. Locked components remain in structure mode and can’t be edited on the resulting pages.
3. Unlocked components will be available under initial content mode and can be edited on the resulting pages.
Note: After pages are created using the template, if the structure of the same template is updated then these pages will be affected by changes.
5.3) Initial Content
In this mode, define default components and content to be available when a page is first created using this template. Unlock the layout container available in structure mode to be able to configure it in initial content mode.
In the below example, I have added a Title component and authored with the title “Base Page Title”
Note: After pages are created using the template if the initial content of the same template is updated then these pages will not be affected by changes.
5.4) Design Dialog for components at Template Level
Configurations with the design dialog of a component can be edited by clicking on the policy as shown in the below diagram:
Structure defines the structure of a template.
5.1) Template Policies
When a page is created using dynamic templates, content authors will not have design mode, in-page editor. Now template author defines content policies in the template editor to persist the design properties of components.
There are two types of policies which we can define:
a. Template Level Policy (Page Policy):
– It allows template authors to define specific client libraries to be loaded on each template, it reduces unnecessary calls to libraries.
– Template author has control to add or remove client libraries rather than developers.
Let’s check out how we can make use of it:
Create a client library folder with name clientlibs (can use any name) of type cq:ClientLibrary under page component with unique categories value defined.
Add required client-side libraries to be loaded on base page.
3. Now we have to apply Page Policy on the new template created.
4. Open the newly created template.
5. Click on the Toggle button on the toolbar and Click on Page Policy
6. On the left side of Policy Dialog, we have
– Select Policy to select any existing policy.
– In Policy Title, provide title Base Policy
7. On the right-side, Properties dialog we have
– Client-Side Libraries field, add the categories name defined in the properties of the clientLib created in step 1, i.e argildx.base
– Click on submit
8. On Submit, you can see that an alert message pops up on the template which was added in the alert.js file of clientlib(argildx.base)
Note: For your custom page component to pick template level policies, add below code in the head section of your page component (base-page.html)<head data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"> <sly data-sly-test.clientlibCategories="${currentStyle['clientlibs']}" data-sly-call="${clientlib.all @ categories = clientlibCategories}"></sly> </head>
b. Component Level Policy
– It allows authors to define design properties for each parsys.
– To add policies on components using design dialog.
Let’s configure Policy on layout container:
1. On the Template, select the layout container and click on the policy toolbar action shown below:
2. On the left side of Policy Dialog, we have
– Select Policy to select any existing policy.
– In Policy Title, provide any suitable title. Ex: General group
3. On the left side Properties Dialog, we have
– Allowed Components which has a list of components and group that can be selected to be made available on selected layout container
– Select any group (General)
4. Click on submit
5. Now you can see that the selected group of components can be added in the layout container.
5.2) Lock/unlock Components:
1. Components can be locked/unlocked using the Lock button next to the policy button on the toolbar. This feature defines whether the content is available for modification in the initial content mode.
2. Locked components remain in structure mode and can’t be edited on the resulting pages.
3. Unlocked components will be available under initial content mode and can be edited on the resulting pages.
Note: After pages are created using the template, if the structure of the same template is updated then these pages will be affected by changes.
5.3) Initial Content
In this mode, define default components and content to be available when a page is first created using this template. Unlock the layout container available in structure mode to be able to configure it in initial content mode.
In the below example, I have added a Title component and authored with the title “Base Page Title”
Note: After pages are created using the template if the initial content of the same template is updated then these pages will not be affected by changes.
5.4) Design Dialog for components at Template Level
Configurations with the design dialog of a component can be edited by clicking on the policy as shown in the below diagram:
Step 6: Enable Template from Console
Finally, once the template is ready to be used for creating pages:
1. Select newly created ArgilDX Base Template from Template Console
2. Click on Enable from the toolbar.
3. Click on the Enable button from the confirmation window.
Note: In case a template is marked as disabled after creating some pages with it, then existing pages remain unaffected. However, the template will no longer be available for creating new pages until it is enabled again.
Finally, once the template is ready to be used for creating pages:
1. Select newly created ArgilDX Base Template from Template Console
2. Click on Enable from the toolbar.
3. Click on the Enable button from the confirmation window.
Note: In case a template is marked as disabled after creating some pages with it, then existing pages remain unaffected. However, the template will no longer be available for creating new pages until it is enabled again.
Step 7: Once Enabled, Publish Template
1. Select newly created ArgilDX Base Template from Template Console
2. Click on Publish from the toolbar.
Step 8: All we must do is Allow the Template under the root page of our website to use it
1. Open page properties of the root page of your website
2. Click on Advanced Tab
3. Under Template Settings, click on add to define Allowed Templates path
Eg: /conf/<your-folder>/settings/wcm/templates/.*
Now, you have successfully created templates and made it available for content authors to create pages.
1. Select newly created ArgilDX Base Template from Template Console
2. Click on Publish from the toolbar.
Step 8: All we must do is Allow the Template under the root page of our website to use it
1. Open page properties of the root page of your website
2. Click on Advanced Tab
3. Under Template Settings, click on add to define Allowed Templates path
Eg: /conf/<your-folder>/settings/wcm/templates/.*
Now, you have successfully created templates and made it available for content authors to create pages.
No comments:
Post a Comment
If you have any doubts or questions, please let us know.