Text Overlay text-overlay
This section covers the following topics:
- Overview
- Using Text Overlay
- Understanding Text Overlay Properties
- Using ContextHub Values in Text Overlay
Overview overview
Text Overlay is a feature available in AEM Screens. It lets you create a compelling experience in a Sequence Channel by providing a title or a description overlaid on top of an image.
To learn how to create your own custom component, see Extending an AEM Screens Component.
This section only showcases how to use and apply the poster component in an AEM Screens project. It also showcases using it as a text overlay in one of your sequence channels.
Using Text Overlay using-text-overlay
The following section describes the use of text overlay in an AEM Screens project.
Prerequisites
Before implementing this functionality, make sure you have set up a project as a prerequisite to start implementing text overlay. For example,
-
Create an AEM Screens project (in this example, TextOverlayDemo)
-
Create a sequence channel titled as TextSample under the Channels folder
-
Add content to your TextSample Channel
The following image shows the TextOverlayDemo project with the TextSample channel in the Channels folder.
Follow the steps below to use text overlay in an AEM Screens channel:
-
Navigate to TextOverlayDemo > Channels > TextSample and click Edit from the action bar.
-
Click the image and click Configure (wrench icon) to open the properties dialog box.
-
Click the Text Overlay option from the navigation bar of the dialog box, as shown in the figure below.
Understanding Text Overlay Properties understanding-text-overlay-properties
Using the Text Overlay properties, you can add text to any of the components in your Screens project. The following section provides an overview of the properties that are available in Text Overlay:
You can add a text to the text box and add typographical emphasis such as bold, italics, and underline.
Color Variant This option allows the text to be either Dark (text in black color) or Light (text in white color).
Sizing & positioning This option lets the user align the text horizontally or vertically or also use fine-grained tools for text alignment.
Using ContextHub Values in Text Overlay using-text-overlay-context-hub
The following section describes the usage of values from a data store, for example, google sheets in the text overlay component.
Prerequisites
Set up ContextHub configurations for your AEM Screens project.
To learn how to setup and manage data driven asset changes using a data store, see Configuring ContextHub in AEM Screens.
After you set up the required configurations for your project, follow the steps below to use values from the Google Sheets:
-
Navigate to TextOverlayDemo > Channels > TextSample and click Properties from the action bar.
-
Click the Personalization tab so you can set up the ContextHub configurations.
-
Click the ContextHub Path as libs > settings > cloudsettings > default > ContextHub Configurations and click Select.
-
Click the Segments Path as conf > screens > settings > wcm > segments and click Select.
-
Click Save & Close.
note note NOTE Use the ContextHub and the Segments path, where you initially saved your context hub configurations and segments. 
-
-
Navigate to TextOverlayDemo > Channels > TextSample and click Edit from the action bar.
-
Add an image and text overlay component to your image as described in the Using Text Overlay section of this page.
-
Click on Configure (wrench icon) to open the Image dialog box.
-
Navigate to the ContextHub tab from the Image dialog box. Click Add.
note note NOTE If you have not set up your ContextHub configuration, this option is disabled for your project. -
Enter Value in the Placeholder field. Click the row that you want to get the value from your Google sheet in ContextHub Variable. In this case, the value is retrieved from row 2 and column 1 from the Google sheets. Now, enter the Default Value as 20, a shown in the figure below. When you are done, click the checkmark.
note note NOTE For your reference, the following image showcases the value that is retrieved from the Google Sheets: 
-
Navigate back to the Text Overlay tab from the Image dialog box and add the text Current Temperature {Value}, as shown in the figure below.
-
Click Preview.
