Filtered Variables

Filtered Variables

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.


    • Related Articles

    • Environment Variables

      Environment Variable is a very useful resource to send variables values to the context of your script. You can, for example, add tokens of accounts and devices to be used later in the script when it runs. The Analysis will get these variables as ...
    • Grouping variables

      Grouping variables It is expected that most devices will send more than one variable at a certain time. And when visualizing the data, the user may want to see them synchronized at each sample period. For example, a device sends a GPS location, speed ...
    • Payload Parser - Context & global variables

      If you are going to create your own parser, you need to understand how context works. When you start writing your own Payload Parser, you can use certain globals variables in your code. Think of these global variables as variables that you can access ...
    • Filtering Out Variables with Parser Code

      When your device sends data from a device to TagoIO, a parser code may be added to your device (located in the 'Payload Parser' tab) to extract and create the variables in the buckets using TagoIO format.  If you want to save space in your register ...
    • Field Types for Input Form

      The field is the structure that contains the relation between the inputted data and the Device data in some widgets. Fields can have a bunch of types, depending on the widget that it is dealing with. 1. Text A typical text input will appear, and the ...

      Aug 30 - Join us at TagoIO Connect Global, our annual conference. Learn new features and use cases. Register Here


        Future and past Webinars