# Custom UI

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:

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FjXYzMFrxJRS364DIgTe9%2Fimage.png?alt=media&#x26;token=f30712c0-c6e5-4083-8bfe-678ab824bd57" alt=""><figcaption></figcaption></figure>

**The following is the XML code that maps the UI displayed above:**

```xml
<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.      | <ul><li>type: the type of input field</li><li>id: unique identifier to access this field</li><li>label: the text label that will be visible next to the input</li><li>description: small text description below the label, used to hint the user about the input</li><li>placeholder: placeholder text shown inside the input field</li></ul> |
| Paragraph         | Displays headings/paragraphs depending on the type of property. | <ul><li>type: paragraph type</li></ul>                                                                                                                                                                                                                                                                                                        |
| Button            | Displays a button whose color depends on the type of property.  | <ul><li>type: defines the button color</li><li>click: A user-defined label that serves as a unique ID to link the button to an action.</li></ul>                                                                                                                                                                                              |

​The following screenshot depicts each part composing the UI displayed at the beginning of this section:

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FKIw5T5onzPjFPaGRtafR%2Fimage.png?alt=media&#x26;token=0385fd0a-c9ed-4bd2-b055-359a8b461e03" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dev.ubidots.com/dashboards-and-widgets/custom-ui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.