Sunday, September 10, 2017

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

Hello Everyone,
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 template editor has much more functionalities to know.The functionality of 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 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 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 container.

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 need 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.
Demonstration Video on Layout Editor and Default Component Feature with Dynamic Template:


Design Dialog with Template Editor
Design dialogs plays a very vital role with 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 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 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 design dialog
Depending on the value of the design_dialog, the corresponding fields can be hide 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 about what template authors has already configured. So there is a condition which 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}
Demonstration Video on Design Dialog and hide feature in Dynamic Templates:


Note:Special recommendation to watch all videos of this blog to get the concepts more clear.

If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com

Hope it will help you guys !!
Thanks and Happy Learning.

1 comment:

  1. Hi,

    I am getting following error while using grid.less in my project.
    "The resource from “http://localhost:4502/etc/clientlibs/wcm/foundation/grid/grid_base.less” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)."

    and the responsive behaviour is not working for the layout container.
    Can you please help with it

    ReplyDelete