The Custom UI widget is a tool that allows users to create web forms within Ubidots using XML format which Ubidots converts into web elements such as text fields, drop-downs, and toggle buttons, among others.
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 with a Custom UI as the one shown above.
Requirements
An active Ubidots account (Industrial and above).
Basic HTML knowledge.
1. Create the Custom UI Widget
In your Ubidots account, go to the dashboard you want to work in (or create a new one).
Click on the "+" button at the upper right corner of the screen to create a new widget and look for the Custom UI widget in the drawer:
2. Create the UI
There are three main components that can be used within the Custom UI Widget:
Input combo
Paragraph
Button
Custom UI element | Description | Properties |
Input combo |
Displays an input field depending on the type of property. |
|
Paragraph | Displays headings/paragraphs depending on the type of property. |
|
Button |
Displays a button whose color depends on the type of property. |
|
These elements can be used as shown in the following XML:
<form>
<paragraph type="h1">Send data form</paragraph>
<inputcombo
type="text"
id="variable_label"
label="Variable label"
description="Choose the variable to which send data"
placeholder="Enter the name of the variable"
/>
<inputcombo
type="number"
id="variable_value"
label="Variable value"
description="Set the value that you want to send"
placeholder="Enter the value that you want to send"
min="0"
max="100"
/>
<inputcombo
type="date"
id="start_date"
label="Date"
description="Set the date in which the measuremet was performed"
placeholder="Set the date"
/>
<inputcombo
type="number.buttons"
id="variable_value_button"
label="Variable value button using"
description="Set the value that you want to send using buttons"
placeholder="Enter the value that you want to send"
min="0"
max="100"
/>
<inputcombo
type="toggle"
id="enable_device"
label="Enable device"
description="Set the state of the device"
/>
<inputcombo
type="hour"
id="start_hour"
label="Start Time"
description="Set the hour at which the measurement was performed"
/>
<inputcombo
type='dropdown.list'
id='variable_from_list'
label="Select a variable"
description="Select a common variable from all devices"
placeholder='Choose an option'
>
<menu>
<item id='temperature'>Temperature</item>
<item id='humidity'>Humidity</item>
<item id='iluminance'>Iluminance</item>
<item id='magnetic_flux'>Magnetic flux</item>
</menu>
</inputcombo>
<inputcombo
type='dropdown.checkbox'
id='devices_from_list'
label="Select multiple options"
description="Select multiple devices to send data"
placeholder='Choose multiple options'
>
<menu>
<item id='dev_1'>device 1</item>
<item id='dev_2'>device 2</item>
<item id='dev_3'>device 3</item>
<item id='dev_4'>device 4</item>
</menu>
</inputcombo>
<button type="success" click="make_request">Send</button>
</form>
The previous XML is displayed as the following Custom UI widget:
2.1. Input combo type text
Displays a standard input text field.
2.2. Input combo type number and number.buttons
Displays a standard input that only accepts numbers.
Setting
minandmaxproperties will make the input field accept values in the rangemin <= input <= max.This property makes the input field buttons to increase/decrease the current count by the value set in
step.
2.3. Input combo type date
Displays a date input field in the format mm/dd/yy, HH:MM (12h format).
2.4. Input combo type hour
Displays a time input field in the format HH:MM (12h format).
2.5. Input combo type toggle
Displays a toggleable button.
2.6. Input combo type dropdown.list
Displays a drop-down menu that allows selecting a single option.
The following code snippet shows how to add elements to the drop-down:
<inputcombo
type='dropdown.list'
id='variable_from_list'
label="Select a variable"
description="Select a common variable from all devices"
placeholder='Choose an option'
>
<menu>
<item id='temperature'>Temperature</item>
<item id='humidity'>Humidity</item>
<item id='iluminance'>Iluminance</item>
<item id='magnetic_flux'>Magnetic flux</item>
</menu>
</inputcombo>
2.7. Input combo type dropdown.checkbox
Displays a drop-down menu that allows selecting multiple options. The way to add elements to the drop-down is exactly the same as for dropdown.list.
2.8. Paragraph
This element allows for the easy application of different text styles. Below are the details of each type of paragraph style available:
Paragraph type | Description |
normal | Displays standard text without any special formatting. |
bold | Displays text in bold style. |
h1, h2, h3, h4 | Displays the corresponding type of heading. |
2.9. Button
This element will display a button that, according to its type, will have a color meaning different status:
Button type | Description |
primary | Default blue button |
success | Green button |
warning | Orange button |
danger | Red button |
muted | Gray button |
Note: To get a good understanding of the Custom UI supported elements, please head to our Dev Center.
You can now proceed to create the UI, as you require, with the elements presented above. To do so, click the widget's code editor option:
As stated in this article's introduction, this example is based on a scenario in which we 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 your XML in the code editor, then click save.
3. Configure the Actions
Click the "actions" 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 also be "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 and suggestions
Feel free to post questions or suggestions in our community portal, or contact us via support@ubidots.com.