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.
- Click the UI Studio tab.
- Click Add UI Template.
- Enter a Name for the UI template.
- Optional: In the Description field, enter a description for the UI template.
- Find the newly created UI template and click Edit.
- Optional:
Enter HTML for your UI template:
- Click the HTML tab.
- In the Template (HTML) field, enter the HTML for your UI.
- In the Form Validation Rules section, click Add to add one or more properties to evaluate.
- In the Property Name field, enter a property name.
- Click Add to add one or more rules for the property.
- For each rule, select a rule in the Rule Name list.
- For each Required rule, enter a Validation Message that displays if the required property is not present.
- For each Email rule, enter a Validation Message that displays if the property is not a valid email.
- 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.
- 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.
- 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.
- Optional:
Enter CSS for your UI template:
- Click the CSS tab.
- In the Style (CSS) field, enter the CSS for your UI.
- Optional:
Enter a script for your UI template:
- Click the Script tab.
- In the Script (JavaScript) field, enter the script for your UI.
- Optional:
Enter a schema for your UI template:
- Click the Schema tab.
- In the Input Schema field, enter the input schema for your UI.
- In the Output Schema field, enter the output schema for your UI.
- Click Apply.
Editing a UI template
Edit an existing UI template.
- Click the UI Studio tab.
- Find the UI template and click Edit.
- Update the desired fields in the UI template.
- Click Apply.
Deleting a UI template
Delete an existing UI template.
- Click the UI Studio tab.
- Find the UI template and click Delete.
- In the confirmation window, click Delete.