Configuring the index list

  1. Click the Configure button or hover over the index list component and click the Configure icon.
  2. Specify the Component ID for the Index List. See Naming recommendation for components.
  3. Click the Operations tab and select a data service to connect the Read operation to the component under the Standards tab.
    An operation indicates how the data is used by the component. The standard operations for index list are Read and Delete data. Read operation is used for data service that use get, list, or search transactions, while Delete is used for data services that use delete transaction.
  4. Click the Operations tab and select a data service to connect the Read operation to the component.
    An operation indicates how the data is used by the component. The standard operations for index list are Read and Delete data. Read operation is used for data service that use get, list, or search transactions, while Delete is used for data services that use delete transaction.
  5. To identify when the operation is triggered, click + Add on the Interactions tab and select these fields:
    Source component

    To identify what triggers the interaction, select a component from the list. You can select index list, other components, or the application

    Component Element

    Optionally, select a button from the list to identify which part of the source component triggers the event. You can only select buttons that are added in the selected source component. Component element is only used when using a button as part of the interaction.

    Event

    To identify when the interaction occurs, select an event from the list. The event can be when the index list, other components, or the application loads, is selected, refreshed, or when a search field is used.

    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 application as the source component, the Load event and Read operation are automatically selected.
  6. Click Save.
  7. To add fields to display in the index list, click the Fields tab.
  8. Click +Add and select the fields to show in the index list.
    The fields available in the field list are the output fields of the data service that is connected to the component. If there are several API transactions in the data service, then all the output fields of the transactions are available in the field list.
    You can rearrange the fields by clicking the vertical dots and dragging the fields up or down. To customize the style of the fields, click the Style column for each field. You can configure whether the fields have visible labels or not.
  9. Optionally, you can select a display format in the Display format column if a field has a value map. Select whether a field is displayed with value only, text only, or value and text.
  10. To hide a field, select the field in the Hidden column.
    You can use the hidden fields as input to data services used for components that depend on the information in the index list.
  11. Click the Edit icon and specify the Custom label to create a custom field label for the selected field.

    The specified custom label overrides the field label retrieved from the data service. To enable the translation keys, enclose the name in <> and do not use spaces.

    See Configuring translations.

    To change the type of field, click Type and select a type from the list. If the selected type is Number, you can configure the number of decimals to be shown on the field. Just specify how many decimals in the Number of decimals field.

  12. You can select the first record automatically when the index list is filled with data. To enable this functionality, click the Rows tab and ensure to switch on the Autoselect first row button.
    Note: Ensure to use this feature carefully because activating autoselect first row for many components can affect the performance.

    Below is an example:

    You have an index list as your starting point in the application, and another component is filled with data when you select a record in the index list. Set the Autoselect first row on the index list so that no component is empty when you open the application. Setting this feature shows you the important information you need to see right away.
  13. To save the configuration in the index list, click Save.
  14. To save the index list component you added and configured, click the Save button on the application.