The Custom UI widget is a tool that allows you to graphically extend the way in which you can interact with Ubidots itself as well as with third-party services. It lets you put together a form widget that consists of your choice of attributes from among a list of options and, once the widget is ready, it can be used as a webhook to imbue other data with the information you input in the Custom UI — or even use it to redirect to another Ubidots dashboard or an external link.
Consider a case in which the data of a factory's work shifts have to be recorded.
You can easily do so by sending the data to a context field on a variable at Ubidots, as shown above.
Requirements
An active Ubidots account (Industrial and above).
Basic HTML knowledge.
Table of Contents
1. Create the Custom UI Widget
Head to the Data dropdown in the navigation bar on Ubidots, then "Dashboards", and select the dashboard you want to work in (or create a new one).
Tap the "+" at the upper right corner of the screen to create a new widget and look for the Custom UI widget in the drawer:
2. Configure the UI
The following is a table containing the XML elements currently supported by the widget with which the desired UI can be built:
Element | Attribute | Attribute options |
button | type |
|
paragraph | type |
|
input | type |
|
input | shape |
|
To get a good understanding of the XML commands, please head to our Dev Center.
Note: If any attribute goes unmentioned for a particular element, such as id or label for input, it means that the element does not have restriction, i.e, its behavior is just as a typical XML element.
Click the code editor option:
In the modal that will pop up, you'll have to build the required UI by using XML elements that, ultimately, get translated into React components.
As stated in the introduction for this technical guide, this example is based on the need to send a user's first name, last name, and login date to a variable's context, so three different fields were used.
Before saving the code, here are a few things that should be kept in mind prior to configuring the actions (the next step of the guide):
The id attribute for each input field must match the variable name that you want to send to Ubidots.
The value for the click attribute must be the action's label.
Paste the XML for the desired UI in the code editor, then click save.
3. Configure the Actions
Click the Action option shown below:
The following modal will pop up. There you'll have to configure these settings:
Label: Any name to identify the action triggered by the widget's button. This label should match the value of the button's click attribute (as mentioned earlier). This means that if your button's click attribute is set to "receive_data", then the actions' label should be also "receive_data".
On click: This option selects the action to be triggered upon clicking the button. For this particular example, the Trigger webhook is being used, however, choose the option that matches your requirements.
URL: This is the URL to which the HTTP request will be issued.
Headers: set the HTTP headers according to the requirements of the endpoint that you are requesting.
Payload*: Since this example is about sending data to Ubidots, the payload contains the variables that need to be sent, however, if you are using the GET method, no payload will be needed.
Payload field configuration: it's important to note that, since this payload is required to be filled with the values from the widget's input fields, the {{}} notation is needed to capture said field's data.
Also, the variables to be sent should have the same names as the input field id. That means that if you wish to send data from an input field whose ID is "temperature", then the corresponding key on the payload should also be "temperature", that way, when the button is pressed, the "temperature" in the input field value will be sent to the webhook's configured URL.
Finally, click the Accept button to save the current configuration.
4. Extra features
You can customize the appearance of your Custom UI Widget in the "appearance" tab of the settings by doing the following:
Naming your Custom UI Widget.
Setting the padding to create space around the element's content.
Setting a background color.
Selecting a background image.
Entering a custom style for your widget.
5. Feedback, suggestions, and related articles
Feel free to post questions or suggestions in our community portal, or contact us via support@ubidots.com.
Other users also found it helpful...