Adding Components to a Channel
- Topics:
- Authoring Screens
CREATED FOR:
- Intermediate
- Admin
- Developer
Components are the fundamental elements of the AEM (51黑料不打烊 Experience Manager) experience. You can use several 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 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:
-
Click the channel. For example,
We.Retail In Store
> Channels > Idle Channel. -
Click Edit from the action bar.
-
In the AEM Editor, click the + icon from the side bar.
-
All the components that are included by default in an AEM Screens project displays, as shown in the figure below.
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:
-
Click the channel where you want to add a component. For example,
We.Retail In Store
> Channels > Idle Channel. -
Click Edit from the action bar.
-
Click Design mode.
-
Click the entire design editor on the right and click the settings symbol so you can open the Parsys Design dialog box.
-
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.
Understanding AEM Screen Components
The following section explains the AEM Screens components that you can use in your project.
Application
The Application component lets you add an application to your channel.
The application component has the following properties:
The following example shows how to embed an application component along with the preview of its properties:
Channel
The Channel component lets you add an entire channel to your project.
The Channel component has the following properties:
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:
Embedded Sequence
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:
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:
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.
Image
An Image lets you add an image to your channel.
The image asset has three tabs namely Image, Accessibility, and Sequence:
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.
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
The transition component has the following properties:
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
Video
The Video component lets you add a video to your Screens project.
The video component has the following properties:
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.