Adding Image Selector field on Forms

Adding Image Selector field on Forms

The Image Selector field type allows you to put an entry where the user can select one or many images with given values.

Users will need to click on an image and the value you entered in the widget options will be stored in your data device.

Image field configuration

The most important configuration here that needs explanation is Use Values From and Allow Multiple Selections

Let's talk about Use Values From with Static value.

In this case you need to enter:

  • A label, where you define the header text for your image.
  • A value, where you define the value that will be sent to your variable if the image is selected by the user.
  • A url, where you define the URL of your image, it needs to be a https:// url.
  • A description, a description that shows up in the bottom of your image.

Here is an example:

You can click on the + and - buttons to add or remove a new image.

With this configuration, the user should see something like this:

If Allow Multiple Selections is set to yes, the user can select more than one image before clicking on the Send button.

Now for Use Values From with Dynamic value, the field will behave very differently in the background, but the user should see the same thing.

This option allows you to get all the values through a variable in your device's data storage. This means that all the data from that variable will be used as an item for the image field instead of the previous definition with Static Value.

Take a look in this data example:

{ variable: "device__image", value: "Temperature Sensor", metadata: { description: ""This sofa has wheels on it.", url: "https://3.imimg.com/data3/KJ/NV/MY-14192/office-sofa-on-wheels-250x250.jpg", value: "temperature_sensor" } }

With this data in the device's storage, the result should be exactly the same as the previously shown with Static Value.

Pay attention to the data parameters used:

  • Param value is the same as label
  • Param Metadata.description is the same as description
  • Param Metadata.url is the same as url
  • Param Metadata.value is the same as value. The widget will send the value field of the variable if this is not specified.

    • Related Articles

    • 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 ...

    • Image Widget

      The Image widget provides the ability to present custom images in your dashboard. You can use it to present the logo of your company or customer, or anything else that helps the user to better visualize your application. This widget works for both ...

    • Image Marker Widget

      The image marker widget allows you to add pins to different images. You can also manipulate the colors, values, and icons for each pin. This widget also accepts features like metadata and series, that can be set in your variable data. Creating your ...

    • 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 ...

    • Adding devices with connectors

      Connectors enables you to create a device with built-in behaviors that allow it to communicate with a Network very easily. When creating devices at TagoIO, it is important to know that there are different ways to allow them to send & receive data ...