Combobox

Combobox


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

    • Input

      User input elements are fundamental tools in application development. They facilitate user interactions, data collection, and enhance user experiences. These elements seamlessly integrate within forms, offering flexibility for customization and deep ...

    • Text 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 ...

    • Screen Designer Dynamic Fields

      Dynamic Fields Configuration in Fuuz Screen Designer Introduction Dynamic Fields in the Fuuz Screen Designer are essential for optimizing performance and ensuring a smooth user experience. This guide will help you understand how to configure Dynamic ...

    • 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 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 ...