SOLVED
Layout Mode Not Showing Up
I'm using AEM 6.3. I have static templates that were using parsys (foundation/components/parsys) and now I'm trying to switch to layout (wcm/foundation/components/responsivegrid). I've tried following the instructions in Configuring Layout Container and Layout Mode, but it is still not working.
Here is a simplified version of my setup:
I've got a template in /apps/matt/templates/mattplate It's sling:resourceType is "matt/components/templates/mattplate"
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Template"
jcr:title="Mattplate"
allowedPaths="[/content/matt(/.*)?]">
<jcr:content
cq:designPath="/etc/designs/matt"
jcr:primaryType="cq:PageContent"
sling:resourceType="matt/components/templates/mattplate"/>
</jcr:root>
The cq:Component /apps/matt/components/templates/mattplate has a sling:resourceSuperType of "foundation/components/page". It has a cq:dialog node with the page properties title item, pagename item, tags item, and so forth (i.e. /apps/matt/components/templates/mattplate/cq:dialog/content/items/tabs/items/basic/items/column/items/title/items/title).
It has a cq:infoProviders node with a responsive node in it (/apps/matt/components/templates/mattplate/cq:infoProviders/responsive) whose className is "com.day.cq.wcm.core.impl.ResponsiveInfoProvider".
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured">
<responsive
jcr:primaryType="nt:unstructured"
className="com.day.cq.wcm.core.impl.ResponsiveInfoProvider"/>
</jcr:root>
It has a cq:responsive node with breakpoints (i.e. /apps/matt/components/templates/mattplate/cq:responsive/breakpoints/small).
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured">
<breakpoints jcr:primaryType="nt:unstructured">
<extrasmall
jcr:primaryType="nt:unstructured"
title="Extra Small Devices"
width="{Decimal}767"/>
<small
jcr:primaryType="nt:unstructured"
title="Small Devices"
width="{Decimal}991"/>
<medium
jcr:primaryType="nt:unstructured"
title="Medium Devices"
width="{Decimal}1199"/>
<large
jcr:primaryType="nt:unstructured"
title="Large Devices"
width="{Decimal}2000"/>
</breakpoints>
</jcr:root>
The mattplate.jsp file looks like this:
<html>
<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<body>
<cq:include path="" resourceType="/libs/foundation/components/title"/>
<h3>Layout:</h3>
<cq:include path="pagecontent/layout" resourceType="wcm/foundation/components/responsivegrid"/>
</body>
</html>
It has the one simple layout container. I configured it to have 8 columns, and hold the image, layout (responsivegrid), and text components from /libs/foundation/components:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Page">
<jcr:content
cq:lastModified="{Date}2019-02-08T16:10:50.403-06:00"
cq:lastModifiedBy="admin"
jcr:primaryType="nt:unstructured">
<mattplate jcr:primaryType="nt:unstructured">
<par
jcr:lastModified="{Date}2019-02-08T16:10:50.400-06:00"
jcr:lastModifiedBy="admin"
jcr:primaryType="nt:unstructured"
sling:resourceType="wcm/foundation/components/responsivegrid"
columns="8"
components="[/libs/foundation/components/image,/libs/wcm/foundation/components/responsivegrid,/libs/foundation/components/text]"/>
</mattplate>
</jcr:content>
</jcr:root>
But the "Layout" option under "Edit" is still not there. What am I missing? What do I need to do to have the Layout Mode available?
1 Accepted Solution
Correct answer by
Let me try to explain..
When you add 'cq:deviceGroups' property to the root page you would be able to see 'Emulator' icon on top of page. This icon would ensure that the you are able to view the page for configured/specified layouts in the 'EDIT' mode. You should also be able to view handles for each component to drag and adjust the layout. These handles would appear for the components that are children of responsivegrid and/or configured as Scott mentioned above in toystore example.
This would enable you to resize individual components in the 'Edit' mode that are a part of responsivegrid container within a static template but not a normal parsys/iparsys or other areas of the static template that fall outside the parent responsivegrid. That might become a pain for author.
The recommended way is the code that Scott mentioned above, essentially you would create separate responsive grid containers within a static template (you could do it via jsp/htl or via configuration in design page -/etc/designs/matt/jcr:content, check /etc/designs/geometrixx/jcr:content example) and drop your individual components within those containers to make the work with layout mode.
I'm not sure if 'Layout' mode can appear in dropdown for a static template. I would need to research that at my end.
Another thing that I mentioned was about the structure of your code. Your code structure has
/apps/matt/components/templates/mattplate/
- cq:InfoProviders
- cq:dialog
- cq:responsive
- root (This node of type responsivegrid is missing. This is the parent grid container that enables all children to be resized based on individual configurations)
Check this reference node of We-retail editable template - /conf/we-retail/settings/wcm/templates/hero-page/structure/jcr:content/root. Essentially, you would want to the simulate the same node hierarchy in your static template's code. you could also follow the toystore templates mentioned above that how you can enable individual components to be resized in the 'Edit' mode itself.
Layout/responsive functionality is possible on static templates in a limited manner as mentioned in the docs as well. Refer - Responsive Layout
Caution:
Although the Layout Container component is available in the classic UI, its full functionality is only available and supported in the touch-enabled UI.
Note:
If not already available, the Layout Container must be explicitly activated for a paragraph system/page (for example, by using Design mode).
I'm not aware of a way to "convert" a static template to an editable one. You would have to create a new editable template and map each and every individual component to that editable template after configuring its policies.
HTH
I'm not sure if "Layout" mode under modes option would appear for 'static templates' without adding any "extraclientlibs'. In any case, your template structure doesn't comply to the Layout mode as you're missing the 'root' node and the child components to be governed by responsivegrid under that.
check we-retail structure:
/conf/we-retail/settings/wcm/templates/hero-page/structure/jcr:content/root/header
Other way to use Layout mode is to configure 'cq:deviceGroups' property on your root page's jcr:content (similar to /content/we-retail)
cq:deviceGroups | String | mobile/groups/responsive |
This way you could, use the responsivegrid for each component in the 'Edit mode' as well. You would see the grid/handle to resize/drag each individual component/container as per your code.
Refer - Responsive Layout
Layout mode can be started in two ways.
- By using the mode menu in the toolbar and choosing Layout mode
- Select the Layout mode just as you would switch to Edit mode or Targeting mode.
- Layout mode remains persistent and you do not leave Layout mode until you select another mode via the mode selector.
When editing an individual component.
- By using the Layout option in the component's quick action menu, you can switch to Layout mode.
- Layout mode persists while editing the component and reverts to Edit mode once focus changes to another component.
The Toy Store site was built with Static Templates on 6.3. I recommend that you install this package and look at it. There is no Layout mode by default. However, if you go through the article- it teaches you how you can view you site in different views like a device.
See this section --
Hope this helps...
PS - when you built a page via editable templates - this is not required.
Correct answer by
Let me try to explain..
When you add 'cq:deviceGroups' property to the root page you would be able to see 'Emulator' icon on top of page. This icon would ensure that the you are able to view the page for configured/specified layouts in the 'EDIT' mode. You should also be able to view handles for each component to drag and adjust the layout. These handles would appear for the components that are children of responsivegrid and/or configured as Scott mentioned above in toystore example.
This would enable you to resize individual components in the 'Edit' mode that are a part of responsivegrid container within a static template but not a normal parsys/iparsys or other areas of the static template that fall outside the parent responsivegrid. That might become a pain for author.
The recommended way is the code that Scott mentioned above, essentially you would create separate responsive grid containers within a static template (you could do it via jsp/htl or via configuration in design page -/etc/designs/matt/jcr:content, check /etc/designs/geometrixx/jcr:content example) and drop your individual components within those containers to make the work with layout mode.
I'm not sure if 'Layout' mode can appear in dropdown for a static template. I would need to research that at my end.
Another thing that I mentioned was about the structure of your code. Your code structure has
/apps/matt/components/templates/mattplate/
- cq:InfoProviders
- cq:dialog
- cq:responsive
- root (This node of type responsivegrid is missing. This is the parent grid container that enables all children to be resized based on individual configurations)
Check this reference node of We-retail editable template - /conf/we-retail/settings/wcm/templates/hero-page/structure/jcr:content/root. Essentially, you would want to the simulate the same node hierarchy in your static template's code. you could also follow the toystore templates mentioned above that how you can enable individual components to be resized in the 'Edit' mode itself.
Layout/responsive functionality is possible on static templates in a limited manner as mentioned in the docs as well. Refer - Responsive Layout
Caution:
Although the Layout Container component is available in the classic UI, its full functionality is only available and supported in the touch-enabled UI.
Note:
If not already available, the Layout Container must be explicitly activated for a paragraph system/page (for example, by using Design mode).
I'm not aware of a way to "convert" a static template to an editable one. You would have to create a new editable template and map each and every individual component to that editable template after configuring its policies.
HTH
Related Conversations
