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

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/qp24Kz1iRix0JHHFtUhZx5KQ6V5yxCvcL5VSMCcRK5U/imageselect-nXE.jpg

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

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:

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/6vEFX1VIZhHE1m6rzp9Wt-wcyg0ev4DKXXWmI9zaAIo/Screen Shot 2018-07-23 at 18.07.30-uNs.png

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

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

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/4-8qiOrEz1XQ77Wo-FhwYUX4NGiC7ow5sSEuiq6zA2g/Screen Shot 2018-07-24 at 11.19.35-f9A.png

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

Here's an example:

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/PhIkNjsdxhnfMd4yHpChk9yP9tDNDs7FQK6lyAOupVA/Screen Shot 2018-07-23 at 17.59.06-nEA.png

device__image from bucket Example and device Example will now be used to fill the items for the image field. 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 bucket Example, 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.