Configuring the button/link component

  1. Click the Configure button or hover over the button component and click the Configureicon.
  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 button component. To enable the translation keys, enclose the name in <> and do not use space. See Configuring translations.
  4. Click the Buttons tab.
  5. Specify this information:
    Buttons Layout
    Select how the buttons are placed in the component. Automatic arranges the buttons horizontally in the component, but if the component’s width gets smaller, the grouped buttons try to fit themselves together in one line. Vertical arranges the buttons vertically in the component.
    Type
    Select if the buttons are regular or borderless.
  6. Click + Add then Button.
  7. Specify this information:
    ID
    Specify an ID for the button. See Naming recommendation for components
    Label
    Specify a name for the button to show in the component. To enable the translation keys, enclose the name in <> and do not use space. See Configuring translations.
    Style
    Select whether the button is displayed with Icon, Text, or Icon+Text.
    Icon
    If you select Icon or Icon+Text from the Style field, select an icon from the Icon list.
    Enable primary button styling
    Select this check box to require the button to have primary styling, meaning the button is blue with white text. This styling is only available when the button has type regular.
  8. To arrange buttons into groups in the component, click + Add then Separator.
    Grouped buttons fit on the same line if it has enough room. If not, the group splits apart. 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.
  9. Click the Operations tab and click + Add to create an operation. Specify the name of the operation, then select a data service to connect it to the button component.
  10. Click the Interactions tab and click + Add.
  11. Specify this information:
    Source component
    To identify what triggers the interaction, select a source component from the list. You can select the button component, other components, or the application.
    Event
    To identify when the interaction occurs, select an event from the list. The Event is dependent on which Source component you have selected. Your choices are the button component, 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.
  12. To save the configuration for the button component, click Save.
  13. To ensure that the button component you added and configured is applied, click the Save button on the application.