Skip to content

Latest commit

 

History

History
72 lines (48 loc) · 3.61 KB

README.md

File metadata and controls

72 lines (48 loc) · 3.61 KB
Raw

Static Html Component

Security Warning 💥🔥❗⚠️

This use case lets authors upload arbitrary HTML/CSS/JS code to AEM that will be run un-sandboxed at the moment. This is just a proof-of-concept and is not be meant for production environments where malicious code could have severe impact on the system.
At a minimum, the feature should be limited to a single trusted author using proper ACLs.

Use Case

Acme is a company that uses digital signage screens to advertise its retail products. The designers of the company are used to create complex animations for their advertisement campaigns on their website using Adobe Animate CC and also want to include these animations directly on the digital signage screens.

This how-to project walks you through how to achieve this by exporting the animation to an HTML, CSS and JS files combination and importing them using a custom component in AEM Screens.

The project has a main sequence channel that contains a custom Static Html Component to which we uploaded a zip file containing the Adobe Animate CC HTML/CSS/JS export. A dedicated servlet extracts the content of the zip file and resolves it so it can be played in the channel.

Architecture Diagram

Static HTML Component Architecture Diagram

How to Use the Sample Content

  1. Edit the Static HTML Content Channel
  2. Edit the Static Html Component and upload a zip file with your animation
    • The zip file needs to have an index.html file at its root that runs the animation (such as an Adobe Animate CC HTML export)
  3. Preview the channel

Technical Details

Compatibility

AEM version Compatibility Comments
6.3 ✅
6.4 ✅

Features built upon

The solution uses:

  • a dedicated servlet that will extract the uploaded zip file and extract the containing HTML/CSS/JS
  • a custom Static Html Component that plays the extracted HTML/CSS/JS

Manual installation

This module requires HowTo project and is part of the install process. Follow instructions here.

If you still want to install the module individually, you can run:

mvn clean install content-package:install

Manual content setup

  1. Create a screens project
  2. Create a new sequence channel for the master sequence
  3. Edit the channel and add a Static Html Component
  4. Configure the component and upload a zip file with the animation

Sample Content Links