Adding Components to a Channel

Components are the fundamental elements of the AEM (Adobe Experience Manager) experience. You can use a number of components and add it to your channel in an AEM Screens project.

Components in AEM Screens

AEM Screens provide different AEM components that can be used in a Screens project.

Viewing AEM Screens Components

Whenever you create an AEM Screens project, you will see a list of default components that can be added to the project.

To view the default components to your Screens project, follow the steps below:

  1. Select the channel. For example, We.Retail In Store --> Channels --> Idle Channel.

  2. Click Edit from the action bar to open the AEM editor.

  3. Click the + icon from the side bar to open the components.

  4. All the components that are included by default in an AEM Screens project displays, as shown in the figure below.

screen_shot_2017-12-18at21350pm

Adding a New Component

AEM provides a number of other components. You can always add other components (not included by default) to your project, given that those are compatible with AEM Screens.

The following example shows the addition of a Livefyre component to a an AEM Screens project:

  1. Select the channel where you want to add a new component. For example, We.Retail In Store --> Channels --> Idle Channel.

  2. Click Edit from the action bar to open the editor.

  3. Select Design mode.

  4. Select the entire design editor on the right and click on the settings symbol to open the ParSys Design dialog box.

  5. You can select the components that you want to import to your AEM Screens project. The following example shows the addition of Livefyre component to an AEM Screens project.

adding_components

NOTE

Similarly, you can add any number of other new components that are compatible with AEM Screens to your project.

Understanding AEM Screen Components

The following section explains the AEM Screens components that you can use in your project.

NOTE

To view the properties of any component, select the component and click on the hammer icon to open/view properties.

Application

The Application component allows you to add an application to your channel.

Application component has the following properties:

Property Description
Application Path Select the absolute path where the application exists.
Duration (ms) Select the duration of the application. By default, the duration is set to -1, that means the element runs forever (that is, single page application). Setting the duration value >0, shows the element for the specified duration and then moves on to the next one.

The following example shows how to embed an application component along with the preview of its properties:

adding_componentsapplication

NOTE

Refer to the example above to view properties of each of the components below.

Channel

The Channel component allows you to add an entire channel to your project.

The Channel component has the following properties:

Property Description
Channel Path Select this absolute path where the application exists.
Duration (ms) Select the entire duration of the channel. Setting the duration as -1 indicates that the embedded channel will run its full length in a particular channel.

Embedded Page

An Embedded Page allows you to add an embedded page to your project. For example, it can be a web application or a product catalog.

The Embedded page has the following properties:

Property Description
Page Path
 Select this absolute path where the channel exists.
Duration (ms) Select the entire duration of the channel. Setting the duration as -1 indicates that the embedded channel will run its full length in a particular channel.

Embedded Sequence

NOTE

Refer to Embedded Sequences under Authoring Screens section, to learn in detail about embedded sequences.

An Embedded Sequence allows you to add an embedded sequence channel inside your existing channel (with other assets).

The Embedded Sequence has the following page properties:

Property Description
Channel Path Select the absolute path of the sequence that you want to include in your channel.
Duration (ms) Select the entire duration of the channel. Setting the duration as -1 indicates that the embedded channel will run its full length in a particular channel.
Strategy Set it to original or single. Setting the value to original means that the subsequence will run fully on each cycle of the parent sequence. The other possible value is single and that would only show one item of the subsequence on each run (for instance, the 1st item on the first loop, 2nd item on the second loop, and so on.)

Dynamic Embedded Sequence

A dynamic embedded sequence allows to add a sequence similar to the above mentioned except by channel role.

Refer to Embedded Sequences under Authoring Screens section, to learn in detail about embedded sequences.

The dynamic embedded sequence has the following properties:

Property Description
Channel Assignment Role
 Enter the channel role.
Duration (ms) Select the entire duration of the channel. Setting the duration as -1 indicates that the embedded channel will run its full length in a particular channel.
Strategy Set it to original or single. Setting the value to original means that the subsequence will run fully on each cycle of the parent sequence. The other possible value is single and that would only show one item of the subsequence on each run (for instance, the 1st item on the first loop, 2nd item on the second loop, and so on.)

Experience Fragment

An Experience Fragment allows you to add an experience fragment (group of one or more components including content and layout that can be referenced within pages) to your AEM Screens channel. Drag and drop the component to AEM editor and select the experience fragment.

To learn more about how to create an experience fragment and leverage it into an AEM Screens project, refer to Using Experience Fragments.

exp

Property Description
Experience Fragment
Experience Fragment Select the experience fragment.
Duration Select the entire duration of the experience fragment that plays in the channel.
Offline Config
Client-side Libraries Javascript and CSS files.
Static Files Static files that you can add as offline configs to your experience fragment.
NOTE

The Client-side Libraries and the Static Files that you add from this component will be in addition to already configured Client-side Libraries and the Static Files that are added from the experience fragment’s Properties.

Image

An Image allows you to add an image to your channel.

The image asset has three tabs namely Image, Accessibility, and Sequence:

Property Description
Image
Image Asset Select the image asset.
Title Title of the image.
Link To Add a link to the image.
Description Brief description for the image.
Size Size of the image.
Accessibility
Alternative Text Alternative text to the image.
Sequence
Duration By default the duration is set to 8000 ms. If you want to change the playback duration of the image, update the Duration field.

Transition

The Transition component allows you to add a transition to your Screens project.

The following image shows the transition component (added via drag and drop) to the editor.

screen_shot_2019-07-25at104237am

Select the transition icon and click the Configure (wrench icon) to open the Transition dialog box. This dialog box includes three tabs:

  • Transition
  • Sequence
  • Activation
NOTE

By default, the sequence is set to 600 ms. You can update the transition sequence to other value using the Sequence tab.

transition

The transition component has the following properties:

Property Description
Transition
Type

The type of the transition between the element before and the one after. The transition Type includes the following options:

  • Normal
  • Fade
  • Slide in from Right
  • Slide in from Left
  • Slide in from Top
  • Slide in from Bottom
Sequence
Duration Select the entire duration of the transition. By default, it is set to 600 ms.
Activation
Active From Timestamp that describes from when the transition can be active.
Active Until Timestamp that describes until when the transition can be active.
Schedule Add a pre-defined schedule.

Video

The Video component allows you to add a video to your Screens project.

The video component has the following properties:

Property Description
Video asset Select the link to the video.
Duration Select the duration of the video. By default, the duration is set to -1, that means the element runs forever. Setting the duration value >0, shows the element for the specified duration and then moves on to the next one.
Rendering

If the video aspect ratio does not fit the screen, you can adjust the rendering to either contain or cover.

Contain means the full video is displayed and the missing areas are padded with a black border.

Cover means the video covers the whole viewport, but some parts that overflow on the sides are hidden.
Size Size of the video.

Business.Adobe.com resources

Docs links
Targeted Content Personalized Communications Document Generation Dynamic Media Headless Cms Digital Asset Management

On this page