Configuring the form

  1. Click the Configure button or hover over the form 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 form component. To enable the translation keys, enclose the name in <> and do not use spaces. See Configuring translations.
  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 forms are Read, Delete, and Update data. Read is used for data services that use get 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 source component from the list. You can select the form, other components, or the application.
    Event

    To identify when the interaction occurs, select an event from the list. The event can be when the form, 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 fields to the form, click Fields.
  8. Click + Add and select fields to display in the form.

    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 to 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. To require the field to be filled out, click Required. You can also hide a field by selecting the Hidden field.

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

  10. 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 Number, you can configure the number of decimals to be shown on the field. Just specify how many decimals in the Number of decimal field.
    Note: If you have 3 decimals in M3, and you specify 2 decimal places to show in the form, only 2 decimals are shown in the application. If the field is open for update, the 2 decimals you specify in the application are the 2 decimal numbers saved in M3. This can lead to rounding issues, so use this function with care when updating data.
  11. 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: To work properly, it must be a search transaction.

    Click the Fields tab and click the Edit icon on a field row. Ensure that the field you want to configure browse for is of Lookup type. In Browse data service field, select the data service that you want to use when browsing on the field. 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. 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.

    Below is an example:

    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 and add ITNO in the Return value field text box. Finally, add ITDS in the Additional field text box. Now, when you browse on the item number field in the dialog window, you only see items in status 05 and sorted by item number. When you select an item number in the dialog window, the item description is displayed next to the field.

  12. To add buttons in the form, click the Toolbar tab and click + Add. Select one of 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.
  13. To configure a button, select Custom button and specify this information:
    ID
    Specify an ID for the button to show in the component. 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 spaces. See Configuring translations.
    Style
    Select whether the button should show 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.
  14. To separate buttons with a vertical line in the form, click + 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.
  15. To save the configuration for the form component, click Save.
  16. To ensure that the form you added and configured is applied, click the Save button on the application.