Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Layout Container, Responsive Grid Layouting JS Error from editor.js

Avatar

Level 4

I'm attempting to follow the instructions for configuring our pages to realize the responsive grid as the default paragraph system. 

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

Using Geometrixx Media as a reference, when I select Layouting, there is a toggle emulator button which hides/shows the emulator bar, which has buttons for iPhone, iPad and Desktop. Clicking these links sizes the viewport, and allows layout to be set accordingly. This all works fine for Geometrixx Media.

On my page after selecting Layouting, the emulator bar is always present. There is no button to toggle the emulator bar visibility. Clicking on the emulator titles, I see a JS error in the console.

Uncaught TypeError: Cannot read property 'responsive' of undefined

Relating to ...

        /**
         * Applies a device based on the name which has to be part of the page info
         * Or a forced config
         * @param devicename {String}
         * @param [config] {}
         */
        applyDevice: function (devicename, config) {
            var cfg = config || ns.page.info.emulators.groups.responsive[devicename],

 

 

My breakpoints appear correct, and are displayed.  I'm using the cq:deviceGroup = /etc/mobile/groups/responsive

        <cq:responsive jcr:primaryType="nt:unstructured">
          <breakpoints jcr:primaryType="nt:unstructured">
            <xs jcr:primaryType="nt:unstructured" title="{String}Mobile (Extra Small)" width="{Decimal}767"/>
            <sm jcr:primaryType="nt:unstructured" title="{String}Tablet (Small)" width="{Decimal}991"/>
            <md jcr:primaryType="nt:unstructured" title="{String}Desktop (Medium)" width="{Decimal}1199"/>
            <!-- <lg jcr:primaryType="nt:unstructured" title="{String}Desktop (Large)" width="{Decimal}991"/> -->
          </breakpoints>
        </cq:responsive>      

1 Accepted Solution

Avatar

Correct answer by
Level 4

It turns out the xml title for the config had the wrong name.. com.day.cq.wcm.mobile.core.impl.MobileEmulatorProv-lsa.xml

not..  com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-lsa.xml

therefore the emulators object was empty in the page info .. /libs/wcm/core/content/pageinfo.json?path=%2Fcontent%2F......

So it's working now :-)

View solution in original post

2 Replies

Avatar

Correct answer by
Level 4

It turns out the xml title for the config had the wrong name.. com.day.cq.wcm.mobile.core.impl.MobileEmulatorProv-lsa.xml

not..  com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-lsa.xml

therefore the emulators object was empty in the page info .. /libs/wcm/core/content/pageinfo.json?path=%2Fcontent%2F......

So it's working now :-)

Avatar

Level 10

Thank you for posting the solution!