Dynamic (Editable) Templates in AEM6.3: Part - 2

In the previous blog of Dynamic Templates in AEM 6.3: Part-1, you have already gone through template-types, the creation of dynamic templates and policies, etc.

But the template editor has many more functionalities to know. The functionality of the layout editor comes up with the functionality of dynamic templates within itself but you need to go through with some steps.

How to Configure Emulator in a Page

Emulator Icon won’t be displayed directly in the pages created from the template while using Dynamic Templates. So there is a need to add a configuration in Felix console:

Fig - Emulator Configuration

1. Go to the OSGi configuration named “com.day.cq.wcm.mobile.com.impl.MobileEmulatorProvider” Add your base page Component path in this configuration:

2. Make sure that the template-types (e.g.,empty-page) are having a property named cq:deviceGroups in the structure hierarchy shown below.

Fig - add devicegroups property in the template types

3. The emulator icon will start showing up on the page.

Fig - Emulator option in the page

But if you want to resize a responsive grid using layout editor, the resizing won’t work by default. So there is a need to have a CSS file named grid.less, that helps to use and resize layout containers.

grid.less

@import "/etc/clientlibs/wcm/foundation/grid/grid_base.less"; /* maximum amount of grid cells to be provided */ @max_col: 12; @grid-gutter-width: 24px; /* default breakpoint */ .aem-Grid {    .generate-grid(default, @max_col);    width: auto; } /* phone breakpoint */ @media (max-width: 650px) {    .aem-Grid {        .generate-grid(phone, @max_col);    } } /* tablet breakpoint */ @media (min-width: 651px) and (max-width: 1200px) {    .aem-Grid {        .generate-grid(tablet, @max_col);    } } .aem-GridColumn {    padding: 0 @grid-gutter-width/2; } /* TODO: find a better place for this */ /* additional styling for components in grid */ .aem-GridColumn.text.parbase p {    *padding: 0 20px;    text-align: justify; }

Default Components: In the Responsive grid policy you can see a tab having default components.

Fig - Default Component option in the responsive grid (parsys)

On the Default Components tab, you define which components are being associated with given media types so that when an author drags an asset from the asset browser(content finder), AEM knows that this mime type needs to be associated with which component.

Note: Only components with drop zones (drop targets in cq:editConfig node) are available for such configuration.

Click or tap Add Mapping to add an entirely new component and MIME type mapping.

Select a component in the list and click or tap Add type to add an additional MIME type to an already mapped component. Click the Delete icon to remove a MIME type.

Design Dialog with Template Editor

Design dialogs play a very vital role with the template editor. If you create a component having a design_dialog, you can save its value at the template level and all the pages created from that template can use those values.

How it works?

So if we have a design_dialog of a component, it can be configured in the component policy.

Note: Design mode is only available for static templates.

Fig - Component Policy Option

Fig - Design Dialog in the component policy creation

Where Design_dialog values get stored:

Fig - Design Dialog values stored under a policy of the template

The values of design_dialog can be fetched over a page using currentStyle Object.

Ex: ${currentStyle.title}

Using Hide Conditions

In a dialog, there can be numerous options to be authored for the user. This may confuse the user if he/she sees a lot of options on the user interface.

By using hide conditions, admins, developers, and super users have a way to hide resources based on a set of rules. This feature allows them to decide what resources should be displayed when an author edits.
We are taking an example of List component (/apps/core/wcm/components/list/v1/list) . This is a good example to understand this concept.

How to achieve it:

Fig - Field in the design dialog

Depending on the value of the design_dialog, the corresponding fields can be hidden and show in the dialog using “granite: hide”  condition. It works only on Boolean values.

Fig - Adding hide condition in the dialog

Reference: https://docs.adobe.com/docs/en/aem/6-3/develop/components/using-hide-conditions.html

Use Case: There is one more scenario if a template-author does authoring in the design dialog, and when page author authors that component in the page level, he is not aware of what template authors have already configured. So there is a condition that can help page author to know what template-authors have authored and if they really want to overwrite the values, they can.

Fig - Text field in design dialog

Fig -  Adding value in the title node of dialog based on the design dialog 

Example:

1. ${not empty cqDesign.title ? cqDesign.title : ' '}
2. ${not empty cqDesign.showDescription ? cqDesign.showDescription : false}