UiSchema

The PANDIUM.yaml's UISchema is a list of elements that determine how the configurations defined in the schema properties are displayed on the connection settings page e.g. the order of controls, their visibility, labels, and layout.

All UISchema elements must contain the type prop. Depending on that type other props may be available/required. Pandium currently supports the following types of UISchema elements:

Control

A UISchema element with type: Control displays one of the configurations defined in the schema properties.

In addition to type, it takes these properties:

prop	values	note
scope	JSON schema reference value	Required. Determines which schema property this UISchema element displays. Has the following format ‘#/properties/[property_name]’
label	string	Not Required. Used to customize the text seen for the control on the connections settings page.
admin	boolean	Not Required. When true, the element will only render for Integration Hub users.

If the schema properties look like this:

schema:
  type: object
  properties:
    bool_input:
      type: boolean
      default: true

Then, the UISchema element for the bool_input property could look like this:

type: Control
label: A Boolean Input
scope: "#/properties/bool_input"

It would then be displayed in the connection settings page like this:

"A Boolean Input" is defined by the label property in the UISchema

MultiSelectControl

A UISchema element with type: MultiSelectControl displays one of the configurations defined in the schema properties. This type will only render correctly if the Schema property referenced in its scope is formatted as a multi select enum.

In addition to type, it takes these properties:

prop	values	note
scope	JSON schema reference value	Required for Control. Determines which schema property this uischema element displays. Has the following format ‘#/properties/[property_name]’ The schema property referenced in its scope must be formatted as a multi select enum.
admin	boolean	Not Required. When true, the element will only render for Integration Hub users.

If the schema property looks like this:

string_enum_multi_input:
  items:
    options:
      - label: Option 1 label
        value: option1
      - label: Option 2 label
        value: option2
      - label: Option 2 label
        value: option2

Then, the UISchema element for the string_enum_multi_input property coudl look like this:

- type: MultiSelectControl
  scope: "#/properties/string_enum_multi_input"

Which would then be displayed like this on the connections page:

MultiSelectControl UISchema Element

Label

A UISchema element with type: Label displays a label. This can be helpful when combined with UISchema elements that do not take the label prop (e.g. the MultiSelectControl)

In addition to type, it takes these properties:

prop	value	note
title	string	Not Required.
subtitle	string	Not Required.
hintText	string	Not Required.
admin	boolean	Not Required. When true, the element will only render for Integration Hub users.

Here is an example of a UISchema element with type: label

- type: Label
  subtitle: Select Appropriate Options
  hintText: This is the hintText for the label element
  title: Multi Select Control

Which would be displayed like this on the connection settings page:

Label UISchema element

Divider

A UISchema element with type: Divider displays a horizontal line. This can help visually organize and separate different sections of the connections setting page. This type of UISchema element does not take any additional properties.

Here is an example of UISchema element with type: Label

- type: Divider

It would be displayed as a simple dividing line in the connection settings page.

Vertical Layout

A UISchema element with type: VerticalLayout is used to list other UISchema elements vertically. Layout elements (i.e. VerticalLayout, HorizontalLayout, Section) can be combined and nested within one another.

In addition to type, it takes these properties:

prop	value	note
element	List of UISchema elements	Required.

Here is an example of UISchema element with type: Vertical Layout:

type: VerticalLayout
elements:
- type: Control
  label: Name
  scope: "#/properties/name"
- type: Control
  label: Birth Date
  scope: "#/properties/birthDate"

Which would be displayed like so:

Elements displayed vertically in the UI

Horizontal Layout

A UISchema element with type: HorizontalLayout is used to list other UISchema elements side by side. Layout elements (i.e. VerticalLayout, HorizontalLayout, Section) can be combined and nested within one another.

In addition to type, it takes these properties:

prop	value	note
element	List of UISchema elements	Required.

Here is an example of UISchema element with type: HorizontalLayout:

type: HorizontalLayout
elements:
- type: Control
  label: Name
  scope: "#/properties/name"
- type: Control
  label: Birth Date
  scope: "#/properties/birthDate"

In addition to type, it takes these properties:

Elements displayed horizontally in the UI

Section

A UISchema element with type: Section is used to list other UISchema elements vertically. It differs from the VerticalLayout because it can take more props (e.g. label, subtitle, hintText). Layout elements (i.e. VerticalLayout, HorizontalLayout, Section) can be combined and nested within one another.

In addition to type, it takes these properties:

prop	value	note
element	List of UISchema elements	Required.
label	string	Not required.
subtitle	string	Not required.
hintText	string	Not required.

Here is an example of UISchema element with type: Section:

type: Section
label: My Group
elements:
- type: Control
  label: Name
  scope: "#/properties/name"
- type: Control
  label: Birth Date
  scope: "#/properties/birthDate"

It would be displayed like this on the connections settings page:

Elements displayed in a Section UISchema Element

Combining Layout Elements

UISchema elements of the type VerticalLayout, HorizontalLayout, and Section can be combined and nested within one another as in this example:

---
type: VerticalLayout
elements:
- type: Section
  label: First Section
  elements:
  - type: Control
    label: Name
    scope: "#/properties/name"
    options:
      trim: true
  - type: Control
    label: Birth Date
    scope: "#/properties/birthDate"
    options:
      trim: true
  hintText: This is the hint text of the first section.
  subtitle: This is the subtitle of the first section.
- type: Divider
- type: Section
  label: Second Section
  elements:
  - type: Control
    label: Option One
    scope: "#/properties/option1"
  - type: Control
    label: Option Two
    scope: "#/properties/option2"
  hintText: Note the horizontal line between the two section. You can add this to your
    own coniguration form by including a 'Divider' element.
  subtitle: The second section contains two boolean fields.

Two sections in a vertical layout, seperated by a divider