Skip to main content

Adding Image Selector Field on Forms

The Image Selector field type allows you to present an input where the user can select one or more images that correspond to predefined values.

Example: Select the Device​

Image Selector example showing two selectable images: Temperature and Geolocation

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

Widget options​

Common options for the Image Selector field:

  • Type
    • Image Select
  • Label for variable
    • Example: "Select the furniture" (this is the label shown for the form field)
  • Default value(s) comes from
    • Options such as "the variable (last value)"
  • Use values from
    • Static (configurable) or other value sources
  • Is it a required field?
    • Yes / No
  • Allow multiple selections
    • Yes / No

Notes:

  • Configure the values that each image represents in the widget options; those exact values are what will be stored when a user selects an image.
  • If you allow multiple selections, users can choose more than one image; otherwise only one image can be selected.
  • Use Values From:
    • Static: Define a label (header text), value (sent to the variable), URL (must be HTTPS), and description (shown below the image). These settings create each selectable image.
    • Dynamic: Provide a device variable that contains an array of objects. Each object should include metadata.description, metadata.url (HTTPS), and optionally metadata.value. The widget will use the object's value field if present; otherwise it uses the variable’s value.
  • In the configuration panel you can add or remove images using the + and – buttons.