Show Menu
ARGOMENTI×

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

Text Overlay is a feature available in AEM Screens that allows you to 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, please refer to Extending an AEM Screens Component .
This section only showcases how to use and leverage the poster component in an AEM Screens project and use it as text overlay in one of your sequence channels.

Using Text Overlay

The following section describes the use of text overlay in an AEM Screens project.
Prerequisites
Before you start implementing this functionality, please 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 to open the editor.
  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

Using the Text Overlay properties, you can add text to any of the component 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, underline, and so on.
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 allows the user to align the text horizontally or vertically or additionally 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 200px. The result of this expression will be 200 pixels from start point.

Using ContextHub Values in Text Overlay

The following section describes the usage of values from a data store, for example, google sheets in text overlay component.
Prerequisites
You must set up ContextHub configurations for your AEM Screens project.
To learn how to setup and manage data driven asset changes using a a data store, refer to Configuring ContextHub in AEM Screens .
Once you have 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 click Properties from the action bar.
  2. Select the Personalization tab to setup the ContextHub configurations.
    1. Select the ContextHub Path as libs > settings > cloudsettings > default > ContextHub Configurations and click Select.
    2. Select the Segments Path as conf > screens > settings > wcm > segments and click Select.
    3. Click Save & Close .
      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 to open the editor.
  4. Add an image and text overlay component to your image as described in Using Text Overlay section of this page.
  5. Click on Configure (wrench icon) to open the Image dialog box.
  6. Navigate to the ContextHub tab from the Image dialog box. Click Add .
    If you have not setup your ContextHub configurations, this option will be 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), and enter the Default Value as 20 , a shown in the figure below. Once you are done click on the check-mark.
    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 , as shown in the figure below.
  9. Click on Preview to view the desired output.