Creating custom mobile emulators for layout

[jwepurchase]

My client's media queries are based on the standard bootstrap media query sizes (576, 768, 992, 1200) and none of the existing emulators hit these marks exactly. So I created new ones based on /libs/wcm/mobile/components/emulators/ios/iphonex. I copied it and modified its cq:emulatorConfig properties, setting the device-pixel-ratio to 1 and the width and height to the approprtiate values.

After this I updated the emulator list in /etc/mobile/groups/responsive/jcr:content and it works.

The problem is that I've modified things under libs to get this to work. I've tried moving my custom emulators under a /conf directory, and pointing /etc/mobile/groups/responsive/jcr:content at this. This breaks the layout editor - the page refuses to load until I remove the custom emulators from the list.

Has anyone successfully done this without modifying /libs?

[BrianKasingli]

@jwepurchase,

Setting up custom emulators and breakpoints require additional CSS and JCR node setup. This good article will provide you with ways to set up this customization:https://medium.com/adobetech/customizing-the-aem-grid-3ff9c2121a36

Hope it helps!

[jwepurchase]

That does look like a good article. Unfortunately, it's scope appears restricted to setting up the break points. I don't see anything here about setting up custom emulators.

[arunpatidar]

Check this for reference

http://www.aemcq5tutorials.com/tutorials/custom-aem-mobile-emulator/

http://www.aemcq5tutorials.com/tutorials/custom-aem-mobile-emulator/attachment/add-new-custom-emulat...

[jwepurchase]

The miscadmin tool seems broken. I can't use it to add emulators to the list. Fortunately, crx/de still gets the job done.

[jwepurchase · Accepted solution]

I got a clue from Arun's post. (Thanks Arun.) I assumed that my emulators should be under the /conf directory because it felt like a configuration to me. But the emulators are components, so I placed them under /apps/<my-project>/components/emulators and that worked.

Now I can configure the "emulators" property of /etc/mobile/groups/responsive/jcr:content adding a name like "<my-project>/components/emulators/<my-emulator>" (no need to specify either the /libs or /apps nodes) and it shows up in the list of available emulators. I had to use crx/de to do this - for some reason the miscadmin tool that Arun referenced in his post didn't work for me. This wan't really a barrier for me so that's OK.

So now I have a custom emulator and I didn't have to modify /libs to do it.

[chau_khap329255]

hi,

I got an issue after creating custom devices. It shows the custom break point there but when I modify one layout, it affects other layouts as well. 

Do you get the same issue? Can you please give me advice for that?