Configuring the data grid

  1. Click the Configure button or hover over the data grid component and click the Configure icon.
  2. Specify the Component ID. See Naming recommendation for components.
  3. Click the General Settings tab and specify this information: .
    Component heading

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

    See Configuring translations.

    Specify the data grid height in pixels in the Data grid height field. The default value is 300 pixels. To reset the default value, click Reset to default icon.

    Column Header Settings

    To enable the possibility to filter records directly in the column header, ensure to switch on the Enable filter fields in the column header button.

    To enable the possibility to sort the records directly in the column header, ensure to switch on the Enable sorting in the column header button.
    Note: These feature buttons only allows filtering and sorting on the set of data you have already retrieved. You cannot run the API transaction again.
  4. Click the Operations tab and select a data service to connect it to the component under the Standard tab.

    An operation indicates how the data is used by the component. The default operations for data grid are Read, Delete, and Update data. Read is used for data services that use get, list, or search transactions. Delete is used for data services that use delete transactions. Update is used for data services that use update transactions.

  5. Click the Operations tab and select a data service to connect it to the component. The default operations available in Experience Designer for data grid are Read, Delete, and Update data. Read is used for data services that use get, list, or search transactions. Delete is used for data services that use delete transactions. Update is used for data services that use update transactions.
  6. Click the Interactions tab and click + Add. Specify this information:
    Source Component
    To identify what triggers the interaction, select a component from the list. You can select the data grid, 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 is triggered, select an event from the list. The event can be when the data grid, other components, or the application loads, is selected, refreshed, or when a search or filter 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.
  7. Click Save.
  8. To add columns in the data grid, click Columns.
  9. Click +Add.

    The columns available in the list of columns are the output fields of the data service that is connected to the component. If the data service contains several API transactions, all the output fields of the transactions are available in the list of columns. You can see which transaction each field belongs to in the Transaction column.

  10. To rearrange the order of the columns, click the vertical dots of each row and drag the row up or down in the list.
  11. 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 with text.
  12. To hide the columns from the data grid, select Hidden.
  13. 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.

    To change the type of field, select Type drop down field 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.

  14. To customize the size of the rows in data grid, click Rows and select a row height.

    You can select the first record automatically when the data grid is filled with data. To enable this functionality, 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 a data grid as your starting point in the application, and another component is filled with data when you select a record in the data grid. 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.
  15. Click the Toolbar tab and click + Add to add buttons in the data grid. Select from these toolbar options:
    • Standard button: A preconfigured button with label, style, and icon.
    • Custom button: You can configure a button when you select custom button.
  16. To configure a button, select Custom button and specify this information:
    ID
    Specify an ID for the button. See Naming recommendation for components.
    Label
    Specify the name of the button to display in the component. To enable translation keys, enclose the name in <> and do not use spaces. See Configuring translations.
    Style
    Select whether the button should display with Icon only, Text only, or Icon+Text.
    Icon
    If you select Icon, or Icon+Text from the Style field, select an icon from the Icon list.
  17. To separate buttons with a vertical line on the component, select + Add > Separator. You can rearrange the order of the buttons and separators by clicking the vertical dots in the row and drag the row up or down in the list.
  18. To save the configuration of the data grid, click Save.
  19. To ensure that the data grid you added and configured is applied, click the Save button on the application.