Creating custom mobile emulators for layout | Community
Skip to main content
jwepurchase
Level 2
Feb 27, 2020 9:05 PM UTC
Solved

Creating custom mobile emulators for layout

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.
jwepurchaseAccepted solution
Level 2
Mar 3, 2020 7:59 PM UTC

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.

View reply

6 replies

chau_khap329255
chau_khap329255
New Participant
Apr 27, 2020 9:37 PM UTC

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?

Translate
jwepurchaseAuthorAccepted solution
Level 2
Mar 3, 2020 7:59 PM UTC

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.

Translate
arunpatidar
arunpatidar
New Participant
Feb 28, 2020 8:42 PM UTC

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/

 

Translate
Arun Patidar
    jwepurchaseAuthor
    Level 2
    Mar 3, 2020 7:40 PM UTC
    The miscadmin tool seems broken. I can't use it to add emulators to the list. Fortunately, crx/de still gets the job done.
    Translate
    BrianKasingli
    BrianKasingli
    New Participant
    Feb 28, 2020 8:16 PM UTC

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

    Translate
      jwepurchaseAuthor
      Level 2
      Mar 3, 2020 7:48 PM UTC
      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.
      Translate
      Terms & ConditionsAccessibility statement

      Loading footer...