LogoLogo
  • Getting Started
    • Pandium Documentation
    • What is Pandium?
      • The Pandium Platform
      • What Companies Use Pandium For
      • Platform Structure
      • Users of Pandium
    • Anatomy of an Integration
      • Run Triggers
      • PANDIUM.yaml
        • Schema
        • UiSchema
        • Dynamic Configurations
        • Dependent Selector Configurations
      • Environment Variables
        • Context: StdOut
        • Logging (StdErr)
    • Key Terminology
    • Pandium Integration Tutorial
      • Pokémon of the Day, Part 1
        • Create App in Slack to get Credentials
        • Create Integration on the Pandium Integration Hub
        • Make a Tenant
        • Write the Integration in Typescript
          • Add the .env
          • Configure the PANDIUM.yaml
          • Check the Customized Connection Settings Page
          • Add the Pokémon client
          • Add the Slack Client
          • Add the pokemonSync flow
          • Run Normal Sync on the Tenant
        • Update the Tenant Schedule
      • Pokémon of the Day, Part 2
        • Update the PANDIUM.yaml
        • Check the Updated Connection Settings Page
        • Add Dynamic Configs
        • Run Init Sync on the Tenant
        • Update the pokemonSync flow
        • Run updated Normal Sync on the Tenant
  • Integration Hub
    • Setting Up Source Control
    • Creating An Integration
      • Getting Started with Creating an Integration
      • Demo Video: Creating an Integration With Pandium
    • Managing Internal Integrations
    • Creating a Tenant In the Integration Hub
    • Managing and Updating Tenants
    • Managing and Updating Releases
    • Managing External Integrations
    • Managing Tenant Connection Settings
    • Creating Users
    • Managing Users
    • Administrator Settings
    • Site Metrics
  • Marketplaces
    • Integration Onboarding Experiences Overview
      • Embedding the In-App Marketplace
      • Embedding the Integration Install Only
      • Embedding Auth-Only Connections
    • Customizing the JWT
    • Marketplace Settings
    • App Installation Options
    • Flags, Tags, and Categories
    • Public Gallery
  • Connectors
    • Connectors 101
      • Active Campaign
      • Afterpay
      • AfterShip
      • Airship
      • Alasco
      • Algolia
      • Amadeus
      • Amazon
      • Ankored
      • Apollo.io
      • AppSignal
      • AskNicely
      • Assembled
      • Attentive
      • AWS
      • Azure Devops
      • Azure Personal Access Token
      • Bandcamp
      • Bazaarvoice
      • BigCommerce
      • Bitbucket
      • Booker
      • Box
      • Braze
      • Brightpearl
      • Campaign Monitor
      • Capabl
      • Chargebee
      • Chargify
      • Chubb
      • Cin7
      • Coach Packet
      • ConnectSports
      • Constant Contact
      • Customer Thermometer
      • Datadog
      • Datev
      • Delighted
      • DHL
      • DHL Unified
      • Domo
      • Dotdigital
      • Drip
      • Dropbox
      • Dynamic Yield
      • Easyship
      • Eloqua
      • Emotive
      • Endear
      • Envision
      • eTip
      • EvaluAgent
      • Exact Online
      • eZCom
      • Fabric
      • Facebook
      • Falcon.io
      • Famer
      • Fedex
      • Field Nation
      • Finch
      • Fivetran
      • Fleetio
      • Flowcode
      • Follow Up Boss
      • Fortnox
      • Foundation Software
      • Fulfil
      • GetResponse
      • GitHub
      • GitLab
      • Gladly
      • Google
      • Google Service Account
      • Gooten
      • Gorgias
      • Greenhouse.io
      • Happy Returns
      • HootSuite
      • Hubspot
      • Image Relay (Basic)
      • Imgur
      • Iterable
      • Jasper
      • JDP
      • Justuno
      • Kentico Kontent
      • Klaus
      • Klaviyo
      • Kombo
      • Kustomer
      • kvCORE
      • LeagueApps
      • Lessonly
      • Lexoffice
      • Linga rOS
      • Linnworks
      • Listrak
      • Loop Returns
      • LoyaltyLion
      • Lucid Travel
      • Lytx
      • MaestroQA
      • Magento (OAuth)
      • Mailchimp
      • Marketo
      • Medallia
      • Microsoft Entra
      • Mintsoft
      • NCSA Athletic Recruiting
      • Netomi
      • Netsuite
      • Nicereply
      • Nylas
      • Omnisend
      • OnPay
      • OnRamp
      • Ontraport
      • Optimizely Data Platform (ODP)
      • Pandium
      • Personio
      • PayCom
      • Perspective
      • Player's Health
      • Playvox
      • Pleo
      • Postscript
      • Promoter
      • Quickbooks Online
      • Qualtrics
      • Recart
      • ReCharge
      • Recurly
      • Returnly
      • ReverseLogix
      • Rydership (formerly Whiplash)
      • Sage Intacct
      • SailThru
      • Salesforce
      • Salesforce Marketing Cloud
      • Salesforce Pardot
      • SendGrid
      • Sendlane
      • SevenRooms
      • SFTP
      • ShipBob
      • ShipHero
      • ShipMonk
      • Shippo
      • Shipstation
      • Shopify
      • Skubana
      • Slack (OAuth2)
      • SmartrMail
      • Smartrr
      • Smartvatten
      • Smile.io
      • Solidus
      • Springbig
      • Square
      • Square (Sandbox)
      • Stamped
      • Stella Connect
      • SugarCRM
      • Swell
      • Talkable
      • TeamGenius
      • Tether
      • Thankful
      • TikTok
      • Trinet-B2B Test
      • Triple Whale
      • TrustPilot
      • Twilio
      • Twitter
      • Unbabel
      • UPS
      • Upscribe
      • USPS
      • Visma e-conomic
      • Visma.net
      • Walmart
      • Wix
      • WorkMax
      • Xero (OAuth)
      • Yardstik
      • Yotpo
      • Zendesk (Support)
      • Zingtree
      • Zonos
  • Partners
    • Inviting Partners
    • Partner Form
    • Integration Form
    • Managing Partners
    • Partner User Guide
  • Reference
    • Pandium API
    • Pandium CLI
    • FAQ
    • Sample Integrations
    • Repository Permissions
      • Bitbucket
      • Azure
      • GitLab
      • GitHub
    • Email Support
Powered by GitBook
On this page
  • Control
  • MultiSelectControl
  • Label
  • Divider
  • Vertical Layout
  • Horizontal Layout
  • Section
  • Combining Layout Elements

Was this helpful?

  1. Getting Started
  2. Anatomy of an Integration
  3. PANDIUM.yaml

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

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.

options

object

Not required. For full-width inputs, use options: trim: false

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:

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

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:

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:

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:

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:

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
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.

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

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.

Last updated 5 months ago

Was this helpful?

Two sections in a vertical layout, seperated by a divider
JSON schema reference value
JSON schema reference value
"A Boolean Input" is defined by the label property in the UISchema
MultiSelectControl UISchema Element
Label UISchema element
Elements displayed vertically in the UI
Elements displayed horizontally in the UI
Elements displayed in a Section UISchema Element