Custom UI
This article goes through the Custom UI widget, its features and how to use it.
Last updated
This article goes through the Custom UI widget, its features and how to use it.
Last updated
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:
There are three main components that can be used within the Custom UI widget:
Paragraph
Input combo
Button
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: