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
  • Examples:
  • Advanced example #1:

Was this helpful?

Export as PDF
  1. Dashboards & Widgets
  2. HTML Canvas
  3. Code editor

JavaScript Tab

PreviousCSS TabNextCustom UI

Last updated 2 years ago

Was this helpful?

JavaScript is a scripting language that allows the user to interact with the elements of a web page, define logic for web content, and dynamically modify/update the contents of the web page.

Examples:

JavaScript code
Action

const Paragraph = document.querySelector("p");

Selects a text paragraph and stores an instance of it on the Paragraph variable

function updateName() { const name = prompt("Enter a new name"); para.textContent = Player 1: ${name}; }

Defines a function block that can be invoked by calling updateName()

Paragraph.addEventListener("click", updateName);

Attaches an event listener to the Paragraph instance such that when the paragraph is clicked, the updateName function gets executed

const para = document.getElementById("player");

Gets a reference to the element with ID "player" from the DOM

Advanced example #1:

Let's assume the following requirement:

  • Creating a paragraph element that displays the message "PLAYER 1: name", where name is a value set by the user upon clicking on the paragraph element.

This can be accomplished using the following HTML + CSS + JavaScript recipe:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      /* set the font family, size, and style */
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      letter-spacing: 1px;
      text-transform: uppercase;
      /* set the border, background, color, and box shadow */
      border: 2px solid rgba(0, 0, 200, 0.6);
      background: rgba(0, 0, 200, 0.6);
      color: rgba(255, 255, 255, 1);
      box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
      /* set the border radius and padding */
      border-radius: 10px;
      padding: 3px 10px;
      /* set the display to inline-block and cursor to pointer */
      display: inline-block;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- add an ID attribute to the <p> element -->
  <p id="player-name">Player 1: Chris</p>
  <script>
    // get a reference to the <p> element using its ID
    const para = document.getElementById("player-name");

    // add a click event listener to the <p> element
    para.addEventListener("click", updateName);

    function updateName() {
      // prompt the user to enter a new name
      const name = prompt("Enter a new name");

      // update the text content of the <p> element
      para.textContent = `Player 1: ${name}`;
    };
  </script>
</body>
</html>

The same can be reproduced on Ubidots by using the HTML Canvas Widget in the following way:

  • Use the following HTML code on the widget's HTML code editor tab:

<!-- add an ID attribute to the <p> element -->
<p id="player-name">Player 1: Chris</p>
  • Now, add the style to the paragraph on the widget's CSS tab:

p {
      /* set the font family, size, and style */
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      letter-spacing: 1px;
      text-transform: uppercase;
      /* set the border, background, color, and box shadow */
      border: 2px solid rgba(0, 0, 200, 0.6);
      background: rgba(0, 0, 200, 0.6);
      color: rgba(255, 255, 255, 1);
      box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
      /* set the border radius and padding */
      border-radius: 10px;
      padding: 3px 10px;
      /* set the display to inline-block and cursor to pointer */
      display: inline-block;
      cursor: pointer;
}
  • Lastly, add the following code to the widget's JavaScript tab:

// get a reference to the <p> element using its ID
const para = document.getElementById("player-name");

// add a click event listener to the <p> element
para.addEventListener("click", updateName);

function updateName() 
{
    // prompt the user to enter a new name
    const name = prompt("Enter a new name");

    // update the text content of the <p> element
    para.textContent = `Player 1: ${name}`;
};

The following is the result on a Ubidots Dashboard:

📊