Development
Pages are developed, maintained and deployed by Ubidots users in order to create completely custom visualization that meet requirements otherwise not addressed natively by the platform.
A Page is structured around a specific set of files. These files not only determine the Page settings, for example, references to local or external CDN-exposed CSS and JavaScript (JS) libraries, but also define its logic and overall functionality. The file structure for a Page is outlined below:
Adhering to this file structure and including all the mentioned files is mandatory for the Page to function correctly and be able to be deployed.
manifest.toml
The manifest file defines the Page's settings and references to local or external CSS and JS resources, that is, it outlines:
Name of the page.
Keywords.
Description.
Path to local files.
Local and third party JS libraries.
Local and third party CCS stylesheets.
The typical manifest file of a Page is composed by the below keys and values.
With that in mind, a manifest file looks like this:
The manifest.toml file most start with the [[page]]
section header.
The below shows how Ubidots interprets the Page's name, keywords and description, and adds it to the Page's 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" type keys. These keys hold list values, where each element has either of the below forms:
The way Ubidots interprets these libraries keys and adds it to the Page's HTML document's <head>
is as follows:
script.js
This file holds the JS logic of the Page. It can:
Use the
js_libraries
andjs_thirdparty_libraries
specified in themanifest.toml
file.It has access to Ubidots built-in JS library.
body.html
This is the HTML body of the page. You should only include the contents of the <body>
. Ubidots will then put all of it within the actual Page's body. For example:
Your code:
Loaded in the page:
Your body.html file should not include the <head> as Ubidots creates it using the manifest.toml file.
style.css
This the main stylesheet of your page, although you can import more either from local files located in the "static_path" folder, or from external resources.
static folder
In this folder, you can upload additional CSS or JS files, or even more folders. This serves as a place to include proprietary libraries or resources such as fonts, icon, etc.
These files can be used in the Page by being referenced in the manifest.toml
file, in which case Ubidots will import them appropriately as described in the Libraries syntax section.
Last updated