{"id":7496,"date":"2020-01-28T18:31:18","date_gmt":"2020-01-28T13:01:18","guid":{"rendered":"https:\/\/www.argildx.us\/?p=7496"},"modified":"2021-02-24T13:31:18","modified_gmt":"2021-02-24T08:01:18","slug":"how-to-create-and-enable-dynamic-templates-in-aem","status":"publish","type":"post","link":"https:\/\/www.argildx.us\/technology\/how-to-create-and-enable-dynamic-templates-in-aem\/","title":{"rendered":"How to Create and Enable Dynamic Templates in AEM"},"content":{"rendered":"\n
A new feature called Dynamic Templates was introduced in AEM 6.2. This feature is also known as Editable Templates in AEM for the obvious reason that these templates can be created and edited at any time. <\/p>\n\n\n\n
Generally, the control of creating and structuring templates is given to more specialized author groups called \u201cTemplate Authors\u201d.
The diagram below depicts the requirements to create a content page.<\/p>\n\n\n\n
In order to fulfil these requirements, the collaboration of roles below is important: Let\u2019s jump into implementation and see how to create dynamic templates in AEM. <\/p>\n\n\n\n With editable templates, templates are stored under \/conf. In order to create project specific template hierarchy under conf, we can use configuration browser.<\/p>\n\n\n\n 3. On Create Configuration dialog, configure:<\/p>\n\n\n\n 4. You can see below generated template structure on CRXDE:<\/p>\n\n\n\n \n\nRename base-page.jsp created below base-page component to base-page.html \n\n<\/p>\n\n\n\n 3. Create jcr:content node under empty-page with below properties<\/p>\n\n\n\n 4. Create initial node of type cq:Page under empty page 6. Create policies node of type cq:Page under empty page 8. Create structure node of type cq:Page under empty page Template type is all set and hierarchy should look as shown below. <\/p>\n\n\n\n 4. Provide suitable Title and Description and Click on Create. Note<\/em><\/strong>: This layout container is picked from structure<\/em> <\/em>node<\/em> <\/em>(<\/em>wcm<\/em>\/foundation\/components\/<\/em>responsivegrid<\/em>)<\/em> of<\/em> template. For your custom page component to pick <\/em>components from structure node, add below <\/em>code<\/em> in the<\/em> <\/em>body of your page component.<\/em><\/p>\n\n\n\n Note<\/em><\/strong>: <\/em>Add below code in the head section of your page component <\/em>to enable <\/em>tab view of components in structure mode<\/em> when layout container is unlocked<\/em>:<\/em><\/p>\n\n\n\n There are three parts to be built in each template: <\/p>\n\n\n\n 5.1) Template Policies<\/strong> Let\u2019s check out how we can make use of it: <\/p>\n\n\n\n 3. Now we have to apply Page Policy on the new template created. 6. On the left side Policy Dialog, we have 8. On Submit, you can see that an alert message pops up on template which was added in the alert.js file of clientlib(argildx.base)<\/p>\n\n\n\n Note<\/em><\/strong>: For your custom page component to pick template level policies, add below code in the head section of your page component (base-page.html)<\/em><\/p>\n\n\n\n b.<\/strong> Component Level Policy<\/strong> Let\u2019s configure Policy on layout container: 2. On the left side Policy Dialog, we have 5. Now you can see that selected group of components can be added in the layout container.<\/p>\n\n\n\n 5.2) Lock\/unlock Components:<\/strong> Note:<\/em><\/strong> After pages are\ncreated using the template, if structure of same template is updated then these\npages will be affected by changes.<\/em><\/p>\n\n\n\n 5.3) Initial Content<\/strong> Note<\/em><\/strong>: After pages are\ncreated using the template, if initial content of same template is updated then\nthese pages will not be affected by changes.<\/em><\/p>\n\n\n\n 5.4) Design Dialog for components at Template Level<\/strong> Finally, once template is ready to be used for creating pages: Note<\/em><\/strong>: In case a template\nis marked as disabled after creating some pages with it, then existing pages\nremain unaffected. However, the template will no longer be available for\ncreating new pages until it is enabled again.<\/em><\/p>\n\n\n\n 1. Select newly created ArgilDX Base Template from Template Console 1. Open page properties of root page of your website Now, you have successfully created templates and made it available for content authors to create pages.<\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" A new feature called Dynamic Templates was introduced in AEM 6.2. This feature is also known as Editable Templates in AEM for the obvious reason that these templates can be created and edited at any time. Generally, the control of creating and structuring templates is given to more specialized author groups called \u201cTemplate Authors\u201d. The diagram below … Read more<\/a><\/p>\n","protected":false},"author":29,"featured_media":7595,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","content-type":"","footnotes":""},"categories":[66],"tags":[25,1896,1931,1930,1897],"yst_prominent_words":[1927,1928,1671,1667,1925,1650,1654,1921,1920,1924,1923,1669,838,1684,1686,1929,1926,1635,1670,1668],"acf":[],"yoast_head":"\n
1. Developer <\/strong>concentrates on development of page components and template types and provides necessary information to template author.
2. Template Author <\/strong>is responsible for creating templates using template types, configuring use of components on templates.
3. Content Author <\/strong>is responsible for creating and editing content pages using templates.<\/p>\n\n\n\nDynamic templates provide tremendous capabilities and flexibility in configuring templates<\/strong>: <\/h5>\n\n\n\n
<\/li>
<\/li>
Structure:<\/strong> Define components and content for template
Initial Content:<\/strong> Define content visible on page when it is first created
Policies:<\/strong> Define design properties of a component
<\/li>
<\/li>
<\/li>
<\/li> Step 1: Activate Editable Templates in your project <\/strong><\/h5>\n\n\n\n
<\/figure><\/div>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Step 2: Create a new Page Component<\/strong><\/h5>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Step 3: Next step is to create template type<\/strong><\/h5>\n\n\n\n
<\/figure><\/div>\n\n\n\n
<jcr:content \n jcr:primaryType=\"cq:PageContent\" \n jcr:description=\"ArgilDX Empty Template for generic pages\" \n jcr:title=\"ArgilDX Empty Page\"\/> <\/pre>\n\n\n\n
5. Create jcr:content node under initial with below properties <\/p>\n\n\n\n <jcr:content\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0jcr:primaryType=\"cq:PageContent\"\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sling:resourceType=\"argildx-project\/components\/structure\/base-page\"\/>\u00a0\n<\/jcr:content>\u00a0 <\/pre>\n\n\n\n
7. Create jcr:content node under policies with below properties <\/p>\n\n\n\n <jcr:content \n jcr:primaryType=\"nt:unstructured\" \n sling:resourceType=\"wcm\/core\/components\/policies\/mappings\"> \n<\/jcr:content> <\/pre>\n\n\n\n
9. Create jcr:content node under structure with below properties <\/p>\n\n\n\n jcr:content \n cq:deviceGroups=\"[mobile\/groups\/responsive]\" \n jcr:primaryType=\"cq:PageContent\" \n sling:resourceType=\"argildx-project\/components\/structure\/base-page\"> \n <root \n jcr:primaryType=\"nt:unstructured\" \n sling:resourceType=\"wcm\/foundation\/components\/responsivegrid\"\/> \n<\/jcr:content> <\/pre>\n\n\n\n
<\/figure><\/div>\n\n\n\n
Step 4: Now template authors can go ahead and create templates using template type <\/strong><\/h5>\n\n\n\n
<\/figure><\/div>\n\n\n\n
5. Click on Open from confirmation dialog to view the template.
6. Template contains layout container to drag and drop components as shown below: <\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
<sly data-sly-use.templatedContainer=\"com.day.cq.wcm.foundation.TemplatedContainer\" \n data-sly-repeat.child=\"${templatedContainer.structureResources}\" \n data-sly-resource=\"${child.path @ resourceType=child.resourceType, decorationTagName='div'}\"\/> <\/pre>\n\n\n\n
<\/figure><\/div>\n\n\n\n
<head data-sly-use.clientlib=\"\/libs\/granite\/sightly\/templates\/clientlib.html\"> \n<sly data-sly- call=\"${clientlib.all@categories='wcm.foundation.components.parsys.allowedcomponents'}\"\/> \n<\/head> \n <\/pre>\n\n\n\n
Step 5: Working with templates <\/strong><\/h5>\n\n\n\n
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 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):<\/strong>
– 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. <\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
4. Open newly created template.
5. Click on Toggle button on toolbar and Click on Page Policy <\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
– Select Policy to select any existing policy.
– In Policy Title, provide title Base Policy
7. On the right-side, Properties<\/strong> 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<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
<\/figure><\/div>\n\n\n\n
<head data-sly-use.clientlib=\"\/libs\/granite\/sightly\/templates\/clientlib.html\">\n <sly data-sly-test.clientlibCategories=\"${currentStyle['clientlibs']}\"\n data-sly-call=\"${clientlib.all @ categories = clientlibCategories}\"><\/sly>\n<\/head>\n<\/code><\/pre>\n\n\n\n
– It allows authors to define design properties for each parsys.
– To add policies on components using design dialog.<\/p>\n\n\n\n
1. On the Template, select the layout container and click on policy toolbar action shown below:<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
– 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 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<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
<\/figure><\/div>\n\n\n\n
1. Components can be locked\/unlocked using Lock button next to policy button on toolbar. This feature defines whether content is available for modification in initial content mode.
2. Locked components remain in structure mode and can\u2019t be edited on resulting pages.
3. Unlocked components will be available under initial content mode and can be edited on resulting pages.<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
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 Title component and authored with title \u201cBase Page Title\u201d<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
Configurations with design dialog of a component can be edited by clicking on policy as shown in below diagram:<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
Step 6: Enable Template from Console<\/strong><\/h5>\n\n\n\n
1. Select newly created ArgilDX Base Template from Template Console
2. Click on Enable from toolbar.
3. Click on Enable button from confirmation window.<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n
Step 7: Once Enabled, Publish Template<\/strong><\/h5>\n\n\n\n
2. Click on Publish from the toolbar.<\/p>\n\n\n\nStep 8: All we must do is Allow Template under root page of our website to use it<\/strong><\/h5>\n\n\n\n
2. Click on Advanced Tab
3. Under Template Settings, click on add to define Allowed Templates path
Eg: \/conf\/<your-folder>\/settings\/wcm\/templates\/.*<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n