Create Custom AEM Mobile Emulator

AEM comes with a number of mobile emulators, which helps authors to test their content with same look and feel like actual devices without buying them.

AEM Mobile Emulator is very easy to create and flexible to configure according to authors need. Lets see How to create our own mobile emulator in AEM

Topics covered in this tutorial:-

Create an Emulator Component
Create an overlay from existing Mobile Emulator
Test our new Emulator

Now lets see how to create a custom mobile emulator and configure it for authoring.

Create an AEM Emulator Component:

Create a Project and follow this tutorial to create a website structure first. Once you have create a website structure, then follow below steps:-

Open CRXDE Lite.
Go to <Project>/ <components> folder and Create a new folder by name emulators.
Right click on emulators folder and create a new component (for custom emulator)name myemulator and enter below details.
- Label: myemulator
- Title: myemulator
- Description: This is my custom emulator – AEMCQ5Tutorials
- SuperType: wcm/mobile/components/emulators/base
Click Next until you reach till last screen. Click OK and click Save All changes.
Delete the myemulator.jsp as we are not going to use it. We will be using default jsp that is shipped with AEM.
Click SaveAll.

We have created an emulator component, now lets overlay it.

Create an overlay from existing Mobile Emulator

Now lets see how to overlay out of the box aem mobile emulators functionalities, to our new custom emulator. Follow below steps to overlay :

Go to /libs/wcm/mobile/components/emulators . Select the type of emulator you want to overlay. For example in this tutorial i am overlaying an Android Emulator.
Copy css and resources folder along with thumbnail.png from /libs/wcm/mobile/components/emulators to /apps/training/components/emulators/myemulator folder. Now your project structure should look like below screenshot.
- If you want to use different image for your custom aem mobile emulator, update thumbnail.png and images under resources folder.
  - Thumbnail.png- Image that used to be displayed in carousel.
  - sidekick-icon-android.png – Image that represent emulator in Sidekick.
  - bg.png – background image in which our content is displayed.
Double click on emulator.css, to modify it according to our new emulator. Replace class name android to myemulator for all matches. [Note:- ]
Select myemulator Node. Right click and create a new node with name cq:emulatorConfig under it of type nt:unstructured to store emulator configurations.
- Note:- This node is used to store specific functionality, that you want your emulator exhibit in addition to default functionalities.
Add below Node properties on cq:emulatorConfig.
- Name = canRotate, Type = Boolean, Value = true. Includes the rotation functionality.
- Name = touchScrolling, Type = Boolean, Value = true. Includes the touch scrolling functionality.

We have successfully created and configured our custom aem mobile emulator, Lets see how to use it in AEM.

Open Tools (localhost:4502/miscadmin).
Go To Tools -> Mobile -> Device Group -> Smart Phones.
Double click on Smart Phones Page, to add custom emulator.
Click Edit.
Go to Emulator Tab and select myemulator from list of available emulators.

Test custom aem mobile emulator:

Open SiteAdmin.
Go to any mobile site Page. For ex: [Websites->Geometrixx Mobile Demo Site -> English]
Double click English Page. Your Custom AEM mobile emulator will open in Touch UI.
Replace editor.html to cf# in page url to open Custom AEM mobile emulator in Classic UI.

Now Authors can test sites without owning the device, with same look and feel.

If you face any issue in implementing custom mobile emulator in aem. Please leave a comment.

Spread the love

6 Responses to "Create Custom AEM Mobile Emulator"

Mark A says:
January 13, 2016 at 1:19 am
Thanks for the info on setting this up. I am sure it will be useful to me when a client requests this feature. Currently it’s not a tool that I use regularly. I prefer to do all my testing on actual devices as it gives me an accurate result. I do see the value add for authors without development experience.
I could be totally wrong here, but isn’t the term “emulator” a bit of a misnomer? AEM is not actually emulating the device in the actual device browser with all of it’s quirks, but rather showing authors approximately how things will layout or fit into a specific device size. Seems more appropriate to call it a “layout visualizer”. It also seems reckless of Adobe to give authors a false sense that everything is working correctly on a device when in fact it may be completely broken.
Reply
1. Ankur Ahlawat says:
  January 13, 2016 at 3:39 am
  Yes i completely agree with you Mark. Emulator in AEM just wraps the content into the background image that we provide, but the major advantage i see is that it saves testing time & money atleast when content author drag and drop the component, they gets the feel how it would look in actual device. They can own one iphone or or android phone for actual testing, for other similar devices they can use emulator rather than buying 10 different android phones.
  Reply
  1. Ankit says:
    September 22, 2016 at 11:51 pm
    Nice Post Ankur,
    It helped me to understand emulator logic.
    One issue i am facing is.
    by default in miscadmin#/etc/mobile/groups/touch some device are listed, I was trying to add more devices emulators like iphone5, 6, 6+ ,it is getting saved, but when we open any mobile site, these newly added emulators are visible as black box only, and viewing page on those is just showing full screen view, not able to see page inside any device container (only for 5,6,6+), Can you tell mw what I am missing ?
    And also eventually we want to add it for iphone7 as well, can you please let me know the whole process to add a new device and simulate all the scenarios.
    Thanks in advance
    Ankit
    Reply
    1. Ankit says:
      September 23, 2016 at 12:07 am
      Hi Ankur,
      I just checked there is no css, resources folder inside /libs/wcm/mobile/components/emulators/ios/iphone5, 6, 6+ and for some more devices, it this can be the issue that i am not getting look n feel.
      I am using aem 6.1.
      Thanks
      Ankit Jain
      Reply
Yasmin says:
October 3, 2016 at 7:55 am
I am Using AEM 6.1. The Mobile Functionality works fine in the local installation. When Deploy it to the Server the Device List remains empty, all I’m able to see is the Devices and Rotate button. The OSGI Config looks fine.
Any help is appreciated.
Thanks
Reply
How to Implement a Responsive Layout in AEM part 5 - Adobe Experience Manager Podcast says:
November 29, 2016 at 3:48 pm
[…] illustrate the point well. In these types of cases, follow the tutorial written by Ankur Ahlawat here to create your own emulator and add it to the responsive device group; Ahlawat also covers how to […]
Reply

AEM CQ5 Tutorials