Links

Custom UI

This article goes through the Custom UI widget, its features and how to use it.
Custom UI is a Ubidots Widget that basically maps XML-like tags to web form elements, which the user can implement to create interactive web forms featuring text fields, drop-down menus, toggle buttons, among others.
Here's a quick example displaying a simple UI created with the Custom UI widget:
The following is the XML code that maps the UI displayed above:
<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>

Available UI Components

There are three main components that can be used within the Custom UI widget:
  • Paragraph
  • Input combo
  • 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 color
  • click: A user-defined label that serves as a unique ID to link the button to an action.
​The following screenshot depicts each part composing the UI displayed at the beginning of this section: