Building the example

The example connection setup form looks like this:

../../_images/connection_form_ui_example.png

To build the example connection setup form

  1. Open the Version.

  2. Select Connection setup form from the left sidebar.

  3. Select Connection setup.

  4. Click uibuilder to open the UI builder.

  5. Drag and drop a Text element onto the UI builder canvas.

  6. Configure the Text element properties.

    • In the Text field, enter text to briefly describe what is necessary to configure the CyberApp.
      For the example, enter Please provide credentials to your service account..
  7. Drag and drop an Input element onto the UI builder canvas.

  8. Configure the Input element properties.

    1. In the ID field, specify a unique alphanumeric name for the element.
      For example, username.
    2. Set the Field type property to Identity.

    3. In the Label field, enter Username.

  9. Drag and drop a Password element onto the UI builder canvas.

  10. Configure the Password element properties.

    1. In the ID field, specify a unique alphanumeric name for the element.
      For example, password.
    2. Set the Field type property to Secret.

      Note

      Password elements have the Field type property set to Secret by default.

    3. In the Label field, enter Password.

    You should have the following structure in your UI builder:

    ../../_images/creds_ui_example.png
  11. [Optional] Click Preview to preview the changes.

    Note

    At this point, you will not see the form title or the Cancel and Connect buttons. These are added automatically when deployed.

  12. Click Done.

  13. Click Save changes.

Note

When an MSP enables the CyberApp, the callback requests will include X-CyberApp-Auth header in the following format:

<username>:{"password": "<password>"}

Where:
<username> is the value of the Username field
<password> is the value of the Password field