Several integration endpoints support custom forms. For example the "Import" integration has a search-format endpoint that allows admins to customize the form the user sees when importing from an external source.

These formInputs always follow the same JSON structure:

formInputs: [
  {
    fieldType,
    isRequired,
    name,
    label,
    ...additionalFieldsHere
  },
  ...moreInputsHere
]

fieldType must be one of

InputField
TextareaField
CheckboxField
SuggestField
SelectField
NumericInputField
RadioGroupField
DateInputField
DateRangeInputField
ColorField
SwitchField
EditableTextField
FileUploadField
PagedSelectField

An interactive demo of the supported form elements can be found here https://teselagen.github.io/teselagen-react-components/#/FormComponents

Advanced:

PagedSelectField

Sometimes there are too many options to be loaded into a SelectField in the initial format call. In this case you'll usually want to have a SelectField that is paginated and searchable. Luckily that's where the PagedSelectField comes in.

Usage:

{
  fieldType: "PagedSelectField",
  name: "project",
  label: "Project",
  url: "node-red://find-projects" //this can be user defined
}

The referenced url endpoint (usually set up in node-red) has the following req/res:

//request body
{
  query: string,
  pageNumberOrCursor: number | string //will always be 0 to start
}

//response body
{
  options: [{label: "Project1", value: "p1"}, ...etc],
  nextPageOrCursor: number | string //return the next page or a cursor
}

cascadeEndpoint

Sometimes you'll want to dynamically change the form structure based on a previous input. That's why we've added a cascadeEndpoint prop to allow for additional form inputs to be added on the fly. Currently only SelectField's and PagedSelectFields support this prop.

Usage:

{
  fieldType: "SelectField",
  name: "project",
  label: "Project",
  options: [{label: "P1", value: "p1"},{label: "P2", value: "p2"}],
  cascadeEndpoint: "node-red://get-more-fields" //this can be user defined
}

The referenced url endpoint (usually set up in node-red) has the following req/res:

//request body
{
  parentName: string,
  parentLabel: string
  parentValue: any //this will come from the options supplied to the above field
}

//response body
{
  formInputs: [...this format is the same as usual form inputs],
  nextPageOrCursor: number | string //return the next page or a cursor
}