Custom Responsive Paragraph Component Using Grid Layouting

AEM allows you to realize a Responsive Layout for your pages by using the Layout Container component.

This provides a paragraph system that allows you to position components within a responsive grid. This grid can rearrange the layout according to the device/window size and format. The component is used in conjunction with the Layouting mode, which allows authors to create and edit the responsive layout dependent on the device.

Note: Despite the Layouting container’s availability in the classic UI, it is fully functional only in the touch-optimized UI.

Component structure and properties
The first thing we will need is to copy what will be the base structure of our custom component in our project.

Copy the component under /libs/wcm/foundation/components/responsivegrid and paste it into our project (wherever you have your components). After that, we change the name of the component from responsivegrid to customresponsivegrid (you can choose any name). We will do the same process with responsivegrid.html to customresponsivegrid.html

You can change the jcr:title and componentGroup to your fits.

The next step is to add the property to the component:

• sling:resourceSuperType = “wcm/foundation/components/responsivegrid” It should look like this:


After this, we will have a component but it will not work with the layouting mode and it will not be responsive. This is because we need to override a javascript function located in the file /libs/cq/gui/components/authoring/clientlibs/editor/js/responsive/responsive.js

The function must be overwritten because it only works with the foundation component and we need it to work with our component.

Clientlibs
In order to make our component responsive, we will need to add a clientlib, so that we have the javascript that will override the function of responsive.js and the css needed.

In that clientlibs, we must add the category “cq.authoring.editor”

Javascript:
In our js file we will put the following code:

(function ($, ns, channel, window, undefined) {

ns.responsive.isResponsiveGrid = function (editable) { 

return editable.type === 'wcm/foundation/components/responsivegrid' || 'layouting_test/components/structure/customresponsivegrid'; 

} 

}

(jQuery, Granite.author, jQuery(document), this));

Here we will tell the function that the editable type of the component for the layouting will be the one from the foundation, and our component too.

It is important to note that the path to your custom component may vary depending on the project, so you should modify it to make it fit your needs.
Styles:

We will add a styles.less file that will import the main grid styles for our component.

In our less file we will put the following code:

@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: 650 px) {

 .aem - Grid {

  .generate - grid(phone, @max_col);

 }

}

/* tablet breakpoint */

@media(min - width: 651 px) and(max - width: 1200 px) {

 .aem - Grid {

  .generate - grid(tablet, @max_col);

 }

}

In this less file, we have the breakpoints that we have created in the cq:responsive node in our page template jcr:content node to enable the layouting mode (in this case there are two breakpoints, table and phone).


Including custom behavior to our component
Changing the background color of our component in the base of a design dialog configuration.

Now that we have our component we will add a feature that allows us to change the background color for the grid from the design dialog.

To begin with, we will create the following node structure under “items” in our “design_dialog” in our component.

It would be convenient if the color node is created between columns and components to have a better disposition when the dialog appears.

Notation: + (node), – (property)
+ color[cq:Widget]
– xtype: selection
– type: combobox
– fieldLabel: Background color
– fieldDescription: Enter a background color for the grid
– name: ./backgroundcolor

+ options[cq:WidgetCollection]
+ nocolor[nt:unstructured]
– text: No Color
– value: transparent

+ red[nt:unstructured]
– text: Red
– value: #FF0000

+ blue[nt:unstructured]
– text: Blue
– value: #0000FF
+ grey[nt:unstructured]
– text: Grey
– value: #CCCCCC



Our next step will be to modify the component’s html file, so the grid can use the recent dialog’s customization.

Change sightly implementation so our component can make use of our new dialog property to change the background color.

style="${currentStyle.backgroundcolor != 'transparent' ? 'background-color: {0}' : '' @ format=[currentStyle.backgroundcolor], context='html'}"
Our code will be something like this:

<!--/* CUSTOM RESPONSIVE GRID */-->

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.css @ categories='tests.layouting'}"></sly>

<div data-sly-use.api="com.day.cq.wcm.foundation.ResponsiveGrid" style="${currentStyle.backgroundcolor != 'transparent' ? 'background-color: {0}' : '' @ format=[currentStyle.backgroundcolor], context='html'}" class="${api.cssClass}"> 

<sly data-sly-repeat.child="${api.paragraphs}" data-sly-resource="${child.path @ decorationTagName='div', cssClassName=child.cssClass}" />

<div class="new section aem-Grid-newComponent" data-sly-resource="${resource.path @ resourceType='wcm/foundation/components/responsivegrid/new', appendPath='/*'}"></div> </div>

If everything is OK, we can change the background color of our component in design mode.



With this and the configuration for enabling layouting in AEM, you will be all set to go.