Configuring the details header

  1. Click the Configure button or hover over the details header and click the Configure icon.
  2. Specify the Component Heading. See Naming recommendation for components.
  3. Click the General Settings tab and specify this information to customize the details Header:
    Apply accent color
    To change the color of the details header to have the same color as the application header and other M3 programs' headers, ensure to switch the Apply accent color button.
    Tab

    To add tabs in the details header, ensure to switch on the Tab button. You can only switch off the Tab button if you only have one tab in the details header. If you have more than one tab, you cannot switch off the Tab button. In that case, you need to delete the other tabs and copy or paste the components that you want to keep in the first tab.

    Image
    To add and display an image in the details header, ensure to switch the Image button. When you switched the Image button, the Image tab is displayed where you can configure the image.
  4. Click the Operations tab and select a data service for the operation you selected. An operation indicates how the data is used by the component. The default operations available in Experience Designer for details header are Read and Read document. Read is used for data services that use get, list, or search transactions. Document is used to handle documents and images.
  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 details header, other components, or the application.
    Component Element

    Optionally, select a button from the list to identify which part of the source component may trigger the event. You can only select buttons that are added in the selected source component. Component element is only used when you use a button as part of the interaction.

    Event

    To identify when the interaction occurs, select an event from the list. The event can be when the details 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.

  6. Click Save.
  7. To add and display fields on the details header, select Fields.
  8. Click + Add and select from the fields list.

    The fields available are the output fields of the data service connected to the component. If there are several API transactions in the data service, then you can select all the output fields of the transactions. You can see which transaction each field belongs to in the Transaction column.

    You can see which transaction each field belongs to in the Transaction column.
  9. To rearrange the order of the fields, click the vertical dots in each row and drag the row up or down.
  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 customize the style of each field, click the Style column of the field and select Regular field, Subheader, or Header. You can only have one field with Header style and one field with Subheader style. You can configure whether the fields have visible labels or not.
  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 a field, click on the Type drop down field and select a type from the list. If the type is Number, then it is possible to configure how many decimals is displayed in the field. To configure this, specify how many decimals are displayed in the field Number of decimals

  13. Click the Image tab to specify an IDM image query.
  14. From Infor Document Management (IDM), copy the query for the document. To get the IDM query, search for the document in IDM and select Enter query manually.
  15. In the Query field, paste the query that you copied.
  16. Change the values that you must get from other components with this expression, {componentID.SourceField}

    For example, to get the customer number from a field in an index list called IndexList_Customers, use this expression, {IndexList_Customers.CUNO}.

  17. Click the Interactions tab and click + Add. Specify this information:
    Source Component

    To display an image in the details header, select a source component that triggers this interaction. You can select the details header, other components, or the application

    Component Element

    Optionally, select a button from the list to identify which part of the source component may trigger the event. You can only select buttons that are added in the selected source component. Component element is only used when you use a button as part of the interaction.

    Event

    Select an event that triggers the loading of the image. The event can be when the details header, other components, or the application loads, is selected, refreshed, or when a search field is used.

    Operation

    You must select document as the operation for the image to load.

  18. To save the configuration for the details header, click Save.
  19. To ensure that the configuration in the details header is applied, click the Save button on the application.