DocumentationAEMAEM Screens Guide

Adding Components to a Channel adding-components-to-a-channel

Last update: Mon May 13 2024 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 several components and add it to your channel in an AEM Screens project.

Components in AEM Screens components-in-aem-screens

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

Viewing AEM Screens Components viewing-aem-screens-components

Whenever you create an AEM Screens project, you 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. Click the channel. For example, We.Retail In Store > Channels > Idle Channel.

  2. Click Edit from the action bar.

  3. In the AEM Editor, click the + icon from the side bar.

  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 adding-a-new-component

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

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

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

  2. Click Edit from the action bar.

  3. Click Design mode.

  4. Click the entire design editor on the right and click the settings symbol so you can open the Parsys Design dialog box.

  5. You can click the components that you want to import to your AEM Screens project. The following example shows the addition of the 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 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, click the component and click the hammer icon to open/view properties.

Application application

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

The application component has the following properties:

Property
Description
Application Path
Click the absolute path where the application exists.
Duration (milliseconds)
Click the duration of the application. By default, the duration is set to -1, that means the element runs forever (that is, a 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
See the example above to view the properties of each of the components below.

Channel channel

The Channel component lets you 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 (milliseconds)
Select the entire duration of the channel. Setting the duration as -1 indicates that the embedded channel runs its full length in a particular channel.

Embedded Page embedded-page

An Embedded Page lets you 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 (milliseconds)
Select the entire duration of the channel. Setting the duration as -1 indicates that the embedded channel runs its full length in a particular channel.

Embedded Sequence embedded-sequence

NOTE
To learn in detail about embedded sequences, see Embedded Sequences under the Authoring Screens section.

An Embedded Sequence lets you 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 (milliseconds)
Select the entire duration of the channel. Setting the duration as -1 indicates that the embedded channel runs its full length in a particular channel.
Strategy
Set it to original or single. Setting the value to the original means that the subsequence runs fully on each cycle of the parent sequence. The other possible value is single. Such a value only shows one item of the subsequence on each run. For example, the first item on the first loop, and the second item on the second loop.

Dynamic Embedded Sequence dynamic-embedded-sequence

A dynamic Embedded Sequence lets you add a sequence similar to the above mentioned except by channel role.

To learn more about embedded sequences, see Embedded Sequences under the Authoring Screens section.

The dynamic embedded sequence has the following properties:

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

Experience Fragment experience-fragment

An Experience Fragment lets you add an Experience Fragment (a 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 click the Experience Fragment.

To learn more about how to create an Experience Fragment and apply it to an AEM Screens project, see 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 configurations to your Experience Fragment.
NOTE
The Client-side Libraries and the Static Files that you add from this component are in addition to already configured Client-side Libraries and the Static Files that are added from the Experience Fragment’s Properties.

Image image

An Image lets you add an image to your channel.

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

Property
Description
Image
Image Asset
Click 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 milliseconds. If you want to change the playback duration of the image, update the Duration field.

Transition transition

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

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

screen_shot_2019-07-25at104237am

Click 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 milliseconds. You can update the transition sequence to other values 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 milliseconds.
Activation
Active From
Timestamp that describes from when the transition can be active.
Active Until
The timestamp describes until when the transition can be active.
Schedule
Add a pre-defined schedule.

Video video

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

The video component has the following properties:

Property
Description
Video asset
Click 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 that the full video is displayed and the missing areas are padded with a black border.

Cover means that 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