Adding a spotlight component

Set up the Spotlight component by configuring the basic properties, defining the component ID, and specifying a heading that can support translation.
  1. Add a Spotlight component and click Configure.
  2. Specify a name in the Component ID.

    See Naming recommendation for components.

  3. In the General Settings tab, specify the value in the Component heading field or leave it blank.

    The component heading you specified is displayed as the heading of the spotlight component. To enable the translation keys, enclose the name in <> and do not use spaces.

    See Configuring translations.

Configuring a spotlight item

To display a value in the spotlight component, you need to add and configure a spotlight item.

  1. Open the spotlight configuration by clicking the Configure button or by hovering over the spotlight component.
  2. Click the Configure icon.
  3. Click the Spotlight items tab.
  4. Click +Add.
  5. Specify the name in the Component ID.
  6. In the General Settings tab, specify this information:
    Title
    This field is required. The title of the spotlight item is displayed below the value.
    Subtitle
    This field is optional. The subtitle of the spotlight item is displayed below the title.
    To enable the translation keys, enlose the name in <> and do not use spaces.
    See Configuring translations.
  7. Click the Operations tab and select a data service to connect it to the spotlight item.

    An operation indicates how the data is used in the component. The default operation available for spotlight items is Read data, which is used for data services that use get or list transactions.

  8. Click the Interaction tab and click +Add. Specify this information:
    Source component
    To identify what triggers the interaction, select a source component from the list. You can select the spotlight, other components or the application.
    Component element
    This field is optional. Select if a specific element in the source should trigger the event.
    Event
    To identify when the interaction is triggered, you can select an event from the list. When the current component, another component, or the application loads, is selected, is refreshed, or when a search field is used, the event can occur.
    Operation
    To identify which operation is triggered by the interaction, select the operation that is connected to the required data service.
    Note: If you select the appliation as the source component, the Load event and Read operation fields are automatically selected.
  9. To configure the value to display in the spotlight item, click the Properties tab and specify these information:
    Value type
    The value that is displayed in the spotlight item.
    • Count rows: Displays the number of records that the API returns.
    • Summarize values: Displays the sum of the values in the field that you select in the Value field for the records that the API returns.
    Note: 

    The number of records that the API returns is configured in the data service.

    See Creating Data Service using MI.

  10. To display an optional unit of measure, specify a text in the Unit of measure field.

    To enable the translation keys, enclose the name in <> and do not use spaces.

    See Configuring translations.

  11. Click Save to save your changes.

Enabling and disabling refresh for a spotlight item

By default, a refresh icon is displayed when you hover over a spotlight item. Clicking the icon triggers a Read operation. You can disable this behavior in the spotlight item configuration.

  1. Open the spotlight configuration by clicking the Configure button, or by hovering over the spotlight component and clicking the Configure icon.
  2. Click the Spotlight items tab .
  3. Click the Edit icon for the spotlight item.
  4. Click the Properties tab .
  5. Clear the Show refresh icon check box.
  6. Click Save.

Configuring display options for spotlight

The spotlight component supports three different display modes:

  • Separate tiles: display values in separate cards
  • Common card: displays values in one card
  • List: displays values in a list.

The display options are configured in the spotlight configuration.

  1. Open the spotlight configuration by clicking the Configure button or by hovering over the spotlight component.
  2. In the General Settings tab, select an option for Display option: Separate files, Common card or List.
    Note: For the List option, to adjust the list height, specify a value in the List height (pixels) field.
  3. Save the changes, and save the application.

Configuring a spotlight item to open a link

You can configure a spotlight item so that clicking the item triggers a link. This is useful when you want to enable navigation to another application or an H5 program directly from a spotlight item.

To configure this behavior, select the spotlight as the Source Component and the spotlight item as the Component element when setting up the link.

See Adding a link in an application.