Combobox

Combobox


Warning
COMBOBOXES HAVE BEEN DEPRECATED, INSTEAD, USE THE SELECT ELEMENT.


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 selected you can use the "stateTracking": "full" property which will provide an object with 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
⌄
⌄
⌄
⌄
⌄
{
"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.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
{
"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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
⌄
⌄
⌄
⌄
⌄
⌄
{
"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
}

 

    • Related Articles

    • Color Input - JSON Editing

      Creating a screen, sometimes it is quick and easy to use the modal feature within a table or form design to engage with your end users to create or update a record in Fuuz. You can certainly use the screen designer to drop in the input components you ...

    • Transform Nodes

      Article Type: Node Reference Audience: Developers, App Admins Module: Data Flows / Node Designer Applies to Versions: Platform 3.0+ Prerequisites: None - This guide assumes no prior knowledge 1. Overview What are Transform Nodes? Transform nodes ...

    • Transform Data in a Column

      In the screen designer, you can dynamically transform data in columns. This can help when the data stored in the table, does not match the format you’re hoping to present to the user. In this example, we will highlight how we manage to convert a ...

    • Array Input

      The Array Input element can be used in the Screen Designer by dragging the element into the Screen Designer Canvas. Within the 'Basic' editable properties in the Editor Panel, the Array input can be customized to have a label that will present on the ...

    • Transform Nodes

      Article Type: Node Reference Audience: Developers, App Admins Module: Data Flows / Node Designer Applies to Versions: Platform 3.0+ Prerequisites: None - This guide assumes no prior knowledge 1. Overview What are Transform Nodes? Transform nodes ...