Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Creating custom mobile emulators for layout

Avatar

Avatar
Validate 1
Level 2
jwepurchase
Level 2

Likes

2 likes

Total Posts

14 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 1
Applaud 5
Affirm 1
View profile

Avatar
Validate 1
Level 2
jwepurchase
Level 2

Likes

2 likes

Total Posts

14 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 1
Applaud 5
Affirm 1
View profile
jwepurchase
Level 2

27-02-2020

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?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 1
Level 2
jwepurchase
Level 2

Likes

2 likes

Total Posts

14 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 1
Applaud 5
Affirm 1
View profile

Avatar
Validate 1
Level 2
jwepurchase
Level 2

Likes

2 likes

Total Posts

14 posts

Correct Reply

2 solutions
Top badges earned
Validate 1
Boost 1
Applaud 5
Affirm 1
View profile
jwepurchase
Level 2

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

Answers (3)

Answers (3)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,429 likes

Total Posts

3,304 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,429 likes

Total Posts

3,304 posts

Correct Reply

937 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

28-02-2020

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

644 likes

Total Posts

605 posts

Correct Reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

644 likes

Total Posts

605 posts

Correct Reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

28-02-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!

Avatar

Avatar
Level 1
chau_khap329255
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile

Avatar
Level 1
chau_khap329255
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile
chau_khap329255
Level 1

27-04-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?