Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Responsive Emulator Devices List is Empty

Avatar

Former Community Member

I have been attempting to get the responsive simulator working.

 

I am running 5.6, and I can see it working just fine when I go to geometrixx-media and switch to Preview mode to get the devices dropdown list and switch between them.

 

On my site, I have created the sling:OsgiConfig, setup the cq:deviceGroups and included the simulator.jsp, all as instructed on the documentation (http://dev.day.com/docs/en/cq/5-6/developing/mobile/responsive.html).

 

No matter what I do, all I'm able to get is the Devices and Rotate buttons to show visible, but Devices does not have any items within its menu.

 

I saw a prior discussion on this but the recommended fix (if we can call it that since the original poster never commented on his status) did not have any affect on my instance.

 

Any help is appreciated.

 

Thanks!

1 Accepted Solution

Avatar

Correct answer by
Level 3

Hi Jason,

If you are seeing the Devices button with no drop down that means CQ doesn't think the page is mobile enabled.

You can test this out by requesting http://localhost:4502/libs/wcm/core/content/pageinfo.json?path=<path to your site>

Do you see an "emulators" property in the returned JSON?

If you don't that means CQ doesn't think the resource type for the current page is a mobile page.

To verify this head on over to the OSGI web console http://localhost:4502/system/console/configMgr and search for "MobileEmulatorProvider".  Make sure your site's page component or some parent page component is listed as one of the mobile resource types.  If your resourceType is not listed it probably means your OSGI Config is not setup correctly.  Verify the name of your config.xml is unique (ie. don't copy the geometrixx sample without renaming it first).

Hopefully these suggestions help you out.

Anthony

View solution in original post

6 Replies

Avatar

Level 10

IF you are following the documentation and its not working -- then you have encountered a bug - please open a ticket at:

http://helpx.adobe.com/marketing-cloud/contact-support.html

Avatar

Correct answer by
Level 3

Hi Jason,

If you are seeing the Devices button with no drop down that means CQ doesn't think the page is mobile enabled.

You can test this out by requesting http://localhost:4502/libs/wcm/core/content/pageinfo.json?path=<path to your site>

Do you see an "emulators" property in the returned JSON?

If you don't that means CQ doesn't think the resource type for the current page is a mobile page.

To verify this head on over to the OSGI web console http://localhost:4502/system/console/configMgr and search for "MobileEmulatorProvider".  Make sure your site's page component or some parent page component is listed as one of the mobile resource types.  If your resourceType is not listed it probably means your OSGI Config is not setup correctly.  Verify the name of your config.xml is unique (ie. don't copy the geometrixx sample without renaming it first).

Hopefully these suggestions help you out.

Anthony

Avatar

Former Community Member

Hi Anthony,

 

Thanks for the tips.

My output from the page info includes the emulators:

"emulators":{
      "groups":{
         "responsive":{
            "title":"Responsive Devices",
            "description":"The devices in this group are able to display a website built using responsive design patterns.",
            "path":"/etc/mobile/groups/responsive",
            "iphone3gs":{
               "text":"iPhone 3GS",
               "action":"start",
               "path":"/libs/wcm/mobile/components/emulators/ios/iphone3gs",
               "canRotate":true,
               "hasTouchScrolling":true,
               "contentCssPath":"/etc/mobile/groups/responsive/static.css"
            },
            "iphone4":{
               "text":"iPhone 4",
               "action":"start",
               "path":"/libs/wcm/mobile/components/emulators/ios/iphone4",
               "canRotate":true,
               "hasTouchScrolling":true,
               "contentCssPath":"/etc/mobile/groups/responsive/static.css"
            },
            "iphone5":{
               "text":"iPhone 5",
               "action":"start",
               "path":"/libs/wcm/mobile/components/emulators/ios/iphone5",
               "canRotate":true,
               "hasTouchScrolling":true,
               "contentCssPath":"/etc/mobile/groups/responsive/static.css"
            },
            "ipad":{
               "text":"iPad",
               "action":"start",
               "path":"/libs/wcm/mobile/components/emulators/ios/ipad",
               "canRotate":true,
               "hasTouchScrolling":true,
               "contentCssPath":"/etc/mobile/groups/responsive/static.css"
            },
            "ipad3":{
               "text":"iPad Retina",
               "action":"start",
               "path":"/libs/wcm/mobile/components/emulators/ios/ipad3",
               "canRotate":true,
               "hasTouchScrolling":true,
               "contentCssPath":"/etc/mobile/groups/responsive/static.css"
            },
            "galaxytab":{
               "text":"Samsung Galaxy Tab",
               "action":"start",
               "path":"/libs/wcm/mobile/components/emulators/galaxytab",
               "canRotate":true,
               "hasTouchScrolling":true,
               "contentCssPath":"/etc/mobile/groups/responsive/static.css"
            },
            "nexus7":{
               "text":"Nexus 7",
               "action":"start",
               "path":"/libs/wcm/mobile/components/emulators/nexus7",
               "canRotate":true,
               "hasTouchScrolling":true,
               "contentCssPath":"/etc/mobile/groups/responsive/static.css"
            }
         }
      }
   }

 

Also in the OSGI for MobileEmulatorProvider, I have the one for my configuration showing with all the paths for my page rendering components, for example: mysite/components/page/pageBase.

 

Not too sure what else I can do here.

 

One solution I have found, is since I follow the same model they recommend (/content/mysite/en/home), is setting my resourceType on /content/mysite to geometrixx-media/components/page.  This seems to cascade down and temporarily fix the issue, but it prohibits me from setting up proper redirect pages on that root level.  It holds up for demo purposes, but its not a feasible long term solution.

Avatar

Level 3

Well that is a little more odd then.  If you are seeing emulators defined in the JSON for the same page you are trying to preview then those emulators should be showing up under the Devices button.

It doesn't feel like there is a bug yet but you could open up a web inspector in your browser to see if any Javascript errors are occurring when entering Preview mode.  You could also check the network inspector to verify the pageInfo.json that is requested for the page in question definitely contains the list of emulators.

Avatar

Former Community Member

Anthony.R wrote...

Well that is a little more odd then.  If you are seeing emulators defined in the JSON for the same page you are trying to preview then those emulators should be showing up under the Devices button.

It doesn't feel like there is a bug yet but you could open up a web inspector in your browser to see if any Javascript errors are occurring when entering Preview mode.  You could also check the network inspector to verify the pageInfo.json that is requested for the page in question definitely contains the list of emulators.

 

No JS errors in the console, and I see all the emulators in the pageInfo.json response.  I also threw in a breakpoint at the launch function within simulator.js and I *do* see the emulators within the config object, but it still doesn't draw in the emulators to the list.

Avatar

Level 3

The addition of emulators to the devices button is done deep within the Sidekick JS code.

There is a getPreviewPanelConfig() function that adds the buttons and then getEmulatorMenuConfig() is called which looks up pageInfo["emulators"] and iterates through the array.

For some reason your specific use case is causing an un-handled failure to occur on the client.  A bug may need to be logged if you are unable to solve the issue on your end.