Building UI

You use the UI builder in:

• Custom integration settings.

• The main menu extension point.

Note

Building the connection setup form is a little different. For details, see Building the connection setup form.

To build the UI for a settings tab or a menu item

1. Open the UI builder by clicking .

   Note

   The UI builder creates the form group’s root form.

   For more information, see Forms and form groups.

2. [Optional] Rename the root form.

3. [Optional] To map form elements with data retrieved from the ISV service when the user opens the form, select a callback from the Data initializer callback dropdown.

   The dropdown contains a list of all your callbacks.

   1. Map the data initializer callback reponse to the form model.

4. Drag elements from the UI element menu to the canvas.

   1. To set an element’s properties, select the element on the canvas and select the PROPERTIES tab in the configuration pane.

      Note

      For more information, see the details pages for the element types.

   2. [Optional] To create dependencies for an element’s visibility, select the element on the canvas and select the VISIBILITY tab in the configuration pane.

   3. [Optional] To set validation criteria for an element, select the element on the canvas and select the VALIDATION tab in the configuration pane.

5. [Optional] To delete an element, select it and click .

6. [Optional] To find out more about an element, select it and click .

7. [Optional] To view a preview of your form, click .

8. [Optional] To add a dependent form to the form group, click .

   Note

   For more information, see Forms and form groups.

9. [Optional] To delete a dependent form, select the form tab and click or .

10. To exit UI builder, click Done.

    Important

    Clicking Done does not save your work.

11. Click Save changes to save your form(s).