Ctrlk
Help CenterAPI ReferenceData APICommunity
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Development

Pages are developed, maintained, and deployed by Ubidots users to create fully custom visualizations that meet requirements not addressed natively by the platform.

A Page uses a specific set of files. These files define the Page settings, such as references to local files or CDN-hosted CSS and JavaScript (JS) libraries. They also define the Page logic and overall functionality. The file structure is shown below:

├── manifest.toml
├── script.js
├── body.html
├── style.css
├── static
│   ├── some_files_or_folders

This file structure is required. Include all listed files so the Page works correctly and can be deployed.

Pages are subject to the same CSP restrictions as HTML Canvas widgets: inline JavaScript in body.html will not be executed — all logic must live in script.js.

Allowed file extensions in the static folder

.csv, .css, .gif, .html, .ini, .jpeg, .jpg, .js, .json, .jsx, .log, .md, .mjs, .png, .rst, .svg, .ts, .tsv, .tsx, .toml, .txt, .webp, .xml, .yaml, .yml

manifest.toml

The manifest file defines the Page settings and references to local or external CSS and JS resources. It includes:

  • Name of the page.

  • Keywords.

  • Description.

  • Path to local files.

  • Local and third-party JS libraries.

  • Local and third-party CSS stylesheets.

A typical Page manifest includes the following keys and values.

Key
Type
Description

name

String

Name of the page

keywords

Comma-separated strings

Added in a <meta> tag within the HTML document's <head>.

description

String

Added to the HTML document's <head> within a <meta> tag.

static_paths

List of strings

Paths to folders containing local files.

js_libraries

List of sets

References local JS files. These files are included with a <script> tag in the HTML document's <head>.

js_thirdparty_libraries

List of sets

References CDN-based JS libraries. These files are included with a <script> tag in the HTML document's <head>.

css_libraries

List of sets

References local CSS stylesheets. These files are included with a <link rel="stylesheet"> tag in the HTML document's <head>.

css_thirdparty_libraries

List of sets

References CDN-based CSS stylesheets. These files are included with a <link rel="stylesheet"> tag in the HTML document's <head>.

link_libraries

List of sets

References local resources. These files are included with a <link> tag in the HTML document's <head>.

link_thirdparty_libraries

List of sets

References external resources. These files are included with a <link> tag in the HTML document's <head>.

With that in mind, a manifest file looks like this:

The manifest.toml file must start with the [page] section header.

The example below shows how Ubidots interprets the Page name, keywords, and description, and adds them to the Page HTML document's <head> automatically.

Read the following section to learn about how Ubidots interprets the libraries keys.

Libraries syntax

This applies to the List of sets keys. These keys contain lists where each element follows one of the forms below:

Key
Form
Description

– js_libraries

– js_thirdparty_libraries

[ATTRIBUTES] can be any valid attribute for HTML's <script> tag.

– css_libraries

– css_thirdparty_libraries

– link_libraries

– link_thirdparty_libraries

[ATTRIBUTES] can be any valid attribute for HTML's <link> tag.

Ubidots interprets these library keys and adds them to the Page HTML document's <head> as follows:

script.js

This file contains the Page JS logic. It can:

body.html

This file defines the HTML body of the page. Include only the contents of <body>. Ubidots then inserts that content into the actual Page body. For example:

Your code:

Loaded in the page:

Do not include <head> in body.html. Ubidots creates it from manifest.toml.

style.css

This is the main stylesheet for your page. You can also import more styles from local files in the static_paths folder or from external resources.

static folder

In this folder, you can upload additional CSS or JS files, nested folders, or other file types. Use it to include proprietary libraries or resources such as fonts, icons, and images needed to render the page. You can use these files in two ways within the Page:

  1. Reference them in the manifest.toml file. Ubidots then imports them as described in the Libraries syntax section.

  2. Access them through the page's public staticUrl. See below.

To access files in the /static folder — or another folder referenced in manifest.toml — from script.js, use:

Here, <path> is the path referenced in manifest.toml, such as static. Then <fileName> and <extension> point to the specific file inside that folder.

Allowed file extensions

.csv, .css, .gif, .html, .ini, .jpeg, .jpg, .js, .json, .jsx, .log, .md, .mjs, .png, .rst, .svg, .ts, .tsv, .tsx, .toml, .txt, .webp, .xml, .yaml, .yml

PreviousGetting startedNextAPI

Last updated

Was this helpful?