Filtered variables is a type of field in the Input Form widget. It enables you to select a single value from a list that can change dynamically based on the values of other fields.

For this type of field to work, you need to link it to another field. In the example above, the Food field is linked to the Food Types field. Whenever the Food Types field is changed, the options inside of the Food field are refreshed. 

Configuration

In order to configure this field, you need to head over to the Fields Configuration tab of your Input Form widget and select the type Filtered Variables.

• Label: This is the label above the field, this should indicate what the purpose of the field is.
• Required: This option indicates if this field needs to be filled before submitting the input form.
• Show in a new line: This option indicates if the field should be placed on a new line inside the widget.
• Placeholder: This option is an extra explanation for the user, it's the text written inside of the field when the field is empty.
• Filter origin: This is the linked field, the one that will filter the options based on their value. Following the same example at the beginning of the article, the food_types field was selected as the Filter Origin, this means that whenever the Food Types is changed, our list will show only values associated with the correct food type.
• Options: This field is the source of the list, the values of the selected variable will populate the options in our list.

Structure

In order to filter the options, you need to set a serie field in each of the options from your list (the variable food_options, for example).

Whenever a change occurs in the Filter Origin field, the list filters its values by comparing the Filter Origin value with the serie property of each item in the list.

The comparison ignores any white spaces and uppercase characters. If the filter origin value is my value 1 and the serie of an option is myvalue1, the comparison will yield true, meaning the option will be shown.

Example

In this section, we expand on the original example shown at the beginning of this article. 

This was the structure sent to TagoIO:

[
  {
    "variable": "food_options",
    "value": "Apple",
    "serie": "fruit"
  },
  {
    "variable": "food_options",
    "value": "Banana",
    "serie": "fruit"
  },
  {
    "variable": "food_options",
    "value": "Broccoli",
    "serie": "vegetable"
  },
  {
    "variable": "food_options",
    "value": "Carrot",
    "serie": "vegetable"
  }
]

And in our input form, 2 (two) fields were created. One for the Food Types and another one for the Food. 

The Food Types is a static dropdown, while the Food is a filtered variables field showing the food_options list.

As you can see, the Food is linked to the Food Types through the filter origin configuration.

In the Food Types field, two options were set: fruit and vegetable. Whenever we select fruit, the Food field shows only the options where the serie of food_options is equal to fruit.