Skip to main content

Metadata

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.

JSON example​

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

Using custom metadata fields​

You can define your own metadata fields and use them in your Analysis or Application. Some metadata fields trigger specific widget behaviors or change how the widget displays the data.

info

Metadata has priority over customizations set in the widget edit screen. Some widgets provide an option to change this behavior.

For example, this article uses the color metadata field in the following JSON payload:

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

Image 1

Available Metadata Fields​

FieldDescriptionWidgetbackground_colorChanges the widget background color. It accepts CSS color keywords or HSL, RGB, and HEX color codes.Angular, Card, Dial, Grain Bin, Image, Solid, Vu Meterbutton_colorSets a color for the button. It accepts CSS color keywords or HSL, RGB, and HEX color codes.Push Button, Step Buttonchart_colorChanges the chart color. It accepts CSS color keywords or HSL, RGB, and HEX color codes.CardcolorSets 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 Meterdropdown_option_hiddenDynamically hides the option from dropdown fields. Accept true or falseDynamic Table, Static Table, Device List, User List, Input FormembedSets an embedded URL for the variable displayCompose, Image Markerend_dateSpecifies 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 ColumniconSpecifies an icon for the variable data. It accepts the TagoIO icon's name, and an SVG file URL.Compose, Icon, Image Marker, Mapimg_pinSets an image for the infobox. It only accepts image file URLs.Image Marker, MaplabelDisplays a label instead of the variable valueCompose, Dynamic Table, Image Marker, Map, Static TablelayerSets the specific layer id that this data is related toImage Markerlimit_superiorSpecifies the end of a scale range. It only accepts numerical values.Angular, Dial, Cylinder, Grain Bin, Heat Map, Solid, Vu Meterlimit_inferiorSpecifies the start of a scale range. It only accepts numerical values.Angular, Dial, Cylinder, Grain Bin, Heat Map, Solid, Vu Meterpoint_colorSets 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 ColumnradiusSets 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 Columnstart_dateSpecifies 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 Columntext_colorSets 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 MeterurlShows an external URLCompose, Dynamic Table, Image Marker, Map, Static Tableurl_labelAdds a custom label instead of showing the external URL linkCompose, Image MarkerxSets the x coordinate. It only accepts numerical values from 0 to 1.Compose, Image Marker, Heat MapySets the y coordinate. It only accepts numerical values from 0 to 1.Compose, Image Marker, Heat Map

Form Field Metadata​

Some widgets such as Input Form, Dynamic Table, and others allow users to edit variable data through form fields. The following metadata can be used for custom behavior in these form fields:

FieldDescriptionForm field typelabelDisplays a label instead of the variable valueDropdown, Dropdown Multiple, Filtered Variablesend_dateSpecifies the end of a date range. It accepts the date and time in the ISO 8601 format.Calendarstart_dateSpecifies the start of a date range. It accepts the date and time in the ISO 8601 format.CalendartypeChanges the box validation color. Accepts: "success", "danger", "error", "danger-light", "error-light", "info", "warning" and "dark".Validation