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