Forms are defined by JSON objects, which you can add to the Settings sections throughout many integration resources, such as connections, exports, and imports. Built-in definitions make it easy for you to display common form fields, such as radio buttons and freeform text entry.
Tip
To see these fields in action, go to + and select Form builder : Field dictionary to open the example JSON.
Developer mode
To use this feature now, you must enable Developer mode. Developer mode will be deprecated after May 21, 2025. This change will not affect new or existing integrations, flows, scripts, stacks, tokens, integration apps, or APIs.
All form fields have specific options that you can use to control their appearance and behavior. For example, the first three required items below are the minimum needed to show the custom input field, and the last two values refine its appearance:
"fieldMap": {
"MiddleName": {
"id": "MiddleName",
"name": "MiddleName",
"type": "text",
"label": "Enter your middle name",
"helpText": "Tell us your middle name,<br /> initial, or type N/A."
}
}
|
Required settings |
Optional settings |
||||
|---|---|---|---|---|---|
|
|||||
|
Required |
Yes |
|
Format |
String |
|
Values |
Must be the same as the form field’s key |
|
Example |
|
|
Required |
Yes |
|
Format |
String |
|
Values |
It may be unique from the id, if this same field is defined in one place and used in different instances in other forms or sections; in most cases, specify the same value as the form field’s key |
|
Example |
|
|
Required |
Yes |
|
Format |
String |
|
Values |
Any supported field; see Available fields, below |
|
Example |
|
|
Required |
No |
|
Format |
String |
|
Values |
The displayAfter form field setting allows you to display form fields at a desired location in your export or import forms. For example, if you want to display a custom field ( roleInOrg) after the API endpoint field you can use the JSON path export.http._httpConnectorEndpointId) available in the help text to point to the new field’s location. In the example below, the new roleInOrg field will be displayed after the API endpoint field. Note: The displayAfter feature is only available for connections with simple and HTTP view options. |
|
Example |
"roleInOrg": {
"id": "roleInOrg",
"name": "roleInOrg",
"type": "multiselect",
"label": "Select the functions that apply",
"displayAfter" : "export.http._httpConnectorEndpointId",
"options": [
{
"items": [
{ "label": "Accounting",
"value": "acctg"
},
{
"label": "Human Resources",
"value": "hr"
}
]
}
]
}}
|
|
Applies to |
Various fields, where
|
|
Required |
No |
|
Format |
Array of strings |
|
Values |
The list of items that you want to offer:
|
|
Example |
"options": [
{
"items": [
"Create",
"Update",
"Delete"
]
}
]
|
|
Applies to |
Various fields, where
|
|
Required |
No |
|
Format |
Nested array of label-value pairs |
|
Values |
The list of items that you want to offer:
|
|
Example |
"Brand": {
"id": "Brand",
"name": "Brand",
"type": "select",
"options": [
{
"items": [
{
"label": "Brand1",
"value": "NOBRAND"
}
|
|
Required |
No |
|
Format |
Array |
|
Values |
The
|
Example 1
"visibleWhen": [
{
"field": "formFieldDefined",
"is": [
"Proposal", "Test", "Example"
]
},
{
"field": "radiobutton",
"is": [
"Proposal", "Test", "Example"
]
},
{
"field": "formFieldDefined",
"isNot": [
"Proposal", "Test", "Example"
]
}
]
Example 2
"visibleWhen": {
"id": "visibleWhen",
"name": "visibleWhen",
"type": "select",
"label": "Visible when",
"defaultValue": "Hyderabad",
"description": "This field will be visible only when radiogroup is set as create and select is set as USA or when radiogroup is set as update and select is set as Canada",
"options": [
{
"items": [
"Delhi",
"Hyderabad",
"Chennai"
]
}
],
"visibleWhen": [
{ "OR":[
{"AND":
[{
"field": "radiogroup",
"is": [
"Create"
]
},
{
"field": "select",
"is": [
"USA"
]
}
]
},
{"AND":
[{
"field": "radiogroup",
"is": [
"Update"
]
},{
"field": "select",
"is": [
"Canada"
]
}
]
}
]
}
]
}
|
Required |
No |
|
Format |
Array |
|
Values |
The
|
Examples
"visibleWhenAll": [
{
"field": "formFieldDefined",
"is": [
"Proposal", "Test", "Example"
]
},
{
"field": "radiobutton",
"is": [
"Proposal", "Test", "Example"
]
},
{
"field": "formFieldDefined",
"isNot": [
"Proposal", "Test", "Example"
]
}
]
"visibleWhenAll": {
"id": "visibleWhenAll",
"name": "visibleWhenAll",
"type": "select",
"label": "Visible when all",
"defaultValue": "Hyderabad",
"description": "This field will be visible only when radiogroup is set as create and select is set as USA or when radiogroup is set as update and select is set as Canada",
"options": [
{
"items": [
"Delhi",
"Hyderabad",
"Chennai"
]
}
],
"visibleWhenAll": [
{ "OR":[
{"AND":
[{
"field": "radiogroup",
"is": [
"Create"
]
},
{
"field": "select",
"is": [
"USA"
]
}
]
},
{"AND":
[{
"field": "radiogroup",
"is": [
"Update"
]
},{
"field": "select",
"is": [
"Canada"
]
}
]
}
]
}
]
}
|
Required |
No |
|
Format |
Array |
|
Values |
The
|
Examples
"disabledWhen": [
{
"field": "formFieldDefined",
"is": [
"Proposal", "Test", "Example"
]
},
{
"field": "radiobutton",
"is": [
"Proposal", "Test", "Example"
]
},
{
"field": "formFieldDefined",
"isNot": [
"Proposal", "Test", "Example"
]
}
]
"disabledWhen": {
"id": "disabledWhen",
"name": "disabledWhen",
"type": "select",
"label": "disabled when",
"defaultValue": "Hyderabad",
"description": "This field will be visible only when radiogroup is set as create and select is set as USA or when radiogroup is set as update and select is set as Canada",
"options": [
{
"items": [
"Delhi",
"Hyderabad",
"Chennai"
]
}
],
"disabledWhen": [
{ "OR":[
{"AND":
[{
"field": "radiogroup",
"is": [
"Create"
]
},
{
"field": "select",
"is": [
"USA"
]
}
]
},
{"AND":
[{
"field": "radiogroup",
"is": [
"Update"
]
},{
"field": "select",
"is": [
"Canada"
]
}
]
}
]
}
]
}
|
Required |
No |
|
Format |
Array |
|
Values |
The
|
Examples
"disabledWhenAll": [
{
"field": "formFieldDefined",
"is": [
"Proposal", "Test", "Example"
]
},
{
"field": "radiobutton",
"is": [
"Proposal", "Test", "Example"
]
},
{
"field": "formFieldDefined",
"isNot": [
"Proposal", "Test", "Example"
]
}
]
"disabledWhenAll": {
"id": "disabledWhenAll",
"name": "disabledWhenAll",
"type": "select",
"label": "disabled when all",
"defaultValue": "Hyderabad",
"description": "This field will be visible only when radiogroup is set as create and select is set as USA or when radiogroup is set as update and select is set as Canada",
"options": [
{
"items": [
"Delhi",
"Hyderabad",
"Chennai"
]
}
],
"disabledWhenAll": [
{ "OR":[
{"AND":
[{
"field": "radiogroup",
"is": [
"Create"
]
},
{
"field": "select",
"is": [
"USA"
]
}
]
},
{"AND":
[{
"field": "radiogroup",
"is": [
"Update"
]
},{
"field": "select",
"is": [
"Canada"
]
}
]
}
]
}
]
}
|
Required |
No |
|
Format |
Array |
|
Values |
The
|
Examples
"requiredWhen": [
{
"field": "formFieldDefined",
"is": [
"Proposal", "Test", "Example"
]
},
{
"field": "radiobutton",
"is": [
"Proposal", "Test", "Example"
]
},
{
"field": "formFieldDefined",
"isNot": [
"Proposal", "Test", "Example"
]
}
]
"requiredWhen": {
"id": "requiredWhen",
"name": "requiredWhen",
"type": "select",
"label": "required when",
"defaultValue": "Hyderabad",
"description": "This field will be visible only when radiogroup is set as create and select is set as USA or when radiogroup is set as update and select is set as Canada",
"options": [
{
"items": [
"Delhi",
"Hyderabad",
"Chennai"
]
}
],
"requiredWhen": [
{ "OR":[
{"AND":
[{
"field": "radiogroup",
"is": [
"Create"
]
},
{
"field": "select",
"is": [
"USA"
]
}
]
},
{"AND":
[{
"field": "radiogroup",
"is": [
"Update"
]
},{
"field": "select",
"is": [
"Canada"
]
}
]
}
]
}
]
}
|
Required |
No |
|
Format |
Array |
|
Values |
The
|
Examples
"requiredWhenAll": [
{
"field": "formFieldDefined",
"is": [
"Proposal", "Test", "Example"
]
},
{
"field": "radiobutton",
"is": [
"Proposal", "Test", "Example"
]
},
{
"field": "formFieldDefined",
"isNot": [
"Proposal", "Test", "Example"
]
}
]
"requiredWhenAll": {
"id": "requiredWhenAll",
"name": "requiredWhenAll",
"type": "select",
"label": "required when all",
"defaultValue": "Hyderabad",
"description": "This field will be visible only when radiogroup is set as create and select is set as USA or when radiogroup is set as update and select is set as Canada",
"options": [
{
"items": [
"Delhi",
"Hyderabad",
"Chennai"
]
}
],
"requiredWhenAll": [
{ "OR":[
{"AND":
[{
"field": "radiogroup",
"is": [
"Create"
]
},
{
"field": "select",
"is": [
"USA"
]
}
]
},
{"AND":
[{
"field": "radiogroup",
"is": [
"Update"
]
},{
"field": "select",
"is": [
"Canada"
]
}
]
}
]
}
]
}
|
Applies to |
Applies to Text input ( |
|
Required |
No |
|
Format |
Object |
|
Values |
|
Example
validWhen:{
matchesRegEx: {
pattern: '^[a-zA-Z0-9_]+$',
message: 'Enter only alphabets, numbers, dash, or underscore.'
}
}
Custom form fields are always children of the Form builder’s fieldMap object. Minimal JSON schemas are demonstrated below for the most commonly used form fields. However, this list is not exhaustive; post in the Celigo Connective if you see a specific form field in the Celigo platform for which you would like to see an example definition.
|
Form fields with sample definitions |
||
|---|---|---|
The drop-down limit for this field is 1,000. If you create a drop-down list with more than 1,000 fields, you must use a form script.
|
JSON definition |
"keyPairs": {
"id": "keyPairs",
"name": "keyPairs",
"type": "keyvalue",
"label": "Contact numbers",
"keyName": "Type (home/office/mobile)",
"valueName": "Phone number",
"showDelete": true
}
|
|
Resulting field |
|
|
Typical Custom settings response |
{
"keyPairs": [
{
"Type (home/office/mobile)": "home",
"Phone number": "202-456-1111"
},
{
"Type (home/office/mobile)": "office",
"Phone number": "0207 270 1234, ext. 3"
}
]
}
|
|
JSON definition |
"roleInOrg": {
"id": "roleInOrg",
"name": "roleInOrg",
"type": "multiselect",
"label": "Select the functions that apply",
"options": [
{
"items": [
{
"label": "Accounting",
"value": "acctg"
},
{
"label": "Human Resources",
"value": "hr"
}
]
}
]
}
|
|
Resulting field |
|
|
Typical Custom settings response |
{
"roleInOrg": [
"hr",
"acctg"
]
}
|
This value can be used only when "type": "multiselect".
If one of the options of the multi-select list is removed, but the form is already saved with that field selected, setting this to true will remove the now invalid selection from the settings object accessed in the flow.
-
true - Removes invalid values
-
false [default]
|
JSON definition |
"removeInvalidValues" = true |
The exportSelect form field allows you to use a virtual export to retrieve export values from a source application dynamically. Using a virtual export, you can call out to a source application like NetSuite or Shopify to retrieve your selections. exportSelect also has a multi-select option. When set to true, it acts like a standard multi-select list but gets dynamic options from the virtual exports. If multi-select is set to false (default), it acts the same as a standard select list but gets dynamic options from the virtual exports.
Note
You may need to add a transformation because you must return both a value and a label for each option. For example, if we get a list of locations from Shopify, they will return a location id and name to NetSuite. We must add a transform to convert the id to value and the name to label. If you create an export in integrator.io, you’ll need to use the +Create flow option instead of the Export tab, which doesn’t have the option to create a transformation. See the transformation example for more information.
Tip
When using virtual exports within your forms, a _connectionId:
-
is not required when the form is built in exports and imports and uses the JSON form builder
-
is required
-
when built into all form scripts
-
when the form is built at the integration, flow group, or flow level
-
|
Example 1: JSON definition |
{
"fieldMap": {
"exportSelect": {
"id":"exportSelect",
"name":"exportSelect",
"type":"exportSelect",
"helpText":"help text",
"label":"label",
"resource":{
"virtual":{
"name": "Lookup",
"_connectionId": "626••••••••••••••••d7",
"apiIdentifier": "e••••••78",
"asynchronous": true,
"oneToMany": false,
"sandbox": false,
"netsuite": {
"type": "restlet",
"skipGrouping": true,
"statsOnly": false,
"restlet": {
"recordType": "location",
"searchId": "2597",
"restletVersion": "suitebundle"
},
"distributed": {
"useSS2Framework": false
}
},
"distributed": {
"disabled": false
},
"adaptorType": "NetSuiteExport"
}
}
}
}
}
|
|
Example 1: JSON definition |
{
"fieldMap": {
"exportSelect": {
"id":"exportSelect",
"name":"exportSelect",
"type":"exportSelect",
"helpText":"help text",
"label":"label",
"resource":{
"virtual":{
"name": "Lookup",
"_connectionId": "62•••••••••••••d7",
"asynchronous": true,
"oneToMany": false,
"sandbox": false,
"netsuite": {
"type": "restlet",
"skipGrouping": true,
"statsOnly": false,
"restlet": {
"recordType": "location",
"searchId": "2597",
"restletVersion": false
},
"distributed": {
"useSS2Framework": false
}
},
"distributed": {
"disabled": false
},
"adaptorType": "NetSuiteExport"
}
}
}
}
}
|
|
JSON definition with transformation |
{
"fieldMap": {
"exportSelect": {
"id":"exportSelect",
"name":"exportSelect",
"type":"exportSelect",
"helpText":"help text",
"label":"label",
"resource":{
"virtual":{
"name": "Get Locations",
"_connectionId": "62d••••••••••••••ba6",
"apiIdentifier": "ed••••••35",
"asynchronous": true,
"assistant": "shopify",
"oneToMany": false,
"sandbox": false,
"assistantMetadata": {
"resource": "locations",
"version": "v2",
"operation": "retrieves_alistoflocations"
},
"http": {
"relativeURI": "/locations.json",
"method": "GET",
"successMediaType": "json",
"errorMediaType": "json",
"formType": "assistant",
"paging": {
"method": "linkheader",
"lastPageStatusCode": 404,
"linkHeaderRelation": "next"
},
"response": {
"resourcePath": "locations"
}
},
"rest": {
"relativeURI": "/locations.json",
"method": "GET",
"resourcePath": "locations",
"pagingMethod": "linkheader",
"allowUndefinedResource": false,
"linkHeaderRelation": "next"
},
"transform": {
"type": "expression",
"expression": {
"rules": [
[
{
"extract": "id",
"generate": "value"
},
{
"extract": "name",
"generate": "label"
}
]
],
"version": "1"
},
"version": "1",
"rules": [
[
{
"extract": "id",
"generate": "value"
},
{
"extract": "name",
"generate": "label"
}
]
]
},
"adaptorType": "RESTExport"
}
}
}
}
}
|
The Refreshable drop-down list form field allows you to create a drop-down list of items, similar to the standard Select option. However, for Refreshable drop-down list, the drop-down list can be updated using a virtual export from your application. Sometimes, you’ll need to use a transformation in your virtual export. Below is an example configuration using a NetSuite connection and Salesforce SOQL with transformation rules. The drop-down limit for this field is 1,000. If you create a drop-down list with more than 1,000 fields, you must use a form script.
|
Example 1: JSON definition using NetSuite connection |
{
"refreshableSelect":{
"id":"refreshableSelect",
"name":"refreshableSelect",
"type":"exportSelect",
"helpText":"myHelpText",
"label":"some url with handlebar support.",
"resource":{
"virtual":{
"_connectionId":"myNetSuiteConnectionID",
"_MyconnectorId":"myIAID (only needed for IAs)",
"asynchronous":true,
"netsuite":{
"type":"restlet",
"skipGrouping":true,
"restlet":{
"recordType":"account",
"columns":[
{
"name":"internalId",
"label":"value"
},
{
"name":"name",
"label":"label",
"sort":"true"
}
]
}
}
}
}
}
}
|
|
Example 2: Using Salesforce SOQL and transform rules |
{
"id":"refreshableSelect",
"name":"refreshableSelect",
"type":"exportSelect",
"helpText":"Fetch the list of valid Accounts from Salesforce. This is the default Account for Salesforce ",
"label":"Select default account from Salesforce",
"resource":{
"virtual":{
"name":"Get Salesforce accounts",
"_connectionId":"5daef2e628d53f7fb9036688",
"asynchronous":true,
"sandbox":false,
"test":{
"limit":10
},
"salesforce":{
"type":"soql",
"api":"rest",
"soql":{
"query":"SELECT ID,Name FROM Account"
},
"distributed":{
"referencedFields":[
],
"disabled":false,
"userDefinedReferencedFields":[
],
"relatedLists":[
]
}
},
"transform":{
"type":"expression",
"expression":{
"version":"1",
"rules":[
[
{
"extract":"Name",
"generate":"label"
},
{
"extract":"Id",
"generate":"value"
}
]
]
},
"version":"1",
"rules":[
[
{
"extract":"Name",
"generate":"label"
},
{
"extract":"Id",
"generate":"value"
}
]
]
},
"adaptorType":"SalesforceExport"
}
}
}
|
|
Resulting field |
|
staticMap is a refreshable or static form field that lets you map values using virtual exports or hard-coded options. It’s similar to mapping in integrator.io’s user interface; for example, mapping a Shopify location to a NetSuite location. This form field requires a combination of two virtual exports, two hard-coded options, or one virtual export and one hard-coded option on the left or right, respectively. If you want the left side of your mapping to be dynamic, you’ll need the virtual export on that side or vice versa.
There are three ways to use this form field:
-
Using virtual exports to populate the list options.
-
Using hard-coded values to populate the list options.
-
Using one virtual export and one hard-coded value to populate the list options.
|
Example 1: JSON definition |
{
"fieldMap": {
"refreshable": {
"id": "refreshable",
"name": "refreshableName",
"type": "staticMap",
"label": "label this",
"keyName": "extract",
"keyLabel": "extractLabel",
"valueName": "generate",
"valueLabel": "generateLabel",
"keyResource": {
"virtual": {
"name": "Lookup",
"_connectionId": "626•••••••••••••••••d7",
"apiIdentifier": "ea7••••••8",
"asynchronous": true,
"oneToMany": false,
"sandbox": false,
"netsuite": {
"type": "restlet",
"skipGrouping": true,
"statsOnly": false,
"restlet": {
"recordType": "location",
"searchId": "1234",
"restletVersion": false
},
"distributed": {
"useSS2Framework": false
}
},
"distributed": {
"disabled": false
},
"adaptorType": "NetSuiteExport"
}
},
"valueResource": {
"virtual": {
"name": "Get Locations",
"_connectionId": "62d•••••••••••••••••a6",
"apiIdentifier": "ed•••••65",
"asynchronous": true,
"assistant": "shopify",
"oneToMany": false,
"sandbox": false,
"assistantMetadata": {
"resource": "locations",
"version": "v2",
"operation": "retrieves_alistoflocations"
},
"http": {
"relativeURI": "/locations.json",
"method": "GET",
"successMediaType": "json",
"errorMediaType": "json",
"formType": "assistant",
"paging": {
"method": "linkheader",
"lastPageStatusCode": 404,
"linkHeaderRelation": "next"
},
"response": {
"resourcePath": "locations"
}
},
"rest": {
"relativeURI": "/locations.json",
"method": "GET",
"resourcePath": "locations",
"pagingMethod": "linkheader",
"allowUndefinedResource": false,
"linkHeaderRelation": "next"
},
"transform": {
"type": "expression",
"expression": {
"rules": [
[
{
"extract": "id",
"generate": "value"
},
{
"extract": "name",
"generate": "label"
}
]
],
"version": "1"
},
"version": "1",
"rules": [
[
{
"extract": "id",
"generate": "value"
},
{
"extract": "name",
"generate": "label"
}
]
]
},
"adaptorType": "RESTExport"
}
}
}
}
|
|
Example 1: JSON definition |
"fieldMap": {
"refreshable": {
"id": "refreshable",
"name": "refreshableName",
"type": "staticMap",
"label": "label this",
"keyName": "extract",
"keyLabel": "extractLabel",
"valueName": "generate",
"valueLabel": "generateLabel",
"keyOptions": [
{
"value": "10",
"label": "Austin"
},
{
"value": "9",
"label": "Baltimore"
},
{
"value": "1",
"label": "California"
},
{
"value": "5",
"label": "Dallas"
},
{
"value": "4",
"label": "FBA"
},
{
"value": "2",
"label": "Florida"
},
{
"value": "6",
"label": "Houston"
},
{
"value": "11",
"label": "Indianapolis"
},
{
"value": "3",
"label": "Maryland"
},
{
"value": "7",
"label": "Memphis"
},
{
"value": "8",
"label": "San Mateo"
}
],
"valueOptions": [
{
"value": "67738009765",
"label": "BOISBRIAND"
},
{
"value": "67738042533",
"label": "BOUCHERVILLE"
},
{
"value": "49044553893",
"label": "California"
},
{
"value": "49920475301",
"label": "Florida"
}
]
}
}
}
|
|
Example 1: JSON definition |
{
"fieldMap": {
"salesforceAccountType_map_netsuiteCustomerStageAndStatus": {
"optionsMap": [
{
"id": "salesforceAccountType",
"label": "Salesforce Account Type",
"required": true,
"type": "select",
"options": [
{
"value": "prospect",
"label": "Prospect"
},
{
"value": "customer_direct",
"label": "Customer - Direct"
},
{
"value": "customer_channel",
"label": "Customer - Channel"
},
{
"value": "channel_partner_reseller",
"label": "Channel Partner / Reseller"
},
{
"value": "installation_partner",
"label": "Installation Partner"
},
{
"value": "technology_partner",
"label": "Technology Partner"
},
{
"value": "other",
"label": "Other"
}
]
},
{
"id": "netsuiteCustomerStage",
"label": "NetSuite Customer Stage",
"required": true,
"type": "select",
"options": [
{
"value": "lead",
"label": "Lead"
},
{
"value": "prospect",
"label": "Prospect"
},
{
"value": "customer",
"label": "Customer"
}
]
},
{
"id": "netsuiteCustomerStatus",
"label": "NetSuite Customer Status",
"required": false,
"type": "select",
"options": [
{
"value": "6",
"label": "Unqualified"
},
{
"value": "7",
"label": "Qualified Lead"
},
{
"value": "8",
"label": "In Discussion"
},
{
"value": "9",
"label": "Identified Decision Makers"
},
{
"value": "10",
"label": "Proposal"
},
{
"value": "11",
"label": "In Negotiation"
},
{
"value": "12",
"label": "Purchasing"
},
{
"value": "13",
"label": "Closed Won"
},
{
"value": "14",
"label": "Closed Lost"
},
{
"value": "15",
"label": "Renewal"
},
{
"value": "16",
"label": "Lost Customer"
},
{
"value": "17",
"label": "Qualified Prospect"
}
]
}
],
"allowFailures": false,
"hideLookupAllowFailures": true,
"title": "Map Salesforce Account Type to NetSuite Customer Stage and Status",
"tooltip": "",
"name": "salesforceAccountType_map_netsuiteCustomerStageAndStatus",
"type": "staticMap"
}
}
}
|
|
Example |
|
Each custom form can have an optional layout object (at the same level as fieldMap), which determines the following positioning in the form:
-
Organized fields into sections:
The order of the fields’ keys in the layout object has precedence over the order in which you placed them in the fieldMap object.
Consider the following form definition, in which firstName and lastName are displayed according the to the layout order:
{
"fieldMap": {
"lastName": {
"id": "lastName",
"name": "lastName",
"type": "text",
"label": "What is your family name?"
},
"firstName": {
"id": "firstName",
"name": "firstName",
"type": "text",
"label": "What is your given name?"
}
},
"layout": {
"fields": [
"firstName",
"lastName"
]
}
}
The layout object supports a type option that lets you position each field into two or more columns. Then, you can label and order the fields in each column as an item in the containers object.
The following definition creates four fields, within two columns:
{
"fieldMap": {
"firstName": {
"id": "firstName",
"name": "firstName",
"type": "text",
"label": "What is your given name?"
},
"lastName": {
"id": "lastName",
"name": "lastName",
"type": "text",
"label": "What is your family name?"
},
"office": {
"id": "office",
"name": "office",
"type": "select",
"label": "Office",
"options": [
{
"items": [
"Stirling",
"Capetown"
]
}
]
},
"offsite": {
"id": "offsite",
"name": "offsite",
"type": "checkbox",
"label": "Remote worker"
}
},
"layout": {
"type": "column",
"containers": [
{
"label": "Name",
"fields": [
"firstName",
"lastName"
]
},
{
"label": "Location",
"fields": [
"office",
"offsite"
]
}
]
}
}
The layout object also exposes a "type": "collapse" option that creates one or more collapsible sections, such as the Advanced and Custom settings groupings that you see in built-in integrator.io forms. Then, you can label and order the fields in each section as an item in the containers object.
The example below defines two form fields within a new section:
{
"fieldMap": {
"versionString": {
"id": "versionString",
"name": "versionString",
"type": "text",
"label": "API version",
"required": true
},
"serverType": {
"id": "serverType",
"name": "serverType",
"type": "toggle",
"label": "Account type",
"defaultValue": "prod",
"options": [
{
"label": "Production",
"value": "prod"
},
{
"label": "Sandbox",
"value": "sb"
}
]
}
},
"layout": {
"type": "collapse",
"containers": [
{
"label": "Environment",
"fields": [
"versionString",
"serverType"
]
}
]
}
}
Section is open by default, since the field API version is required.
The layout object also exposes a "type": "box" option that contains the named form fields. Then, you can order the fields in each section as an item in the containers object.
The example below defines two form fields within a new section:
{
"fieldMap": {
"versionString": {
"id": "versionString",
"name": "versionString",
"type": "text",
"label": "API version"
},
"serverType": {
"id": "serverType",
"name": "serverType",
"type": "toggle",
"label": "Account type",
"defaultValue": "prod",
"options": [
{
"label": "Production",
"value": "prod"
},
{
"label": "Sandbox",
"value": "sb"
}
]
}
},
"layout": {
"type": "box",
"containers": [
{
"fields": [
"versionString",
"serverType"
]
}
]
}
}
The layout object also exposes a "type": "indent" option that groups the referenced fields into an indented section. Then, you can label and order the fields in each section as an item in the containers object.
The example below defines two form fields within a new section:
{
"fieldMap": {
"versionString": {
"id": "versionString",
"name": "versionString",
"type": "text",
"label": "API version"
},
"serverType": {
"id": "serverType",
"name": "serverType",
"type": "toggle",
"label": "Account type",
"defaultValue": "prod",
"options": [
{
"label": "Production",
"value": "prod"
},
{
"label": "Sandbox",
"value": "sb"
}
]
}
},
"layout": {
"type": "indent",
"containers": [
{
"label": "Environment",
"fields": [
"versionString",
"serverType"
]
}
]
}
}
The layout object includes a "type": "tabWithoutSave" option that organizes referenced fields into horizontal tabbed sections. You can then label and order the fields within each section by defining them as items in the containers object.
The example below illustrates how to define two horizontal tabs:
{
"fieldMap": {
"lastName": {
"id": "lastName",
"name": "lastName",
"type": "text",
"label": "What is your family name?"
},
"firstName": {
"id": "firstName",
"name": "firstName",
"type": "text",
"label": "What is your given name?"
},
"email": {
"id": "email",
"name": "email",
"type": "text",
"label": "What is your email?"
},
"address": {
"id": "address",
"name": "address",
"type": "text",
"label": "Address?"
}
},
"layout": {
"type": "tabWithoutSave",
"containers": [
{
"collapsed": false,
"label": "General",
"fields": [
"firstName",
"lastName"
]
},
{
"collapsed": false,
"label": "Advanced",
"fields": [
"email",
"address"
]
}
]
}
}
The layout object includes a "type": "verticalTabWithoutSave" option that organizes referenced fields into vertical tabbed sections. You can then label and order the fields within each section by defining them as items in the containers object.
The example below illustrates how to define two vertical tabs:
{
"fieldMap": {
"lastName": {
"id": "lastName",
"name": "lastName",
"type": "text",
"label": "What is your family name?"
},
"firstName": {
"id": "firstName",
"name": "firstName",
"type": "text",
"label": "What is your given name?"
},
"email": {
"id": "email",
"name": "email",
"type": "text",
"label": "What is your email?"
},
"address": {
"id": "address",
"name": "address",
"type": "text",
"label": "Address?"
}
},
"layout": {
"type": "verticalTabWithoutSave",
"containers": [
{
"collapsed": false,
"label": "General",
"fields": [
"firstName",
"lastName"
]
},
{
"collapsed": false,
"label": "Advanced",
"fields": [
"email",
"address"
]
}
]
}
}
Use the useAsPrimaryInterface boolean field in a custom form to customize the primary interface of workflow bubbles. This feature ensures that only crucial settings are displayed prominently, while other sections are concealed to reduce clutter. To capture necessary user inputs, include any relevant fields directly in the custom form. The Custom settings section was renamed to Settings and is available directly below the General section for better accessibility. These changes apply to all bubbles, including listeners. When this setting is enabled, the following sections are visible:
-
[Custom] Settings
-
Mock output (exports)
-
Mock response (imports)
-
Advanced (exports and imports)