Skip to main content
All CollectionsUser Guides
Create a Custom UI Widget
Create a Custom UI Widget

Learn about the characteristics of the Custom UI widget and how to use it.

Sergio M avatar
Written by Sergio M
Updated over a week ago


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


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.

  • type: The type of input field.

  • id: Unique identifier to access this field.

  • label: The text label that will be visible next to the input.

  • description: Small text description below the label, used to hint the user about the input.

  • placeholder: Placeholder text shown inside the input field.

Paragraph

Displays headings/paragraphs depending on the type of property.

  • type: Paragraph type.

Button

Displays a button whose color depends on the type of property.

  • type: Defines the button's color.

  • click: A user-defined label that serves as a unique ID to link the button to an action.

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 min and max properties will make the input field accept values in the range min <= 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.

Did this answer your question?