Solved

Layout Mode Not Showing Up

Forum|Forum|6 years ago
February 8, 2019
5 replies
6105 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Gaurav-Behl

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

smacdonald2008

As Gaurav suggests below - this needs to be tested on 6.3. This artilce is for 6.3 and uses Static Templates. I will check with this Toy Store example.

Adobe Experience Manager Help | Creating your First Adobe Experience Manager 6.3 website

Gaurav-Behl

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.

chlimage_1

smacdonald2008

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.

M

Matt-H-Author

I'm still trying to process and understand what Gaurav put in there. I've tried adding and configuring 'cq:deviceGroups' property on my root page's jcr:content, but that did not seem to change anything. The rest is still new to me, so I'll keep trying to figure it out.

So you understand, I'm working with content/legacy page rendering components that started with Classic and recently moved to Touch that were all static template pages. My end-goal is to see if there's any way to change those static templates in such a way to gain the Layout functionality, but keep the existing content. Using the device emulator functionality may be a stopgap compromise, but it would still be missing the ability to control the layout of individual components.

Is that Layout/responsive functionality even possible on static templates? And if it's not possible, is there is a way to convert static templates to editable ones? Or create a new editable template that can read static page content? (Or should that be a separate forum question?)

Gaurav-BehlAccepted solution