Some users have asked through social media and our support channels about how you can show custom text strings inside widgets. In this tutorial, we will demonstrate how you can retrieve the variable's context inside the metric widget and alter it to show any text needed.

Getting Started:

For this tutorial we will use a powerful tool that Ubidots already supports, context data. This data lets you to store any non-numerical string type value in your Ubidots variable.
"Context" what exactly do we mean by this? Context is the best way to store custom data that is not necessarily a fixed value, i.e char strings. A context is an array of characters; for example. if you want to send your name and surname to Ubidots and later retrieve it, you would build a context like this: context = {"name" : "John", "surname" : "Smith"} . With this chat string, Ubidots will store a "name" with the value "John" and a "surname" with the value "Smith". 

If you want to know more about context and other features to store and move values, please refer to Ubidots API

Building a Request structure:

To send your context information you need to implement a POST request, below you find the specifications for this:

  • Endpoint : 
https://things.ubidots.com/api/v1.6/devices/{LABEL_DEVICE}/
  • Payload:
{"VARIABLE_LABEL" : {"value" : 1 , "context" : {"key" : "KEY-VALUE"}}}

For our example, we will create a device called "device-test" with a variable labeled as "test" that will store our context information. The variable's value will not matter for our example, but as Ubidots always asks for a value to be stored, once you make a POST request, we will send an arbitrary value of '30' as a float number to keep Ubidots happy. 

The POST request using curl will look as follows:

curl -X POST -H "Content-Type:application/json" -d '{"test":{"value":30, "context": {"name" : "my-device-name"}}}' "https://things.ubidots.com/api/v1.6/devices/device-test?token=TOKEN"

NOTE: Your data can be sent using curl or any device that supports HTTP requests.

The curl command above sends the payload specified previously with our context keys, in this case only one containing the device's name– "my-device-name." Once you've sent the request, you can create a variable with the context keys inside it:

Customizing your widget:

Now it is time to custom your metric widget.
First, create a metric widget related to the variable just created and select to display last value. If you do not know how to built Ubidots widgets, please refer to this article. Once created, your widget will look like the one below:

Now, to change the display we need to edit you widgets settings by coping and pasting the code below into the widget's Text Box. (If you do not know how to edit your settings, please refer to this article):

Context {{item_shared}}

{{context.name}}

To complete, save and reload the page.
Now, when you or your devices send values with context, your device's name will be displayed in the widget. :)

What about the code? What did I do?
 
I'm glad that you asked. Use the keyword 'context' to retrieve your variable context. You need to call it with the context property that you want to show, in this case 'name.' This is the unique context value that will be sent, but it would be any key context 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 to call any property from an object).

GOAL REACHED:

With the completed code in your widget, our device name is now reflected on your 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 vis social media at Facebook, Twitter, Hackster, or Ubidots in-app chat channel. 


Did this answer your question?