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>
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.
Last modified 2mo ago