The form input is a powerful widget among the others that Tago offers. It allows you to build powerful forms to collect inputs from users who are interacting with their application on the dashboard.

For this widget, select the variables that will hold the values sent through the form, each one of them will have its own field in the form so you can set a value. Every time you submit the form widget, the values set in each field will be created in the API using the variables of each field. They will also be grouped together through a serie number, so you can use them grouped in maps, dynamic tables, charts, etc.

There are a variety of field types that you can use:

Checkbox

A traditional checkbox will appear and the value will be set as true (checked) or false (not checked).

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/bHf5-AQdRUNb0ccBJpbm4PVbLl7HUo3ypgi6H9dBZTQ/CHECKBOX-qNk.jpg
Radio

A traditional radio input will appear. Once selected you will be able to define its options with their labels and values. The value of the field will be the one of the selected option.

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/9yzYaNW6JBwOVZeSRAkFQiUqKy__7s894mtlc03QwCA/radio-lg4.jpg
Text

A typical text input will appear and the value will be anything that was typed into it.

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/GwjQEbp6F4B626pH9c_T_CZLot5v826Fo24O-btHgKU/text-KQg.jpg
Password 

A typical password input will appear and the value will not be shown, asterisks will be shown instead.

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/gO_xUCz7_tsFj0DNMQFuXYCQ99HyJEuwq5fvrQvdVT8/password-1TY.jpg
Dropdown and Dynamic Dropdown

It displays a dropdown menu with options that you define. The value of the field will be the one of the selected options. It's possible to define a Dropdown to behave as Dynamic Dropdown. In this case, the dropdown will fill up with data coming from a variable, allowing a more dynamic value depending on your application.

Learn how to create Dynamic Dropdown by clicking here.

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/8p8q1SJixM3Xns45K45IOaEofXWuLW0wUk87qc_z01k/dropdown-cb0.jpg
Multiple Dropdown

It displays a dropdown menu with options that you define. With this type of input, the user can select multiple items, and when they submit the form, one data will be added for each value that was selected.

Example of a country selection using multiple dropdown
 

The options for the dropdown can come from static values or from a variable from a device.

Hidden

Unlike the others, this field type doesn’t display anything on the form. It will be there as an invisible field and you won’t be able to change its value unless you edit this widget.

Address

It will display a text field integrated with Google Maps to look for an address. The value for this field will be the complete address selected and it will also have the location coordinates within it.

File Upload

It will display an option to upload files to TagoIO.
Every file that is uploaded using this widget will be stored in the files section under the folder buclet/your_bucket_id/ by default.

You can customize and create multiple folders after that directory.
ex:

If you want to save your files in a folder called images, and a subfolder called icons, the path will be.

buckets/your_bucket_id/images/icons

You can also choose the number of files that are allowed to be uploaded at the same time.


Device

It will display a dropdown menu in which options will be your devices. The value of the field will be the id of the selected device.

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/Q3ONeFJgBP0sxDt906jsDK4FrYOSzEHd1bZIeSk9cGg/device-riI.jpg
Validation

This field is the only one that doesn’t represent a value to be sent with the form. The variable set to this field type expect to receive data (text) to show as a message above the form. Besides the text, you can also define the type of message that will appear. There are four types: warning, info, danger and success. You do this by sending a property type in the metadata [2] object of your datan.

Image

Whenever you need to choose a value by using images instead of entering text, the Image Field is the best you can get in form widgets. By entering image URL’s into the configuration, a field will be filled with these images and you will be able to select one or many of them. You can get more instructions on how to create the image fields by clicking here.

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/AZ9PVC6j8ndte8-Ubu673avDYmflHS2S7XuoIzqftnA/imageselect-2vQ.jpg
Calendar

In past Calendar was a widget. We think it can be better used as a form field, so here it is. It allows the user to enter a date or a date range as a value through a calendar popup. When receiving the user answer in your bucket, you will able to get it in the value parameter and in the metadata parameter. The last one will be in date string format as start_date and end_date. Choose the date range which you want to disable the alerts

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/4Fr8SHd9auNf17rvafZSm_MKz7jU7W0hmAUkO5kLOpw/calendar-APA.jpg


Notes

[2]If you don’t know about the metadata object, read our API docs

Advanced options

Under parameter configuration you will find some specific options:

Display a “Clear” button to reset fields: this option makes a “Reset” button in the end of the form. When clicked, all fields will return to its default values.

Confirm before submit: this option will make a confirmation window appear everytime you try to submit the form.

Run Analysis: You can choose an analysis to run when thr submit button is clicked. The data still goes to the bucket, and all new data from the form is sent to the analysis in the scope parameter.

Display a map to visualize address: this option will add a map at the end of the form, and this map will display the last address submitted from the address field.

Control input

Control input allows you to create a single widget to input multiple variables, and change only one individually. It has less options than Form Input, but is more easy to set.

You just select the variables you want to change, and after that, you select their Type and and Label. It’s possible to select between two types:

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/YtsX9kjrwg5WEdqP9I1plwmpZnLdXTFAX8ZKciwuZHU/widget_controlinput--Zs.png

Switch (true/false) The input will be a switch type. A simple button that changes the value of the variable to true or to false.

Input (value) The input value allows you to enter with a value for the variable.

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/zp0TZxPULEMBpCpzfGQdLVf_ZDhtKJIrbVGF3wKL5Z0/widget_controlinput_example-NA4.png