PingOne DaVinci

UI Studio

The UI Studio lets you create user interface templates that match your company style and branding, which you can include in flows using an HTTP connector.

Creating a UI template

Create a UI template to control the UI design inside your flows.

Steps

  1. Click the UI Studio tab.

  2. Click Add UI Template.

  3. Enter a Name for the UI template.

  4. Optional: In the Description field, enter a description for the UI template.

  5. Find the newly created UI template and click Edit.

  6. Optional: Enter HTML for your UI template:

    1. Click the HTML tab.

    2. In the Template (HTML) field, enter the HTML for your UI.

    3. In the Form Validation Rules section, click Add to add one or more properties to evaluate.

    4. In the Property Name field, enter a property name.

    5. Click Add to add one or more rules for the property.

    6. For each rule, select a rule in the Rule Name list.

    7. For each Required rule, enter a Validation Message that displays if the required property is not present.

    8. For each Email rule, enter a Validation Message that displays if the property is not a valid email.

    9. For each Length rule, enter a Minimum, Maximum, or Exact value for the property and a Validation Message that is displayed for each length restriction that isn’t met.

    10. For each Format rule, enter the Regex that defines the required format and the Validation Message that displays if the property doesn’t match the format.

    11. For each Equality rule, enter the Other Property that this property must match, and the Validation Message that displays if the properties don’t match.

  7. Optional: Enter CSS for your UI template:

    1. Click the CSS tab.

    2. In the Style (CSS) field, enter the CSS for your UI.

  8. Optional: Enter a script for your UI template:

    1. Click the Script tab.

    2. In the Script (JavaScript) field, enter the script for your UI.

  9. Optional: Enter a schema for your UI template:

    1. Click the Schema tab.

    2. In the Input Schema field, enter the input schema for your UI.

    3. In the Output Schema field, enter the output schema for your UI.

  10. Click Apply.

Editing a UI template

Edit an existing UI template.

Steps

  1. Click the UI Studio tab.

  2. Find the UI template and click Edit.

  3. Update the desired fields in the UI template.

  4. Click Apply.

Deleting a UI template

Delete an existing UI template.

Steps

  1. Click the UI Studio tab.

  2. Find the UI template and click Delete.

  3. In the confirmation window, click Delete.