Creating custom mobile emulators for layout | Community
Skip to main content
J
jwepurchase
February 27, 2020
Solved

Creating custom mobile emulators for layout

  • February 27, 2020
  • 4 replies
  • 4458 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by jwepurchase

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.

4 replies

BrianKasingli
Community Advisor and Adobe Champion
BrianKasingliCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
February 28, 2020

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

    J
    jwepurchaseAuthor
    March 3, 2020
    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
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    February 28, 2020

    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-emulator-in-aem-6/

     

    Arun Patidar
      J
      jwepurchaseAuthor
      March 3, 2020
      The miscadmin tool seems broken. I can't use it to add emulators to the list. Fortunately, crx/de still gets the job done.
      J
      jwepurchaseAuthorAccepted solution
      March 3, 2020

      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
      chau_khap329255
      April 27, 2020

      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?

      Terms & ConditionsAccessibility statement

      Loading footer...