<\/figure><\/div>\n\n\n\n 3. Create jcr:content node under empty-page with below properties<\/p>\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 4. Create initial node of type cq:Page under empty page 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 6. Create policies node of type cq:Page under empty page 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 8. Create structure node of type cq:Page under empty page 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\nTemplate type is all set and hierarchy should look as shown below. <\/p>\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\nGo to Tools > Templates > Go to your project(argildx-project) > Click on create from Toolbar<\/li> You can see created ArgilDX Empty Page template type. Select this Template Type and click on Next <\/li><\/ol>\n\n\n\n <\/figure><\/div>\n\n\n\n 4. Provide suitable Title and Description and Click on Create. 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\nNote<\/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 <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\nNote<\/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 <\/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\nThere are three parts to be built in each template: <\/p>\n\n\n\n
Policies define design properties of a component i.e. allowed components and its design.<\/li> Initial defines default components and content to be available when a page is first created using this template.<\/li> Structure defines the structure of a template.<\/li><\/ol>\n\n\n\n5.1) Template Policies<\/strong> 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 Let\u2019s check out how we can make use of it: <\/p>\n\n\n\n
Create a client library folder with name clientlibs (can use any name) of type cq:ClientLibrary under page component with unique categories value defined. <\/li> Add required client-side libraries to be loaded on base page. <\/li><\/ol>\n\n\n\n <\/figure><\/div>\n\n\n\n 3. Now we have to apply Page Policy on the new template created. 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 6. On the left side Policy Dialog, we have – 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 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
<\/figure><\/div>\n\n\n\nNote<\/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<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 b.<\/strong> Component Level Policy<\/strong> – It allows authors to define design properties for each parsys. – To add policies on components using design dialog.<\/p>\n\n\n\nLet\u2019s configure Policy on layout container: 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 2. On the left side 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 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 5. Now you can see that selected group of components can be added in the layout container.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n5.2) Lock\/unlock Components:<\/strong> 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\nNote:<\/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\n5.3) Initial Content<\/strong> 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\nNote<\/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\n5.4) Design Dialog for components at Template Level<\/strong> 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\nStep 6: Enable Template from Console<\/strong><\/h5>\n\n\n\nFinally, once template is ready to be used for creating pages: 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\nNote<\/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