# 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>