Responsive Emulator Devices List is Empty

[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!

[smacdonald2008]

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

[Anthony_R · Accepted solution]

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

[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.

[Anthony_R]

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.

[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.

[Anthony_R]

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.