Creating Dynamic Dropdown selection using Forms

Creating Dynamic Dropdown selection using Forms

Dynamic Dropdown allows users to create dynamic items selection on a dropdown list like the image below

The items from a Dynamic Dropdown come from a variable, this means that you can change the values dynamically, developers can create any kind of input so users can insert the values to be selected in the Dynamic Dropdown.

You will want to use this feature when you constantly need to change the options available in a dynamic way. Imagine a scenario where you need to insert supervisors in your application and later attach these clients to a device. Using a Dynamic Dropdown you can easily change the client options by adding them to the bucket or removing them.


First, you create a widget of type Input Form, enter the output variable and then select the type Dropdown in Field Type. To define it as a Dynamic Dropdown, change the Use values from to Dynamic.

The previous options will disappear and now you need to define the variable where the options will come from. In this case, is client_options from the Device/Bucket Example.

If you save now, the dropdown will have no option to be selected. Let's fill it.

Insert the following data in your bucket:

{
  variable: "supervisor_options",
  value: "John Doe"
} 

Now your dropdown should look like this:

Now there are scenarios where you need that option to be one, but the value stored in the bucket is another. For example, if the supervisor has a code in your application instead of being stored by their name. In this case, you may want to use the metadata value parameter.

{
  variable: "supervisor_options",
  value: "12433",
  metadata: {
    label: "John Doe"
  }
}

    • Related Articles

    • Dynamic Table Widget

      Dynamic tables are tables that dynamically populate as your data arrive while keeping the history of the previous data in each row. Editing the dynamic table It is possible to customize widget color, apply a formula to columns, show time column, show ...
    • Creating Analysis

      Creating your own analysis is easy. First, click on Analysis on the sidebar, then click the + Add Analysis button in the upper right of the analysis main screen. Just write a name and you’re ready to go! 1. Name What you usually use to identify your ...
    • Creating a Network integration

      To create a new integration you must go to the Network management page and press the following buttonon the right side of the page. You only need to specify the network's name. Only you are able to view your networks. If you with to make your ...
    • Running Analysis as External using Node.JS

      Analysis is what allows you to create powerful applications on TagoIO.  When creating analysis you have to choose between running it at TagoIO or External, which means that you will run on your machine. You can choose to run the analysis on an ...
    • Using the Device Emulator

      If you want a quick way to send data to your applications, but you don't have your hardware device available at the moment, or you simply need to send data to debug your applications, you can do that very easily using the Device Emulator. To access ...

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


        Future and past Webinars