Skip to main content
All CollectionsUser Guides
Using context to display text in Ubidots widgets
Using context to display text in Ubidots widgets

Learn how to store metadata in Ubidots variables.

David Sepúlveda avatar
Written by David Sepúlveda
Updated over 3 months ago

Numerical values are not the only data type supported by Ubidots; you can also store string data type inside of what we call context. What exactly do we mean by context? Simply put, is a key-value object that allows you to store not only numerical but also string values, for example, if you want to send your name and last name to Ubidots and later retrieve them, you would build a context as follows:  context = {"name" : "John", "last-name" : "Smith"} . With this string, Ubidots will store a "name" key with the value "John" and a "last name" key with the value "Smith".

Requirements

1. Sending context data to an Ubidots variable

To send your context information using an HTTP request you need to implement a POST method . Below you find the specification to do so:

  • Endpoint :

https://industrial.api.ubidots.com/api/v1.6/devices/{LABEL_DEVICE}/
  • Payload:

{"VARIABLE_LABEL" : {"value" : 30 , "context" : {"key" : "KEY-VALUE"}}}

For the case herein, we will create a device called "my-device-test" with a variable labeled as "test" that will store our context information. We will send an arbitrary value as it is mandatory, but not important for the article's purpose.

The POST request using cURL will look as follows:

curl -X POST https://industrial.api.ubidots.com/api/v1.6/devices/device-test \ 
-H "X-Auth-Token: PUT_YOUR_TOKEN_HERE" \
-H "Content-Type: application/json" \
-d '{"test": {"value" : 30, "context":{"name":"my-new-device"}}}'

NOTE: Your data can be sent using HTTP requests or any of our supported protocols. To know more about it, please refer to Ubidots API documentation.

The cURL command above sends the specified payload with our context keys, in this case only one containing the device's name– "my-device-name."

2. Display data context using metric widget

Now it is time to custom your metric widget. First, select the appropriate dashboard work on and follow the below steps to create a metric widget:

Step 1: Click on the top-right "+" button.
Step 2: Select the Metric widget option.
Step 3: Add the variable that contains the context data you want to display.
Step 4: Enable the option “Use the HTML editor”.
Step 5: Open the editor:
– In the HTML editor, add {{context.name}} ( If you do not know how to edit your settings, please refer to this article)

– To complete, just save the widget and your variable’s context will be displayed in the widget.

What about the code? What did I do?
We’re glad you asked. We used the keyword 'context' to retrieve your variable context. You need to call it with the context key that you want to display, in this case 'name.' This is the unique context value that will be sent, but it could be any context key that you send inside your request. So finally, simply put, use {{context.name}} to call the name stored inside the context of the variable (the dot operator, '.', lets you call any key from a context object).

3. Display data context using tables widget

Similar to section 2, select the appropriate dashboard to work on and follow the below steps to create a table widget:

Step 1: Click on the top-right "+" button.
Step 2: Select device or variables table widget.
Step 3: Add as a row a variable or device that contains the context data you want to display.
Step 4: Add a context column.
Step 5: Set all the available fields:
– Column Name
– Enter the context key
– Select the Color behavior

Moving to the Appearance section:
Step 6: Set all the available fields:
Name of the Table.
– Set the Decimal places.
– Set Date format.
– Select Border and Border width.
– Select variables per page.
– If any, enter a Custom Style for your widget.

IMPORTANT NOTE: By clicking in any of the columns you can sort the values. Alphabetically for words, either ascending (A to Z) or descending (Z to A), and numbers from smallest to greatest and viceversa.

GOAL REACHED:

With the completed code in your widget, our device name is now reflected on the dashboard and works great! Now it is your turn to give it a try.

Do not forget to leave us your comments in our community forums or you can connect with us via social media on Facebook, Twitter, Hackster,  or Ubidots in-app chat channel.

Did this answer your question?