Configuring the application header

  1. Hover over the application header and select the Configure icon.
  2. Specify the Component ID. See Naming recommendation for components.
  3. Click the General Settings tab and specify the Application Heading.
    The value you specified in the Application Heading field is displayed in the application header. To enable the translation keys, enclose the name in <> and do not use spaces. See Configuring translations. To translate the name in the application tab, add translations to the application record in (MNS110). The translations in (MNS110) and the translations in the applications are not integrated. Therefore, to have the same translations for the application tab and the application header, you must manually add the translations that is in (MNS110) in the application heading.
  4. Click the Operations tab and select a data service to connect to the component under the Standard tab.
    An operation indicates how the data is used by the component. The standard operations for the application header are Read and Update data. Read is used for data services that use get transactions. Update data is used for data services that use update transactions.
  5. Click the Interactions tab and click + Add.
  6. Specify this information:
    Source component
    To identify what triggers the interaction, select a source component from the list. You can select the application header, 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 is when the application header, 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
  7. Click Save.
  8. To add fields to the form, click Fields.
  9. On the + Add field, click Fields and select fields to display in the application header.
    The fields available in the field list 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 field list. You can see which transaction each field belongs in the Transaction column.
    You can also rearrange the order of the fields by clicking the three vertical dots of each row of the fields and drag them up or down in the list. Click the Read-only icon to disable a field from modification. Click Required to require the user to fill out the field. You can also hide a field by selecting the Hidden field.
  10. To move the fields around, click the vertical dots on each row and drag them up and down in the list.
  11. To add a custom input field, click +Create on the Fields tab. The custom input field is an independent field not connected to any specific API transaction. The field becomes connected to an API transaction when you use in a data service. The user determines how the data services utilizes the custom input field.
  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. See Configuring translations.
  13. To hide the label of the field, select the Hide field label check box. To change the type of field, select Type drop down field and select a type from the list.
    If the selected type is Text or Lookup, you can convert the field text to upper case. To do so, select the Convert field text to uppercase check box.
    Note: If you select the Convert field text to uppercase check box, the initial value of the field does not change to upper case. When you change the initial value to something else the field is converted to upper case.
  14. If you want to override the standard browse on a field, you can configure the field to use an API transaction that you prefer. First, create a new data service and add the API transaction you want to use when browsing.
    Note: For the configuration to work properly, you must make sure that the API transaction is a search transaction.
  15. Click the Fields tab and click the Edit icon on the a field row. Ensure that the field you want to configure browse for is Lookup type.
  16. In the Browse data service field, select the data service that you want to use when browsing on the field.
  17. To select which field in the API transaction is returned to the Browse field as the value, specify a field in the Return value field text box.
  18. To select which field is used as explanatory text next to the Browse field on the component, specify a field in Additional field text box.
  19. To add buttons in the application heading, click + Add on the Toolbar tab and select one of these toolbar options:
    • Standard button: A preconfigured button with label, style, and icon.
    • Custom button: You can configure a button if you select custom button.
  20. To configure a button, select Custom button and specify this information:
    ID
    Specify an ID for the button to display in the component. See Naming recommendation for components.
    Label
    Specify a name for the button to display in the component. To enable the 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, select an icon from the Icon list.
  21. To separate buttons with a vertical line on the application header, select + Add > Separator.
  22. To rearrange the buttons in the list, click the vertical dots in each row and drag the row up or down.
  23. To save the configuration for the application header, click Save.
  24. To ensure that the configuration in the application header is applied, click the Save button on the application.