Advanced Form Configuration

uiSchema

$options

grid columnOrder

Sometimes you're collecting many fields, but only want to show a handful of the responses list page. This option lets you specific only the columns you want to show in the table.

"grid": {
  "columnOrder": [
    "date_k72eg76q9dp6b3y6",
    "multilinetext_84d9y8dbeaddgjwb",
  ]
}

variables

Variables can be used to take the value entered from one form field and use it to populate another form field. For example, you might want to choose a project from a dropdown where the value is it's ID, and use that ID to pull a list of people on the project in another field.

"variables" is an array objects with the format:

[
    {
        "name": "<NAME_YOU_WANT_TO_REFERENCE_LATER>",
        "paths": {
            "source": "<JSON_PATH_TO_THE_KEY_IN_FORMDATA",
            "destinations": [
                "JSON_PATH_TO_THE_DESTINATION_IN_UISCHEMA"
            ]
    }
]

In uiSchema

So you might want to take the value from a field called project and call it project_id then send it to the remote url option in the uiSchema for the field, person

{
    "$options": {
        "variables": [
            {
                "name": "project_id",
                "paths": {
                    "source": "$.project",
                    "destinations": [
                        "$.person['ui:options'].remote.url"
                    ]
                }
            }
        ]
    }
}

External Form Data

Sometimes you might want data brought in from outside sources to populate part of the form's data. In this example, you'll pull in a list of RFIs from a date range.

"externalFormData": [
    {
        "url": "/procore/api/?endpoint=/vapid/projects/1234/rfis?query[filters[created_at]]=2020-04-15T05:00:00Z...2020-04-23T05:00:00Z",
        "keys": [
           "subject",
           "status",
           "ball_in_court",
           "initiated_at",
           "due_date",
           "time_resolved"
       ],
       "paths": {
           "destination": "rfis"
       }
  }
]