Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Layout mode and responsive grid setting

ryuatnorcal
Level 3
Level 3

Hello AEM community!

I have a problem setting up the responsive grid in my AEM app.
I followed the Adobe's tutorial site ( Configuring Layout Container and Layouting Mode - docs.adobe.com ) and I am using 6.1 AEM.

After setting up the node as directed in the tutorial, I could not turn on Layout mode to show the ruler and grids.

Following are my set ups.

In my template node, we have following properties.

1288571_pastedImage_1.png

The template node has following nodes.

I have only one break point as shown, however, even I made multiple break points, it does not show layout mode at editor.html

1288572_pastedImage_2.png

In the Components node, I have the following structure.

The contentpage components is my page component that uses template shown above.

1288574_pastedImage_3.png

In the contentpage node, I have the following properties

1288576_pastedImage_4.png

AS you can see from the contentpage structure, I have cq:infoProviders which has a responsive node.

For cq:inforProviders node, I have the following property

1288577_pastedImage_5.png

For responsive node, I have the following properties

1288578_pastedImage_6.png

As the tutorial mentioned, I use responsivegrid instead of parsys to make a component drop section

1288579_pastedImage_7.png

Let's say I have a textField component to use in the page.

1288583_pastedImage_8.png

The textField's properties are following

1288584_pastedImage_9.png

And textField.html is following

1288585_pastedImage_10.png

In the text.js I have

1288589_pastedImage_11.png

I want to have my editor.html like tutorial. I need the yellowed area.

1288590_pastedImage_12.png

However, my editor.html has Edit, Scaffold, Developer, and Design mode. Not included the Layout mode.

1288591_pastedImage_13.png

I also want to my editor.html to have responsive component.

1288598_pastedImage_16.png

However, I have only fixed width component

1288599_pastedImage_17.png

I think I missed some configuration or did wrong way to set up node.

If you know about layout mode setting, please help me out here

Thank you for your help in advance

Ryu

1 Accepted Solution
Anurag_Kumar
Correct answer by
Level 2
Level 2

For Showing the rulers (Emulators)

1. Delete sling:resourceType property from your template (/apps/<project-name>/templates/contentpage)

2. Add one more property to your page (/content/<project-name>/mypage)

Property Name= cq:deviceGroups

Type= String[]

Value= /etc/mobile/groups/responsive

This should show the Emulators.

Coming to the actual magic of responsiveness.

1. After emulators are enabled, go to a mobile emulator and shorten the width to say 10 columns. On desktop keep some other width, say 5 columns.

2. Go to CRXDE Lite and check inside /content/<project-name>/mypage/jcr:content/<par-name>/<component-name>. You will see a node named cq:responsive. This will be containing two children "default" and "small" with width property of 5 and 10 respectively.

Actual change in width will happen when you include the grid definition styles.The base grid definition can be found under:

/etc/clientlibs/wcm/foundation/grid/grid_base.less

Please refer:

https://docs.adobe.com/docs/en/aem/6-1/administer/operations/page-authoring/configuring-responsive-l... the Responsive CSS

Thanks,

Anurag

View solution in original post

0 Replies
smacdonald2008
Level 10
Level 10

In 6.1 - i am checking to see if i have same as you.

I know in 6.3 - there has been major improvements for Layout - as discussed in this article:

Creating an Adobe Experience Manager project using Lazybones

I will post back my findings.

smacdonald2008
Level 10
Level 10

When using AEM 6.1 - for Layout - look here:

http://localhost:4502/editor.html/content/geometrixx-media/en/entertainment.html

This site has been configured to use this. Look at the configuration for this site.

ALayout.png

ryuatnorcal
Level 3
Level 3

Thank you for the comment smacdonald2008 !

Let me see if the page helps my page.

I will follow up how it goes later

ryuatnorcal
Level 3
Level 3

I am looking at the geometrixx page to find out the configuration of layout mode but I didn't quite get how the layout mode working in the geometrixx page.
I feel like the page uses a different structure than Adobe's tutorial. Since the page depends on multiple components, I am about lost trucking why and how the layout mode has created on the site.

One thing I noticed is that ruler I mentioned at the question was actually comes from the emulator.

I have done OSGi configuration as I read through the tutorial.

under my config folder, I have an node com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-<project_name>

and the node has following properties. 

1288642_pastedImage_0.png

Another thing, I have noticed is that the geometrixx site does not allow me to change the size of the component on editor.html.

Is there any simple example project I can refer to?

smacdonald2008
Level 10
Level 10

To turn on the Mobile emulator - try this AEM 6.3 article on 6.1. It may work as it does not use tools - only nodes and CRXDE lite. It uses HTL too that is supported in AEM 6.1.

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

I will try this too on AEM 6.1.

smacdonald2008
Level 10
Level 10

I built the site - but it does not work the same way in AEM 6.1 as it does in AEM 6.3. For 6.1 - see this community article - it may help:

http://aempodcast.com/2016/front-end-engineering/implement-responsive-layout-aem-part-1/#.WaXsISiGOF...

smacdonald2008
Level 10
Level 10

For AEM 6.1 - i created the Toy Store site - following the article.  Did this and then i was able to view the emulator...

I added the config node (named com.day.cq.wcm.emulator.EmulatorProvider-summit) - shown here:

AA1.png

Then i added the prop here as discussed in the artilce - /content/summit-toys/jcr:content

AA2.png

This did produce the emulator - see:

AA3.png

ryuatnorcal
Level 3
Level 3

Thank you for sharing the tutorial

I could successfully show layout mode but I still have problem to make component like following.

I followed the second tutorial and it supposed to create a component that can be customizable width.

However, it ended up creating col components to let author choose how they want to organize the column.

 

1289434_pastedImage_16.png

I kind of start doubting if it does not come with 6.1 AEM ...
Do you think if I update to 6.2 then making these components easier? 

mickjleroy
Level 2
Level 2

As I mentioned in your SO post...

Ruler (Emulator)

  • make sure /libs/wcm/mobile/components/simulator/simulator.jsp is in the head of your page
  • register the page component with a MobileEmulatorProvider. For example:

        com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-alias.xml:
        mobile.resourceTypes=[geometrixx-media/components/page]

  • add the cq:deviceGroup property to the root content node (i.e. /etc/mobile/groups/responsive)

Note: the ruler will not show up unless the page is treated as “responsive”. The “emulators” property must not be blank at http://localhost:4502/libs/wcm/core/content/pageinfo.json?path=<path to page>

Layouting Mode

  • add the cq:responsive node to the root content node (just grab it from geometrixx-media). For example:

<cq:responsive jcr:primaryType="nt:unstructured">
  <breakpoints jcr:primaryType="nt:unstructured">
  <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
  <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
  </breakpoints>
</cq:responsive>

  • if not inheriting from the foundation page component, add /libs/foundation/components/page/cq:infoProviders/responsive node to page component
  • change the "par" parsys to be of type wcm/foundation/components/responsivegrid
  • include the responsive css client lib in the project (see below)

More info: https://docs.adobe.com/docs/en/aem/6-2/author/page-authoring/responsive-layout.html

Anurag_Kumar
Correct answer by
Level 2
Level 2

For Showing the rulers (Emulators)

1. Delete sling:resourceType property from your template (/apps/<project-name>/templates/contentpage)

2. Add one more property to your page (/content/<project-name>/mypage)

Property Name= cq:deviceGroups

Type= String[]

Value= /etc/mobile/groups/responsive

This should show the Emulators.

Coming to the actual magic of responsiveness.

1. After emulators are enabled, go to a mobile emulator and shorten the width to say 10 columns. On desktop keep some other width, say 5 columns.

2. Go to CRXDE Lite and check inside /content/<project-name>/mypage/jcr:content/<par-name>/<component-name>. You will see a node named cq:responsive. This will be containing two children "default" and "small" with width property of 5 and 10 respectively.

Actual change in width will happen when you include the grid definition styles.The base grid definition can be found under:

/etc/clientlibs/wcm/foundation/grid/grid_base.less

Please refer:

https://docs.adobe.com/docs/en/aem/6-1/administer/operations/page-authoring/configuring-responsive-l... the Responsive CSS

Thanks,

Anurag

View solution in original post