March 29, 2020
Estimated Post Reading Time ~

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:
config.PNG
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.
emulator.PNG
Fig - add devicegroups property in the template types
3. The emulator icon will start showing up on the page.
emulator icon.PNG
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.
default.PNG
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.
design_dialog.PNG
Fig - Component Policy Option
title dialog.PNG
Fig - Design Dialog in the component policy creation
Where Design_dialog values get stored:
Capture.PNG
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:
hideConstions.PNG
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.
dialog.PNG
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.
design_dialog.PNG
Fig - Text field in design dialog
dialog.PNG
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}


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.