Creating the interaction for the Image component

Once the data service for the Image component has been created and configured, before you can see the image, you must create an interaction to actually call and display the image.

To create the interaction for the Image component, use this procedure:

  1. In your App Builder project, select the Image component.
  2. On the Properties panel, from the Data Service drop-down list, select the data service you created for the Image component.
    Note: Because you have not yet created the interaction, the Image component displays an error symbol. As soon as the interaction is correctly created and configured, this error symbol disappears.
  3. Select the Interactions tab.
  4. Click Create Interaction.
  5. For the Trigger Event section, make these settings:
    • Component = Application
    • Event = On Startup
  6. For the Target Action section, make these settings:
    • The Component is set to your Image component (This Component).
    • The Action is set to run the data service you created for the Image component.
  7. In the Data Key Mapping section, make these settings for the first Action Data Field (which is already set to $query (Mandatory) and is read-only):
    • Source = {Static Value}
    • Display Value - Set this field using this sub-procedure:
      1. From the Infor Ming.le menu, select Document Management.
      2. In the Search Document Management field, click the down arrow (˅).
      3. From the Document Type drop-down list, select File.
      4. From the Property or Attribute drop-down list, select Filename.

        The Operation field automatically selects = Equal.

      5. In the Search field, type the name of your image file, with its extension.
      6. Click Search.

        The results list should now display only one file, the image file you want.

      7. In the Search Document Management field, click the down arrow (˅) again.
      8. Click Show XQuery.
      9. In the XQuery that displays, copy the entire string.
      10. From the Infor Ming.le menu, select App Builder.
      11. Paste the string that you copied into the Display Value field.
  8. Still in the Data Key Mapping section, make these settings for the second Action Data Field (which is already set to $offset (Mandatory) and is read-only):
    • Source = {Static Value}
    • Display Value = 0 (zero)
  9. Still in the Data Key Mapping section, make these settings for the third Action Data Field (which is already set to $limit (Mandatory) and is read-only):
    • Source = {Static Value}
    • Display Value = 1 (one)
App Builder displays the image and the error indicator no longer displays.
Related topics