Build Phygital customer experiences using AEM Screens Part 2 — Hands On Demo
As we covered the introduction and practical use cases for the AEM Screens solution in the previous article, let us do a hands (simple demo) on creating an AEM Screens project which will display some sequence images on a Screens Player.
Before Starting the demo, let us understand the different features available in the AEM Screens Project.
How can I use AEM Screens to create digital signages?
Creating and managing an application using AEM Screens is simple and intuitive.
An application hosts web pages built for AEM Screens by customers or implementation partners.
Locations manage pre-defined hierarchy and contains displays.
Each display has a dashboard that shows different devices and screens attached.
Content for AEM Screens is managed in channels.
AEM Screens Player renders content present within channels onto displays.
Prerequisite:
Allow Empty Referrer Requests in OSGi — Apache Sling Referrer Filter config
If the empty referrer property is disabled, the device cannot post a screenshot back. Currently some of these features are only available if the Apache Sling Referrer Filter Allow Empty is enabled in the OSGi Configuration.
Enable Https in Apache Felix Jetty Based HTTP Service for production Use
For local demo purpose HTTP is enough. It is recommended to use HTTPS for AEM Screens Server in production use. This is required for optimal operation of the control protocol between AEM Screens Player and AEM Screens server.
Hands-on Demo on Creating a Digital Signage Experience using AEM Screens:
Step 1: Navigate to AEM Screens console
http://localhost:4502/screens.html/content/screens
Step 2: Create a Screens Project by giving a title as Demo Store
Step 3: Select the demo project you created and click on create. It will show you the below options.
Step 4: Navigate to channel folder for your screens project and click on create will show you the below options
Step 5: Select Sequence Channel and name it as Demo Channel
Step 6: Now let us author some content in the demo channel. Click the icon that toggles side panel on left hand side of the action bar to open the assets and components. Drag and drop the components and author it as needed. In my use case, I used 4 image components with different image sets since it’s a sequence display.
Step 7: Create a location for your channel by navigate to locations folder in your project. Click on create and name it as demo location.
Step 8: Once you have created a location, you need to create a new display for your location. Navigate to demo location and click on create -> Select Display -> Name it as Demo Display
Step 9: Now we are going to assign the channel to a display to view the content. Navigate through Demo Store -> Locations -> Demo Location -> Select Demo Display and click on Assign Channel
Step 10: Select Demo Channel as below while assigning a channel. Also select Initial Load and Idle Screen in the Supported Events
Step 11: Open AEM Screens Player/ Chrome OS Player which you downloaded already (Detailed mentioned in Part-1 of this article)
Step 12: Now navigate to Channels folder in your project and click on Device Manager. Register your screens player with the paired code from AEM Screens APP. Then once your device registration is successful, you can see the device in the list as below.
Step 13: Once the device registration is successful, you can start seeing the content displayed in the screens window from the Demo Channel.
You can also preview the content by navigating to the demo channel and click on preview. Since my screens player was crashing intermittently, I previewed the Channel content as below,
Navigate to Demo Display, Click on dashboard. Select the device config and select Preview Device.
http://localhost:4502/content/screens/demo-store/channels/demo-channel.html?wcmmode=disabled
Yayy that’s it We successfully created an AEM Screens project which is displaying sequence images in the AEM Screens player.
Reference Links:
AEM Screens Guide:
AEM Screens Kickstart Guide: