Configuring responsivegrid/Layout Container component

Responsive Layout/design in AEM web pages is achieved with the help of responsivegrid or Layout Container component. This provides a paragraph system which lets us to add components and position them within the responsive grid.

Layout Container or responsivegrid component:
ResourceType : /libs/wcm/foundation/components/responsivegrid

To make use of this in our site, below needs to be done:
  • Include the Layout container component in base page component or can be dragged and dropped from component browser.
  • Include the responsive CSS
  • Enable Emulator 
  • Enable Layout mode.
Including the component:
  • Include the responsivegrid component via data-sly-resource or cq:include in HTL or JSP respectively in base page component using which templates would be created and hence the pages.
  • In case of editable templates, we can explicitly define responsivegrid component under structure node of template-types.
  • It can also allowed to be included from component browser via drag and drop.
Include the responsive CSS:
  • Base grid definition is available at /etc/clientlibs/wcm/foundation/grid/grid_base.less
  • In our project specific clientibs, create ".less" file say, style.less and import the above base grid file and specify grid cells/columns required and grid definitions specific to device.
  • Sample definition as available in Adobe helpx link
@import (once) "/etc/clientlibs/wcm/foundation/grid/grid_base.less"; 
/* maximum amount of grid cells to be provided */
@max_col: 12; 
/* default breakpoint */
.aem-Grid {
  .generate-grid(default, @max_col);
} 
/* phone breakpoint */
@media (max-width: 768px) {
  .aem-Grid {
    .generate-grid(phone, @max_col);
  }
} 
/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
  .aem-Grid {
    .generate-grid(tablet, @max_col);
  }
}

Enable Emulator:
  • Create sling:osgiConfig node under project specific config folder (/apps/training/confg) in the name - com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-xxx (xxx - identifier to be provided specific to project as it is a factory service) and property named mobile.resourceTypes with value being our project's base page components (using which templates and hence pages would be created.)
    • Eg: mobile.resourceTypes (String[]) - training/components/structure/page
  • Add property named "cq:deviceGroups" with value being /etc/mobile/groups/responsive in jcr:content of site's root page.
    • Eg: /content/training/jcr:content - cq:deviceGroups (String []) -  /etc/mobile/groups/responsive
Enable Layout mode:
  • Layout mode will be available in the toolbar as one of the modes along with Edit/Design mode only if we specify Breakpoints.
  • Breakpoints are defined either at template level or at jcr:content of root page of the site so that all the pages created under that will have the mode available. 
To be added under /content/training/jcr:content
cq:responsive (nt:unstructured)
  breakpoints (nt:unstructured)
     phone (nt:unstructured)  title and width as properties on this node
     tablet (nt:unstructured)   title and width as properties on this node

With this four steps above, we will have responsivegrid component ready to use with Layout mode(position component within  the grid)and with Emulator (for viewing how content will be rendered in configured devices)

Reference: Adobe helpx links

Comments

Post a Comment

Popular posts from this blog

Embedding Third party dependency/OSGi bundle in AEM application hosted in AEMasCS

Image
This post illustrate the ways of embedding third party dependency in AEM maven project. Steps are mentioned considering the project structure to be followed for AEMasCS while the same can be followed for classic versions too.  Before we begin, I would like to explain the scenario of including a dependency in our AEM maven project.  When we would like to make use of an API that is not already available in our project, we look for that in maven-central repository and specify the dependency in main pom.xml and desired module's pom.xml file. (Lets say, AWS S3 Java SDK V2 dependency) Upon updating the project in the IDE, we would see our class files (making use of those APIs) are compiled/build successfully without any errors.  Now, in the context of AEM/OSGi environment, when the same package and hence the bundle is deployed to AEM instance, dependencies that we added new might not be resolved/available in the OSGi as a bundle. Something like the below This indicates that the added dep
Read more

OSGI Factory Configuration implementation

OSGI Factory configuration is used to have many instances of an OSGI config (represented/identified via an identifier) for the single OSGI service/PID. Most often used OOB Factory configurations for example: Logger Factory/writer configuration (for log statements) Service user Mapper service Amendment (for using service resource resolver in projects) Few sample real time use case for the need of OSGI factory config: For multi tenant projects, if we have generic service used across tenants with properties/attributes specific to tenant. For single tenant, generic service targeting all locales with properties/attributes specific to locale. (where generic service -> holds logic in the lines of calling third party service for retrieving/updating information.) Implementation: ( In terms of OSGI R6 annotations ): Create Object Class Definition(OCD) defining desired properties for the OSGI service. - OSGIFactoryConfigOCD.java OSGI Service/Factory service to retrieve
Read more

Creation of Template Types for Editable templates

Image
In this post, we will create templates types which is the base for creating editable templates. Before getting to the subject directly, have added an introduction about templates in general. Template is the base for creating pages. Starting AEM 6.2, we have categorisation for templates - Static and Editable templates. Static templates :  This has been available for several versions of AEM/CQ Created using "Create Template" option with base page component as resourceType (which is responsible for rendering the page structure).  Template ( base page component as resourceType ) -> Page This cannot be edited as such. Since it just holds a reference to base page component, any changes to the page (other than authorable components), would need a change in base page component which is ultimately a work of developer. (calls for a code change) Allowed components are configured using Design mode (list being saved to etc/designs/projectfolder/templatename/jcr:content)
Read more