Text Overlay text-overlay

This section covers the following topics:

  • Overview
  • Using Text Overlay
  • Understanding Text Overlay Properties
  • Using ContextHub Values in Text Overlay
The Text Overlay feature is only available if you have installed AEM 6.3 Feature Pack 5 or AEM 6.4 Feature Pack 3.

Overview overview

Text Overlay is a feature available in AEM Screens that 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 and use it as 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.


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 Channels folder

  • Add content to your TextSample Channel

The following image shows the TextOverlayDemo project with TextSample channel in Channels folder.


Follow the steps below to use text overlay in an AEM Screens channel:

  1. Navigate to TextOverlayDemo > Channels > TextSample and click Edit from the action bar.


  2. Select the image and click Configure (wrench icon) to open the properties dialog box.


  3. Select 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.

To properly use fine-grained tools, be sure to identify the correct position in pixels using (px) as a suffix, for example 200 px. The result of this expression is 200 pixels from start point.

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 text overlay component.


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:

  1. Navigate to TextOverlayDemo > Channels > TextSample and select Properties from the action bar.

  2. Select the Personalization tab so you can set up the ContextHub configurations.

    1. Select the ContextHub Path as libs > settings > cloudsettings > default > ContextHub Configurations and select Select.

    2. Select the Segments Path as conf > screens > settings > wcm > segments and select Select.

    3. Select Save & Close.

      note note
      Use the ContextHub and the Segments path, where you initially saved your context hub configurations and segments.


  3. Navigate to TextOverlayDemo > Channels > TextSample and click Edit from the action bar.


  4. Add an image and text overlay component to your image as described in Using Text Overlay section of this page.

  5. Select on Configure (wrench icon) to open the Image dialog box.


  6. Navigate to the ContextHub tab from the Image dialog box. Select Add.

    note note
    If you have not set up your ContextHub configuration, this option is disabled for your project.
  7. Enter Value in the Placeholder field. Select 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
    For your reference, the following image showcases the value that is retrieved from the Google Sheets:


  8. 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.


  9. Select Preview.