Links

Custom UI

Ubidots XML UI components can be used to describe the content of:
  • Custom UI widgets
  • (Coming soon) Create/edit drawers of native widgets when developing an Ubidots widget plugin.
In both cases, a custom interface is a collection of UI components described by the developer using the XML syntax specified in this document.
Here's a quick example.
Resulting Interface:
XML code:
<form>
<inputcombo
type="text"
id="first_name"
label="First name"
description=""
placeholder="Enter your first name"
/>
<inputcombo
type="text"
id="last_name"
label="Last name"
description=""
placeholder="Enter your last name"
/>
<inputcombo
type="text"
id="machine"
label="Machine ID"
description="This is a field description"
/>
<inputcombo
type="date"
id="login_date"
label="Maintenance date"
description="The date of the latest work you performed"
placeholder="Select date"
/>
<button type="success" click="make_request">Send</button>
</form>

Available UI Components

Here are the supported components to date:
XML Element
Example
paragraph
<paragraph type="normal">NORMAL</paragraph>
<paragraph type="bold">BOLD</paragraph>
<paragraph type="h1">H1</paragraph>
<paragraph type="h2">H2</paragraph>
<paragraph type="h3">H3</paragraph>
<paragraph type="h4">H4</paragraph>
inputcombo
<inputcombo
type="text"
id="first_name"
label="First name"
description=""
placeholder="Enter your first name"
/>
button
<button type="success" click="make_request">Send</button>
Each component is detailed in the following sections.