Movie Component Featured Image

Movie component using Sightly and WCM– USE API in AEM 6.1


Sightly was the part of AEM 6.0 release. For people who are beginner in sightly it might be difficult to forget the practices of working with JSP and using scriptlets in you JSP files. To make you sure you are comfortable with sightly basics we started release basic Sightly component and examples.

Here’s is one more I am going to demonstrate a movie component which uses tabs and a OSGI services.

Overview of component…

General use case for this component can be of sharing movie details and reviews. I am sure you might have seen on a lot of movie booking sites where for a movie trailer, details, reviews, ratings and upcoming movies. We tried creating a similar component.

Let’s get started with authoring it…

1. Use  Tab Component from Sidekick on your page

Component in Sidekick

2. Component is having many tabs to author, some of them I have shown below:

Header title you want to give to all tabs

Movie Component Header tab

Details from where the banners of upcoming movies will be taken

Movie Component Upcoming Movies 

Authoring movies details and trailers from DAM

Movie Component Movie Details Tab

Add Reviews from any two people

Movie Component Review tab

 3. Once authoring is done, rendered component will look like this

Movie trailer and details

Movie Details

Experience from author and rating by him 


Reviews from outside world


Banners of upcoming movies taken from path authored in componentUpcoming movies

Time to move to code part…

In order to show trailer I have used video.js library. Banner for the upcoming movies are coming from the path authored. A class implementing sightly WCMUse  interface path the data from dialog to OSGI service which further calls the query builder.

Once all the content has been authored and retrieved from repository, it will be rendered by sightly file

Code is available on Github repository and complete article is available in AEM Helpx Articles.

Let me know if you need any help in implementation.

Leave a Reply

Your email address will not be published. Required fields are marked *