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 utilize 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. For custom input fields only, if the selected type is Lookup, Text, Number, or Text area, you can configure the Field length field in number of characters. The field length determines how many characters long the field is and affects how much space the field uses on the component.
  15. Another for custom input fields only, if the selected type is Lookup, Text, Number, Date, Check box, or Text area, you can configure an initial field value, which is the value the field displays when the application opens. You can use a fixed value, user context, or date macros which are for date fields only, as initial value.
  16. If you need 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 need to use when browsing.
    Note: For the configuration to work properly, you must make sure that the API transaction is a search transaction.
  17. Click the Fields tab and click the Edit icon on a field row. Ensure that the field you need to configure browse for is of Lookup type. Select Override standard browse and in the Browse data servicefield, select the data service that you need to use when browsing on the field. Add the output fields for display in the browse dialog. To select which field in the API transaction is returned to the browse field as the value, select Return value field for that field. To select which field is used as explanatory text next to the browse field on the component, select Additional field for that field.

    You have a form where you want to be able to create a new item based on copying a template. In order to do that, in the Create New Item dialog, the Item number field must be able to browse for items in status 05 only. Using MMS200MI/SearchItems, create a new data service called Browse_ItemTemplates and specify STAT:05 SortBy:ITNO as the search query value.

    On the dialog configuration, click the Fields tab and then update the ITNO field. Select the data service Browse_ItemTemplates in the Browse data service field. Add ITNO and ITDS as the browse dialog columns. Check Return value field for ITNO and check Additional field for ITDS.

    Now, when you browse on the item number field in the dialog window, you only see items in status 05 sorted by item number. The only columns you see are Item number and Item description. When you select an item number in the dialog window, the item description is displayed next to the field.

  18. 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.
  19. 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.
  20. To separate buttons with a vertical line on the application header, select + Add > Separator.
  21. To rearrange the buttons in the list, click the vertical dots in each row and drag the row up or down.
  22. To save the configuration for the application header, click Save.
  23. To ensure that the configuration in the application header is applied, click the Save button on the application.