Metadata

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.

      {
      "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

    • Related Articles

    • Gauge - Data Range & Format

      Data Range & Format is the place where you can define the format and also the range of the data inside the gauge. Range Limits In the Range limits section you can set the minimum and maximum value displayed in the gauge. There are two different types ...
    • Data Records

      Data Record is related to the variables that are stored and fed by the devices. Each register is composed of a variable and all metadata associated with it. The data record limit will define the maximum storage capacity for the selected Profile at ...
    • Sending Data

      A device can send data to TagoIO by using the POST method. POST https://api.tago.io/data KEY TYPE REQUIRED variable string [max 100 characters] yes unit string [max 25 characters] no value string/number/boolean [max 6kB] no time string no group ...
    • Card Widget

      Use Card to display the last value of a variable, its unit, and a mini-chart. Card accepts links so that when users click on it, it may redirect them to another website, dashboard, or tab.  This widget also accepts features like metadata, that can be ...
    • Images and Links in the map's pins

      Developers can add an image and an url link to each pin on the map. To add images and URL to your pins, head over to Advanced Options by clicking in the options menu of the widget, and then in the Edit option. To set the image of the pin, set the ...