Ubidots Developer Guides
Help CenterAPI ReferenceData APICommunity
  • Welcome to our Dev Guides
  • ⚡️ Getting Started
    • What is Ubidots?
    • Devices, Variables, and Dots
    • Technical FAQs
    • Business FAQs
  • 🧩Integration Guides
    • Industrial IoT
      • Advantech
      • Amplified Engineering
      • AWS
      • Azimut
      • Balena
      • Bivocom
      • CESVA
      • Controllino
      • Digital Communications Technologies (DCT)
      • Everactive
      • Golioth
      • Kepware
      • Kunbus
      • Monnit
      • MultiTech
      • NCD.io
      • Node-RED
      • Omicron IoT
      • Red Lion
      • Robustel
      • Senquip
      • Sielco
      • Siemens
      • Strega
      • vNode
      • WAGO
      • Weintek
      • YuDash
    • Cellular
      • Blues Wireless
      • Digi International
      • Hologram
      • Monogoto
      • Particle
      • Quectel
      • Soracom
    • LoRaWAN
      • AonChip
      • Chirpstack
      • Decentlab
      • Helium
      • ioThings
      • LORIOT
      • Milesight
      • MOKOSmart
      • RAKwireless
      • Sagemcom
      • Seeed Studio
      • Senet
      • The Things Industries
        • The Things Stack
        • The Things Network
    • Sigfox
      • Digital Matter
      • McThings
      • Sigfox
      • Suntech
      • Thinxtra
      • UnaBiz
    • Satellite
      • Swarm
    • Dev Kits
      • Adafruit
      • Advantech
      • AloriumTech
      • Arduino
      • Blues Wireless
      • DFRobot
      • Dragino
      • Electric Imp
      • Espressif Systems
      • McThings
      • Microchip Technology
      • Onion
      • Particle
      • Pycom
      • RAKwireless
      • Raspberry Pi
      • Seeed Studio
      • Sodaq
      • STMicroelectronics
      • Texas Instruments
      • Thinxtra
      • Verse Technology
    • Weather
      • Weather Plugins
      • Ambient Weather
    • Tools
      • Gambit Communications
      • PubNub
  • 📊Dashboards & Widgets
    • HTML Canvas
      • 3rd party packages
      • Preload Dashboard data
      • Built-in library
        • Properties
        • Methods
        • Listening events
        • API
      • Examples
        • Basics
        • Create an LCD screen with the HTML Canvas
        • Interacting with dashboard data
        • Change header's custom style
        • Adding real time using Socket.IO
        • Delete Variable data from a Device
        • Delete Variable data from Groups or Types of Devices
        • Navigation through Dashboard
        • Using a React library
      • Code editor
        • HTML Tab
        • CSS Tab
        • JavaScript Tab
    • Custom UI
      • Paragraph
      • Input combo
        • Text
        • Numeric
        • Numeric with buttons
        • Date
        • Time
        • Toggle
        • Dropdown
        • Multiple selection dropdown
      • Button
    • Custom Style
      • Dashboards
      • Widgets
    • Line chart
    • Pages
      • Getting started
      • Development
      • API
        • Page creation
        • Publish
  • 🤖UbiFunctions
    • Getting Started
      • Creating an UbiFunction
      • Coding an UbiFunction
      • Testing an UbiFunction
      • Authentication
      • Execution Time
      • Logs
    • Runtimes
      • Python
      • NodeJS
      • Custom Runtimes
    • Invocation
      • Time-based Trigger
      • HTTPS
      • MQTT Publish
      • Ubidots Event
    • Advanced
      • Account Token
      • Execution time
      • Raw Functions
      • CORS Policy
      • Async Execution
      • DaaS (Decoder as a Service)
      • Developing and Managing UbiFunctions with Ubidots CLI
    • Examples
    • Specs and Limits
    • Storage
      • File Storage API
      • Mutiple files
  • 🧩Plugins
    • What is a plugin?
    • Public vs. Private
    • Public plugins
      • Cron
      • Webhook
    • Private Plugins
      • Cron
      • Webhook
      • Widget
      • Device
    • Plugins development
      • Getting started
      • Cron
      • Webhook
      • Widget
      • Device
      • view.xml
      • view_widget.xml
    • Plugins deployment
      • Cron and Webhook
      • Widget
      • Device
    • Using the plugins
      • Cron and Webhook
      • Widget
      • Device
  • 📈SYNTHETIC VARIABLES
    • Getting started
      • Creating synthetic variables
      • Synthetic Variables' editor
    • Expressions
      • Mathematical
      • Date range
      • Rolling
      • Special functions
    • Specs and limits
    • Examples
      • Mathematical
      • Date range
      • Rolling
      • Special functions
  • ⌨️Developer tools
    • Javascript SDK
      • Overview
      • Getting started
      • Ubidots class
        • Get methods
        • Filter methods
        • Ubidots objects
          • Entity object
          • Paginator
      • Examples
    • CLI
      • Overview
      • Installing
      • Usage
      • SDK for UbiFunctions
  • 🏗️Apps
    • App builder
      • Custom sidebar
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Dashboards & Widgets

Custom UI

This article goes through the Custom UI widget, its features and how to use it.

PreviousJavaScript TabNextParagraph

Last updated 1 year ago

Was this helpful?

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:

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

  • 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:

📊