Common form fields

Stephen Brandt
  • Updated

Forms are defined by JSON objects, which you can add to the Custom 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, turn on Developer mode, go to Tools > Dev playground and select Form builder : Field dictionary to open the example JSON.

Contents

Required and optional form field settings

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

id

Required Yes
Format String
Values Must be the same as the form field’s key
Example "id": "FieldName"

name

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 "name": "FieldName"

type

Required Yes
Format String
Values Any supported field; see Available fields, below
Example "type": "radiogroup"

label

Required No
Format String
Values The instructions that you want to precede the field (or follow it in the case of a checkbox)
Example "label": "Are you sure you want to continue?"

helpText

Required No
Format String, HTML tags allowed
Values Additional content to be shown when the help (Field help button) button is clicked
Example "helpText": "If this doesn't make sense, ping Debbie in Slack."

description

Required No
Format String
Values Explanatory text that is displayed below the form field
Example "description": "Double-check your response, because it may change how the orders are updated in Salesforce."

displayAfter

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. The displayAfter form field setting allows you to display form fields at a desired location in your export or import forms. The setting will display the custom field after an existing field. 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"
        }
      ]
    }
  ]
}}

required

Applies to All fields except checkboxes
Required No
Format Boolean
Values
  • true – label is in bold*, validated by the form
  • false [default]
Example "required": true

inputType

Applies to Text input ("type": "text")
Required No
Format String
Values
  • number – only numeric input accepted
  • password – masked characters
Example "inputType": "number"

multiline

Applies to Text input ("type": "text")
Required No
Format Boolean
Values
  • true – appears like an HTML <textarea> tag
  • false – single line of text input [default]
Example "multiline": true

rowsMax

Applies to Text input ("type": "text")
Required No
Format Numeric
Example "rowsMax": 5

defaultValue

Required No
Format String
Values The selected option or suggested content that you want to provide for the user when the form is first loaded
Example "defaultValue": "(415) "

delimiter

Applies to Text input ("type": "text")
Required No
Format String
Values Any character or set of characters is allowed – it will have no change to the form’s appearance, but the custom settings output will be split into an array delimited by the value supplied
Example "delimiter": ","

options (simple set)

Applies to Various fields, where "type" is one of the following:
Required No
Format Array of strings
Values The list of items that you want to offer:
  • The simple set options differ from the value pairs in that the option name is also its value returned in the custom settings
  • Items are sorted alphabetically
Example 
"options": [
  {
    "items": [
      "Create",
      "Update",
      "Delete"
    ]
  }
]

options (arrays of labels and values)

Applies to Various fields, where "type" is one of the following:
Required No
Format Nested array of label-value pairs
Values The list of items that you want to offer:
  • The label is shown in the form, while only its value is returned in the custom settings
  • Items are sorted alphabetically
Example 
"options": [
  {
    "label": "United States",
    "value": "us"
  },
  {
    "label": "United Kingdom",
    "value": "uk"
  },
  {
    "label": "Australia",
    "value": "oz"
  }
]

mode

Applies to Editor ("type": "editor")
Required No
Format String
Values
  • csv
  • text
  • xml
  • json
Example "mode": "json"

keyName

Applies to Key-value pairs ("type": "keyvalue")
Required No
Format String
Values The placeholder tip that you want displayed for the key name
Example "keyName": "header-name"

valueName

Applies to Key-value pairs ("type": "keyvalue")
Required No
Format String
Values The placeholder tip that you want displayed for the value (input on the right)
Example "valueName": "your-value"

showDelete

Applies to Key-value pairs ("type": "keyvalue")
Required No
Format Boolean
Values
  • true – trash can (delete) button appears to the right of the pair
  • false – no option for the user to delete a line [default]
Example "showDelete": true

visibleWhen

Required No
Format Array
Values
  • field – points to the key of another field
  • is – a list of possible values for the other field, which – after user interaction – will make this field visible if true
Example 
"visibleWhen": [
  {
    "field": "formFieldDefined",
    "is": [
      "Proposal"
    ]
  }
]

Available fields

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; leave a comment below if you see a specific form field in integrator.io for which you would like to see an example definition.

Form fields with sample definitions

Advanced field editor

JSON definition 
"txtEditor": {
  "id": "txtEditor",
  "name": "txtEditor",
  "type": "editor",
  "label": "Additional JSON field",
  "mode": "json"
}
Resulting field
Typical Custom settings response 
{
  "txtEditor": "{\n  \"sale\": \"declined\"\n}"
}

Checkbox

JSON definition 
"disclaim": {
  "id": "disclaim",
  "name": "disclaim",
  "type": "checkbox",
  "label": "Of course I have read the terms & conditions carefully"
}
Resulting field
Typical Custom settings response 
{
  "disclaim": true
}

Date selector

JSON definition 
"createdAfter": {
  "id": "createdAfter",
  "name": "createdAfter",
  "type": "date",
  "label": "Created after"
}
Resulting field
Typical Custom settings response 
{
  "createdAfter": "07/04/2020"
}

Drop-down list

JSON definition 
"province": {
  "id": "province",
  "name": "province",
  "type": "select",
  "label": "Province",
  "options": [
    {
      "items": [
        "Ontario",
        "Quebec",
        "Manitoba"
      ]
    }
  ]
}
Resulting field
Typical Custom settings response 
{
  "province": "Ontario"
}

Key-value pairs

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"
    }
  ]
}

Multi-select list

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"
  ]
}

Radio buttons

JSON definition 
"pickOne": {
  "id": "pickOne",
  "name": "pickOne",
  "type": "radiogroup",
  "label": "Admin level",
  "options": [
    {
      "items": [
        {
          "label": "Yes",
          "value": "1"
        },
        {
          "label": "No",
          "value": "0"
        }
      ]
    }
  ]
}
Resulting field
Typical Custom settings response 
{
  "pickOne": "1"
}

Remove invalid values

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

Text input – single or multiline

JSON definition 
"myTxtField": {
  "id": "myTxtField",
  "name": "myTxtField",
  "type": "text", 
  "label": "Reason for editing my clean export"
}
Resulting field
Typical Custom settings response 
{
  "myTxtField": "It stopped working"
}

Also see the multiline and rowsMax options.

Text input – delimited

JSON definition 
"listOcodes": {
  "id": "listOcodes",
  "name": "listOcodes",
  "type": "text",
  "delimiter": ",",
  "label": "Error codes, separated by a comma"
}
Resulting field
Typical Custom settings response 
{
  "listOcodes": [
    "123",
    "45a",
    "67b"
  ]
}

Text input – number

JSON definition 
"storyPoints": {
  "id": "storyPoints",
  "name": "storyPoints",
  "type": "text",
  "inputType": "number",
  "label": "Story points"
}
Resulting field
Typical Custom settings response 
{
  "storyPoints": 13
}

Text input – password

JSON definition 
"token": {
  "id": "token",
  "name": "token",
  "type": "text",
  "inputType": "password",
  "label": "API token",
  "required": true
}
Resulting field
Typical Custom settings response 
{
  "token": "987a654b321c"
}

Toggle switch

JSON definition 
"turnOn": {
  "id": "turnOn",
  "name": "turnOn",
  "type": "toggle",
  "label": "Primary connection",
  "options": [
    {
      "label": "Yes",
      "value": true
    },
    {
      "label": "No",
      "value": false
    }
  ]
}
Resulting field
Typical Custom settings response 
{
  "turnOn": true
}

Type: Dynamic list

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.

"multiselect": true

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"
        }
      }
   }
  }
}

"multiselect": false

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"
        }
      }
   }
  }
}

Type: Refreshable drop-down list

The Refreshable dropdown list form field allows you to create a dropdown list of items, similar to the standard Select option. However, for Refreshable dropdown list, the dropdown 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.

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

view.pngview_2.png

Type: Static or refreshable mapping

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.

Option: Using virtual exports 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"
        }
      }
    }
  }

Option: Using hard-coded values 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",
      "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"
        }
      ]
    }
  }
}

URL input

JSON definition 
"productsUrl": {
  "id": "productsUrl",
  "name": "productsUrl",
  "type": "relativeuri",
  "label": "URL for exporting products"
}
Resulting field
Typical Custom settings response 
{
  "productsUrl": "prod/v1/"
}

Form layout options

Each custom form can have an optional layout object (at the same level as fieldMap), which determines the following positioning in the form:

Specify the order of custom form fields

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"
    ]
  }
}

Establish a multi-column layout

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"
        ]
      }
    ]
  }
}

Organize form fields into collapsible sections

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.

Organize form fields into boxed sections

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"
        ]
      }
    ]
  }
}

Organize form fields into indented sections

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"
        ]
      }
    ]
  }
}

 

Related articles

Comments

11 comments

Date Votes
  • Bas van Ditzhuijzen Strategic Partner NetSuite Integration Whiz Salesforce Integration Whiz
    Partner Implementation Certification
    Great Answer
    Answer Pro
    Engaged
    Celigo University Level 4: Legendary

    There is an extra inputType "staticMap" that allows you to do make a mapping table based on data that is sourced live from the source&target systems.

    There is an excellent example by Tyler in the following link:

    https://docs.celigo.com/hc/en-us/community/posts/11906392792347-Querying-NetSuite-Records-in-Custom-Form-Builder-Settings

    0
  • Bas van Ditzhuijzen Strategic Partner NetSuite Integration Whiz Salesforce Integration Whiz
    Partner Implementation Certification
    Great Answer
    Answer Pro
    Engaged
    Celigo University Level 4: Legendary

    There is an extra type "exportSelect" that allows you to do a virtual export, and choose one of the results for your custom setting:

    Make sure that your virtual export returns 'label' and 'value' as the value that will be shown and the value that is saved in the custom setting.

    "CeligoFileDefinitionId": {
          "helpText": "The Id",
          "id": "CeligoFileDefinitionId",
          "label": "Celigo File Definition Id",
          "name": "CeligoFileDefinitionId",
          "required": true,
          "resource": {
            "virtual": {
              "_connectionId": "yourconnectionId",
              "adaptorType": "HTTPExport",
              "asynchronous": true,
              "http": {
                "errorMediaType": "json",
                "formType": "rest",
                "method": "GET",
                "relativeURI": "/v1/filedefinitions",
                "successMediaType": "json"
              },
              "name": "read file definitions",
              "oneToMany": false,
              "transform": {
                "expression": {
                  "rules": [
                    [
                      {
                        "extract": "_id",
                        "generate": "value"
                      },
                      {
                        "extract": "name",
                        "generate": "label"
                      }
                    ]
                  ],
                  "version": "1"
                },
                "rules": [
                  [
                    {
                      "extract": "_id",
                      "generate": "value"
                    },
                    {
                      "extract": "name",
                      "generate": "label"
                    }
                  ]
                ],
                "type": "expression",
                "version": "1"
              }
            }
          },
          "type": "exportSelect"
        }

     

     

     

    0
  • Tyler Lamparter Principal Product Manager
    Awesome Follow-up
    Engaged
    Top Contributor
    Answer Pro
    Celigo University Level 4: Legendary

    Bas van Ditzhuijzen one additional one is having a refreshable multi select. If you take the exportSelect option, and just add another field for "multiselect": true, then you can have a live refreshable multiselect field. Kathyana Rule and I are actually working on updating this doc as we speak. Stay tuned!

    "CeligoFileDefinitionId": {
          "helpText": "The Id",
          "id": "CeligoFileDefinitionId",
          "label": "Celigo File Definition Id",
          "name": "CeligoFileDefinitionId",
          "required": true,
          "multiselect": true,
          "resource": {
            "virtual": {
              "_connectionId": "yourconnectionId",
              "adaptorType": "HTTPExport",
              "asynchronous": true,
              "http": {
                "errorMediaType": "json",
                "formType": "rest",
                "method": "GET",
                "relativeURI": "/v1/filedefinitions",
                "successMediaType": "json"
              },
              "name": "read file definitions",
              "oneToMany": false,
              "transform": {
                "expression": {
                  "rules": [
                    [
                      {
                        "extract": "_id",
                        "generate": "value"
                      },
                      {
                        "extract": "name",
                        "generate": "label"
                      }
                    ]
                  ],
                  "version": "1"
                },
                "rules": [
                  [
                    {
                      "extract": "_id",
                      "generate": "value"
                    },
                    {
                      "extract": "name",
                      "generate": "label"
                    }
                  ]
                ],
                "type": "expression",
                "version": "1"
              }
            }
          },
          "type": "exportSelect"
        }
    0
  • James Hamilton

    Are there certain conditions where the "displayAfter" field will or won't apply? I'm having trouble getting it to correctly have my fields displayed in different locations of the export I'm working on. I'm trying to place a custom field in the HTTP request section of an HTTP export, specifically, I'm trying to place it under the "export.http.method." Does anyone have examples of being able to achieve this? Would love any help on the following questions:

    • Can "displayAfter" be used in a JSON form definition, Script, or both?
    • Should the field be placed in the layout if "displayAfter" is being used?
    • Can "displayAfter" be used on a group of fields / container?

    Any help is appreciated!

    0
  • Sree Vani Amara Principal Product Manager
    Engaged
    Answer Pro
    Celigo University Level 4: Legendary

    Hi James, 
    Thank you for reaching out to us. 
    "displayAfter" field will only work for the connectors in Simple form view. 

    • "displayAfter" can be used in JSON form definition
    • Field need not be placed in a layout. "displayAfter" is just another property we add to the existing metadata. It does not depend on the layout.
    • No, we only support "displayAfter" to point to a field but not group of fields/container

    Thanks!

    1
  • James Hamilton

    Thank you, Sree!

    I have another question after working on some custom forms. 

    I'm having difficulty specifying the return value when I'm using a NetSuite export as a "keyResource" in a static map. Is this a limitation of the functionality? It seems as though the form will fail to render if I exclude the "columns" array, and it will also fail if the "name" field in any of the columns is not the name of an accessible field for that record type. However, I'm unable to change the output value using the "value" column. 

    My current example is using a static list for the value options, and the left side is looking for a list of shipitems from NetSuite. Here is a summary of the behavior:

    • no "columns" array --> error
    • "name": "itemid" for label and value columns --> list displays itemid, form outputs internalid.
    • "name":"internalid" for label and value columns --> list displays internalid, form outputs internalid.

    The form will respond to changes in the "label" column, but not in the "value" column. Is there any way to extract other information from a restlet that's being used in a static map?

     

    Thanks in advance!

    0
  • Bas van Ditzhuijzen Strategic Partner NetSuite Integration Whiz Salesforce Integration Whiz
    • Edited
    Partner Implementation Certification
    Great Answer
    Answer Pro
    Engaged
    Celigo University Level 4: Legendary

    This is what I do for a static map with netsuite lookup:

        "locationMap": {
          "id": "locationMap",
          "keyLabel": "SFCC Location",
          "keyName": "sfccLocation",
          "label": "Location map",
          "name": "locationMap",
          "type": "staticMap",
          "valueLabel": "NetSuite Location",
          "valueName": "nsLocation",
          "valueResource": {
            "virtual": {
              "_connectionId": "netsuite",
              "asynchronous": true,
              "netsuite": {
                "restlet": {
                  "criteria": [
                    {
                      "field": "isinactive",
                      "operator": "is",
                      "searchValue": "F"
                    }
                  ],
                  "columns": [
                    {
                      "label": "id",
                      "name": "internalId"
                    },
                    {
                      "label": "label",
                      "name": "name",
                      "sort": "true"
                    }
                  ],
                  "recordType": "location"
                },
                "skipGrouping": true,
                "type": "restlet"
              }
            }
          }
        }

    The value column is what gets saved in the settings, label is what is shown to the user on the form. So any mapping you use the values in would need to be Location(internalid) 

     

    EDIT: fixed code

    1
  • James Hamilton

    Thank you Bas van Ditzhuijzen. This seems to be where I'm encountering an issue, though I'm unsure if it's a bug, known limitation, or if I'm missing something.

    The issue I'm having is in the output, or "value" setting which will be saved in settings, as you mentioned.

    This output does not change, even if I make changes to the "value" field in the columns. So, both of these forms will output the location ID, even though the "value" is changed.

    Value: internalId

    "columns": [
      {
        "label": "value",
        "name": "internalId"
      },
      {
        "label": "label",
        "name": "name",
        "sort": "true"
      }
    ]

    Value: name

    "columns": [
      {
        "label": "value",
        "name": "name"
      },
      {
        "label": "label",
        "name": "name",
        "sort": "true"
      }
    ]

    Both output:

    {
      "locationMap": [
        {
          "sfccLocation": "userInput",
          "nsLocation": "31"
        }
      ]
    }

    I am able to change the display; when I set the label to "name" or "internalId," the drop-down will respond accordingly and display the name or internalId. But, I'm having no luck changing the output of the form selection to be anything other than the internal id.

    Any help appreciated :)

    0
  • Sree Vani Amara Principal Product Manager
    Engaged
    Answer Pro
    Celigo University Level 4: Legendary

    Hi James, 
    Apologies for the delay. To address the issue, kindly create a support ticket. This will enable our team to investigate and resolve the problem effectively. Make sure to provide the entire form metadata for the custom settings.Thanks! 

    0
  • Bas van Ditzhuijzen Strategic Partner NetSuite Integration Whiz Salesforce Integration Whiz
    Partner Implementation Certification
    Great Answer
    Answer Pro
    Engaged
    Celigo University Level 4: Legendary

    I was wrong, the label for the data that is saved has to be 'id' and not 'value' for a staticmap:

    "columns": [
                    {
                      "label": "id",
                      "name": "name"
                    },
                    {
                      "label": "label",
                      "name": "name",
                      "sort": "true"
                    }
                  ],

     

    1
  • James Hamilton

    Thank you Bas van Ditzhuijzen, that does the trick! Appreciate that info :)

    0

Please sign in to leave a comment.