Metadata is one of the most important concepts when creating dashboards and widgets . Metadata is a piece of information that you can store in the variable payload.  

With metadata, it is possible to dynamically change the behavior of the widget and how it displays the variable data. For example, it can change a  map  pin color or place a  heat map  bubble in another position, and more.

      {
      "variable": "current",
      "value": 5.3,
      "unit": "A",
      "metadata": {
      "color": "red",
          "my_application_id": "378392922",
      }
      }
   

In metadata, you can build your own fields, so you can use them in your  Analysis  or Application. Also, some of these fields produce a different behavior displaying this data in the widget.

Metadata always has priority against customizing set by the widget edit screen. However, some widgets have an option so you can change that.

For example, we will use the  color  and  icon  metadata as the following JSON payload:

      {
      "variable": "temperature",
      "value": 71,
      "metadata": {
      "color": "red",
          "icon": "car"
      }
      }
   

Now you can create an  Icon Widget , associate the variable  temperature  in the  Data from the field , and it will automatically produce a red text with a car icon.

You can use your own icon, placing the SVG file URL in the icon field metadata. For your SVG to be displayed correctly, make sure that it has the property " viewBox " before using it.

Widget Metadata Field List

This is the list of metadata fields that are used in TagoIO's widgets. You can use it in your applications, and customize it as you prefer.

Field	Description	Widget
background_color	Changes the widget background color.  It accepts CSS color keywords or HSL, RGB, and HEX color codes.	Angular, Card, Cylinder, Dial, Grain Bin, Image, Solid, Vu Meter
button_color	Sets a color for the button.  It accepts CSS color keywords or HSL, RGB, and HEX color codes.	Push Button, Step Button
chart_color	Changes the chart color.  It accepts CSS color keywords or HSL, RGB, and HEX color codes.	Card
color	Sets a color for this variable data. It accepts CSS color keywords or HSL, RGB, and HEX color codes.	Angular, Area Chart, Card, Cylinder, Dial, Dynamic Table, Grain Bin, Horizontal Bar, Icon, Image Marker, Keypad, Line Chart, Map, Multiple Charts, Pie, Semi Donut, Semi Pie, Solid, Static Table, Step Button, Vertical Column, Vu Meter
dropdown_option_hidden	Dynamically hides the option from dropdown fields. Accept true or false	Dynamic Table, Static Table, Device List, User List, Input Form.
embed	Sets an embedded URL for the variable display.	Compose, Image Marker
end_date	Specifies the end of a date range. It accepts the date and time in the ISO 8601 format.	Area Chart, Horizontal Bar, Line Chart, Multiple Charts, Vertical Column
icon	Specifies an icon for the variable data. It accepts the TagoIO icon's name, and an SVG file URL.	Compose, Icon, Image Marker, Map
img_pin	Sets an image for the infobox. It only accepts image file URLs.	Image Marker, Map
label	Displays a label instead of the variable value.	Compose, Dynamic Table, Image Marker, Map, Static Table
layer	Sets the specific layer id that this data is related to.	Image Marker
limit_superior	Specifies the end of a scale range. It only accepts numerical values.	Angular, Dial, Cylinder, Grain Bin, Heat Map, Solid, Vu Meter
limit_inferior	Specifies the start of a scale range. It only accepts numerical values.	Angular, Dial, Cylinder, Grain Bin, Heat Map, Solid, Vu Meter
point_color	Sets a color for the chart point (can be replaced by the color field). It accepts CSS color keywords or HSL, RGB, and HEX color codes.	Area Chart, Horizontal Bar, Line Chart, Multiple Charts, Vertical Column
radius	Sets a point radius for charts. It only accepts numerical values, and the default value is 4.	Area Chart, Heat Map, Horizontal Bar, Line Chart, Multiple Charts, Vertical Column
start_date	Specifies the start of a date range. It accepts the date and time in the ISO 8601 format.	Area Chart, Horizontal Bar, Line Chart, Multiple Charts, Vertical Column
text_color	Sets a color for the widget text.  It accepts CSS color keywords or HSL, RGB, and HEX color codes.	Angular, Cylinder, Dial, Grain Bin, Push Button, Solid, Vu Meter
url	Shows an external URL.	Compose, Dynamic Table, Image Marker, Map, Static Table
url_label	Adds a custom label instead of showing the external URL link.	Compose, Image Marker
x	Sets the x coordinate. It only accepts numerical values from 0 to 1.	Compose, Image Marker, Heat Map
y	Sets the y coordinate. It only accepts numerical values from 0 to 1.	Compose, Image Marker, Heat Map

Form Fields Metadata List

Some widgets, such as Input Form , Dynamic Table , and more, let the user edit variable data value through  Form Fields . Some of them also use metadata for custom, and they are listed below.

Metadata field	Description	Form field type
label	Displays a label instead of the variable value.	Dropdown, Dropdown Multiple, Filtered Variables
end_date	Specifies the end of a date range. It accepts the date and time in the ISO 8601 format.	Calendar
start_date	Specifies the start of a date range. It accepts the date and time in the ISO 8601 format.	Calendar
type	Changes the box validation color. It accepts the following values: "success", "danger", "error", "danger-light", "error-light", "info", "warning" and "dark"	Validation