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 the 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.

  4. Click the Operations tab and select a data service to connect it to the component. An operation indicates how the data is used by 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.
  5. 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 field is used.
    Operation
    To identify which operation is triggered by the interaction, select the operation that is connected to the required data service.
  6. Click Save.
  7. To add columns in the data grid, click Columns.
  8. 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.

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

  13. To customize the size of the rows in data grid, click Rows and select a row height.
  14. 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.
  15. 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.
  16. 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.
  17. To save the configuration of the data grid, click Save.
  18. To ensure that the data grid you added and configured is applied, click the Save button on the application.