Adding ContextHub UI Modes and Modules

Configure the UI modes and modules that appear in the ContextHub toolbar in Preview mode:

  • UI Modes: Groups of related modules
  • Modules: Widgets that expose context data from a store and enable authors to manipulate the context

UI modes appear as a series of icons on the left side of the toolbar. When selected, the modules of a UI mode appear to the right.

chlimage_1-319

Icons are references from the Coral UI icon library.

Adding a UI Mode

Add a UI mode to group related ContextHub modules. When you create the UI mode, you provide the title and icon that appear in the ContextHub toolbar.

  1. On the Experience Manager rail, click Tools > Sites > Context Hub.

  2. Click the default Configuration Container.

  3. Click the Context Hub Configuration.

  4. Click the Create button, and then click Context Hub UI Mode.

    chlimage_1-320

  5. Provide values for the following properties:

    • UI Mode Title: The title that identifies the UI mode
    • Mode Icon: The selector for the Coral UI icon to use, for example, coral-Icon--user
    • Enabled: Select to show the UI mode in the ContextHub toolbar
  6. Click Save.

Adding a UI Module

Add a ContextHub UI module to a UI mode so that it appears in the ContextHub toolbar for previewing page content. When you add a UI module, you are creating an instance of a module type that is registered with ContextHub. To add a UI module, you must know the name of the associated module type.

AEM provides a base UI module type as well several sample UI Module types upon which you can base a UI module. The following table provides a brief description of each one. For information about developing a custom UI module, see Creating ContextHub UI Modules.

The UI module properties include a detail configuration where you can provide values for module-specific properties. You provide the detail configuration in JSON format. The Module Type column in the table provides links to information about the JSON code required for each UI module type.

Module Type
Description
Store
A generic UI module type
Configured in the UI module properties
Displays information about the browser
surferinfo
Displays date and time information
datetime
Display the client device
emulators
Displays the latitude and longitude of the client, and the location on a map. Enables you to change the location.
geolocation
Displays the screen orientation of the device (landscape or portrait)
emulators
Displays statistics about page tags
tagcloud
Displays the profile information for the current user, including authorizableID, displayName and familyName. You can change the value of displayName and familyName.
profile
  1. On the Experience Manager rail, click Tools > Sites > ContextHub.

  2. Click the Configuration Container to which you want to add a UI module.

  3. Click or typ the ContextHub Configuration to which you want to add the UI module.

  4. Click the UI mode to which you are adding the UI module.

  5. Click the Create button, then click ContextHub UI Module (generic).

    chlimage_1-321

  6. Provide values for the following properties:

    • UI Module Title: A title that identifies the UI module
    • Module Type: The module type
    • Enabled: Select to show the UI module in the ContextHub toolbar
  7. (Optional) To override the default store configuration, enter a JSON object to configure the UI Module.

  8. Click Save.