List inputs
We can define lists inputs, the user can select one or multiple options in the provided list.
The principe is simple, the component takes a list property that is an array of items. Each items must have at least a value and a label property.
List inputs, like the other components, can handle the previously specifed properties like inline, visible, disabled, default, value, ...
Shared properties
All list inputs share common properties
Selected list item
In the data related to the list component, the value of the selected option will be stored. Also in the same time, the full selected option object is stored in the path of the component but the path is ending with _selected_list_item.
List coming from the dataset
We can tell the component to use a list coming from the dataset of the form. For this, you must declare a list not as an array but as an object, and this object must have property from that contains the path to the array of options in the dataset.
Simple from
Consider a dataset like this :
{
"constants": {
"list_from_dataset": [
{
"value": "option_from_list_a",
"label": "Option from dataset 1"
},
{
"value": "option_from_dataset_2",
"label": "Option from dataset 2"
}
]
}
}
The component is declared like this :
"which_one": {
"component": "select",
"label": "Select",
"list": {
"from": "constants.list_from_dataset"
}
}
From with dynamic data
Sometimes, the path from where the source list must be dynamic, that also can be done like the following. Consider a dataset like this :
{
"constants": {
"list_a": [
{
"value": "option_1_from_list_a",
"label": "Option 1 from list A"
},
{
"value": "option_2_from_list_a",
"label": "Option 2 from list A"
}
],
"list_b": [
{
"value": "option_1_from_list_b",
"label": "Option 1 from list B"
},
{
"value": "option_2_from_list_b",
"label": "Option 2 from list B"
}
]
}
}
{
"list_from": {
"component": "select",
"label": "Select where the list come from",
"list": [
{
"value": "list_a",
"label": "List A"
},
{
"value": "list_b",
"label": "List B"
}
]
},
"automatic_list_from_source": {
"component": "select",
"label": "List based on selected item",
"list": {
"from": "constants.${list_from}"
}
}
}
In this example, when the user select an item in the list_from component, the value will be replaced in the from of the automatic_list_source list property.
"multiple_list_combined": {
"component": "select",
"label": "List based on selected item",
"list": {
"from": [
"constants.list_a",
"constants.list_b",
"constants.list_c",
]
}
},
If we pass an array of string in the list.from property of a list component, it will get each list and merge them on a single list making all the options available to the component
Sorting list
We can sort the list (based on the label) by defining the sort property of the list component. This property takes only asc or desc value.
"which_one": {
"component": "select",
"label": "Which one ?",
"sort": "asc",
"list": {
"from": "constants.wich_one_list_options"
}
}
sortByProperty property
We can also sort the list by a property of each item in the list by defining the sortByProperty property.
sortByProperty refers to a direct property of the list items, not to a path in the original dataset. For this reason, it must be defined as the property name itself.
"list_from_dataset": {
"component": "select",
"label": "List from dataset",
"sort": "asc",
"sortByProperty": "order",
"list": [
{
"value": "option_1_from_list_a",
"label": "Option 1 from list A",
"order": 1
},
{
"value": "option_2_from_list_a",
"label": "Option 2 from list A",
"order": 2
},
{
"value": "option_3_from_list_a",
"label": "Option 3 from list A",
"order": 3
}
]
}
"list_from_dataset": {
"component": "select",
"label": "List from dataset",
"sort": "asc",
"sortByProperty": {
"from": "constants.list_from_dataset.order"
},
"list": [
{
"value": "option_1_from_list_a",
"label": "Option 1 from list A",
"order": 1
},
{
"value": "option_2_from_list_a",
"label": "Option 2 from list A",
"order": 2
},
{
"value": "option_3_from_list_a",
"label": "Option 3 from list A",
"order": 3
}
]
}
Sorted List By Property#
Unique by property
We can also unique the list by a property of each item in the list by defining the uniqueByProperty property.
uniqueByProperty refers to a direct property of the list items, not to a path in the original dataset. For this reason, it must be defined as the property name itself.
"list_from_dataset": {
"component": "select",
"label": "List from dataset",
"uniqueByProperty": "value",
"list": [
{
"value": "option_1_from_list_a",
"label": "Option 1 from list A",
"order": 1
},
{
"value": "option_2_from_list_a",
"label": "Option 2 from list A",
"order": 2
},
{
"value": "option_2_from_list_a",
"label": "Option 3 from list A",
"order": 3
}
]
}
In this example, the list will be unique by the value property of the list items.
The uniqueByProperty property can also be an object with a from property that contains the path to the property in the original dataset.
"list_from_dataset": {
"component": "select",
"label": "List from dataset",
"uniqueByProperty": {
"from": "path_to_property_to_unique_by_in_dataset"
},
"list": [
{
"value": "option_1_from_list_a",
"label": "Option 1 from list A",
"order": 1
},
]
}
In this example, the list will be unique by the property defined in the path_to_property_to_unique_by_in_dataset path in the original dataset.
List With UniqueByProperty#
Conditionnal list
In some case we might want to have a specific option list for a case A, but in a case B, have another list of options. That can be done by defining conditionnal_lists in place of list. It takes an array of list and its condition(s) to be used. It can define more complex list combinations and conditions based on Conditions defined in the Conditions section.
"check_one": {
"component": "select",
"label": "Select with conditionnal list",
"conditional_lists": [
{
"list": {
"from": "constants.list_a"
},
"condition": [
{
"property": "selected_list_source",
"assertion": "equal",
"value": "list_a"
}
]
},
{
"list": {
"from": "constants.list_b"
},
"condition": [
{
"property": "selected_list_source",
"assertion": "equal",
"value": "list_b"
}
]
},
]
}
Conditionnal option item
We can also define condition(s) on list option. That way an option can be available in certain case but not in other case. It also is handled with an array of condtions defined in the Condtions section placed in a visible property of the list option.
"which_one": {
"component": "select",
"label": "Type",
"list": [
{
"value": "person",
"label": "Person"
},
{
"value": "company",
"label": "Company"
},
{
"value": "extra",
"label": "Conditional element",
"visible": [
{
"property": "with_extra",
"assertion": "isTrue"
}
]
}
]
}
Generated list
In some case we might want to propose a list of several numbers available, mostly usefull if we want to propose a dropdown composed of a certain amount of years. We can defined a listGenerator property, that will be interpreted and will set a list for the list component.
"years_2": {
"component": "select",
"label": "From 2000 to now, ascending",
"listGenerator": {
"years": {
"from": 2000,
"to": "now",
"step": 1,
"sort": "asc"
}
}
}
For now, only years is available in the listGenerator property. We can so generate a list starting at the from property, to the to property, with a step defined and sorted by the sort property (which accepts only asc or desc)