Deep dive into editable templates

This is continuation to previous blog of editable templates. If you are new to editable templates, it is highly advisable to go through the blog here.

Creating base page component (Owner: AEM Developer)

1. Create page component under /apps/<project-name>/components/structure/page that extends core/wcm/components/page/v1/page

2. Create template-type (Ref: /conf/we-retail/settings/wcm/template-types/empty-page):

• Navigate to /conf/<project>/settings/wcm/template-types.

• Create node of jcr:primaryType "cq:Template"

3. Under /template-types/blankpage, create jcr:content node of jcr:primaryType 'cq:pageContent'. Optionally, add jcr:title and jcr:description as below:

4. Create node with name "initial" and type as "cq:Page" and add a child node with -

• Name: "jcr:content"

• jcr:primaryType "cq:PageContent"

• sling:resourceType: digitalect/components/structure/page created in step 1.

5. Create node with name "policies" and type "cq:Page" and add a child node with -

• Name: jcr:content

• jcr:primaryType: nt:unstructured

• sling:resourceType: wcm/core/components/policies/mappings

6. Create node with name "root" under jcr:content created in above step with

• jcr:primaryType: nt:unstructured

• sling:resourceType: wcm/core/components/policies/mapping

7. Create node with name "structure" same as "initial" as in step 4.

Note: All node names has to be exactly same - initial, policies and structure.

8. An optional thumbnail.jpg can be created to provide thumbnail image for the template type.

Creating Editable templates (Owner: Template authors)

1. Go to Templates--> Select project (digitalect) --> Create--> Choose "Digitalect Empty Page" template.

2. Provide template name and create template to configure initial content and structure.

3. When template is opened, responsive grid will be visible in 'Structure' mode. It can be unlocked and policies can be set by clicking on Policies icon for layout container.

Setting Template level policies

Template level policies helps template authors in configuring the client libraries and template level styles. For both custom and OOTB templates, it can be set via "Page Policy".

Policies can be created/reused -

• For each policy, set of client side libraries can be defined and custom style configurations like Default CSS Classes and Allowed Styles can be configured.

• When a template-level policy is saved, it will be saved under /conf/<project-name>/settings/wcm/policies/wcm/foundation/components/page/.. i.e.,

• Template author have the option to configure different client libraries without involvement of AEM developers and this makes the page components cleaner - without hardcoding the client libraries in jsp/htmls.

Apart from client libraries, template level styles can also be configured as below - Multiple groups of styles can be added and each group can contain multiple styles with class names associated to each.

This will be saved in the same "policies" node as below:

Observe that cq:styleGroups and cq:styles are created with the above configured values

And the relation between a template and corresponding policy can be seen as below (cq:policy property):

When a page is created using this template, these policies will come into place and provide page author to select any of these styles from top style icon next to page properties:

On selecting, particular style from the group of available styles, the corresponding classname will be appended in wrapper dev.

Setting Component level policies

Similar to template level policies, component level policies help template authors to configure styles at component level and page authors to select one among multiple styles available for a component.

Component level policy icon will be visible only if particular component has cq:design_dialog.

On clicking Policy icon, component level policy configurations can be seen -

These properties are stored at /conf/digitalect/settings/wcm/policies/weretail/components/content/list/policy_1555090066902 (The path after policies is weretail's list component path i.e., weretail/components/content/list)

And the policy is mapped to the component (weretail's List component) as below:

When this component is authored on the page, these policies will come in action - policy will force the list component's configurations to follow policy -

Observe that "Show description" and "Show date" are checked by default.

Detailed analysis on style system will cover more details of the component and template level policies. To learn more, follow the blog on style system here.