DocumentationAEMAEM Screens Guide

Adding Components to a Channel

Last update: Mon Jul 12 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Intermediate
  • Admin
  • Developer

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.
recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053