Combobox

Combobox

Important: COMBOBOXES HAVE BEEN DEPRECATED — use the Select element instead.

The Combobox element presents a dropdown list of selectable options on a screen. Options can be built dynamically with a transform, defined as a static list, or queried from a Data Model.

Comboboxes require that you provide an id and a label property. The values of these can be the same, but they must both be present. The label is what will show in the Combobox when you are selecting, and the id by default will be the value placed in the JSON output when the value is selected.

If you need to provide the entire state of the Combobox when a value is selected, you can use the "stateTracking": "full" property, which will provide an object with both the id and the label.

Options (Transform)

The options transform can be useful to build a dynamic list of inputs from a transform. In the example we use the $momentTzTimezones() function, which returns all available time zones supported by moment.

{
  "type": "object",
  "properties": {
    "timezone": {
      "type": "string",
      "format": "timezone",
      "inputProps": {
        "type": "combobox",
        "options": {
          "__transform": "$momentTzTimezones().{\"id\": $, \"label\": $}"
        }
      }
    }
  },
  "additionalProperties": false
}

Options (Static)

The options transform also allows you to build a static list of options a user can select from.

Note: stateTracking is set to "full", which will return both the id and the label fields in the JSON.

{
  "type": "object",
  "properties": {
    "route": {
      "type": "object",
      "format": "timezone",
      "inputProps": {
        "type": "combobox",
        "stateTracking": "full",
        "options": [
          {
            "id": "upper",
            "label": "Upper"
          },
          {
            "id": "middle",
            "label": "Middle"
          },
          {
            "id": "lower",
            "label": "Lower"
          }
        ]
      }
    }
  },
  "additionalProperties": false
}

Query

The query option is the standard Combobox option that allows you to run a query against a Data Model and return related data. In the example we use the Connection model to list Connections in the system.

{
  "type": "object",
  "properties": {
    "connection": {
      "type": "object",
      "title": "Default Connection",
      "inputProps": {
        "type": "combobox",
        "api": "Application",
        "queryType": "Connection",
        "labelField": "name",
        "labelPath": "name",
        "stateTracking": "full",
        "multiselect": false,
        "query": {
          "fields": [
            "connection.id",
            "connection.name"
          ]
        }
      }
    }
  },
  "additionalProperties": false
}

See Also

• Array-Input
• JSON-Schema-Inputs
• Dynamic-Field-Configurations
• Color-Input-JSON-Editing
• The-Screens-Screen

---

Source: support.fuuz.com