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> <paragraphtype="h1">Send data form</paragraph> <inputcombotype="text"id="variable_label"label="Variable label"description="Choose the variable to which send data"placeholder="Enter the name of the variable" /> <inputcombotype="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" /> <inputcombotype="date"id="start_date"label="Date"description="Set the date in which the measuremet was performed"placeholder="Set the date" /> <inputcombotype="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" /> <inputcombotype="toggle"id="enable_device"label="Enable device"description="Set the state of the device" /> <inputcombotype="hour"id="start_hour"label="Start Time"description="Set the hour at which the measurement was performed" /> <inputcombotype='dropdown.list'id='variable_from_list'label="Select a variable"description="Select a common variable from all devices"placeholder='Choose an option' > <menu> <itemid='temperature'>Temperature</item> <itemid='humidity'>Humidity</item> <itemid='iluminance'>Iluminance</item> <itemid='magnetic_flux'>Magnetic flux</item> </menu> </inputcombo> <inputcombotype='dropdown.checkbox'id='devices_from_list'label="Select multiple options"description="Select multiple devices to send data"placeholder='Choose multiple options' > <menu> <itemid='dev_1'>device 1</item> <itemid='dev_2'>device 2</item> <itemid='dev_3'>device 3</item> <itemid='dev_4'>device 4</item> </menu> </inputcombo> <buttontype="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: