As the heart of your application, the dashboard page has to be as flexible as possible to accommodate varying content needs. Widgets displaying all sorts of data will always be the bread and butter of any Ubidots application, but oftentimes other types of content are critical to the operation and need a place of easy access, as is the case of the dashboard page.
That's where Dashboard Pages comes in: it gives you a way of tailoring your Ubidots experience even further by expanding the type of content that's displayed in a place as prominent as the dashboard.
Requirements
An Ubidots account with an Enterprise plan.
1. What Are Dashboard Pages
Dashboard Pages are a way of further customizing your Ubidots applications by defining the type of content that's displayed on any given dashboard on a granular level. While a default Ubidots dashboard can only be used to display widgets and their corresponding data, a Dashboard Page will display any content that you and your operation need.
By using a custom dashboard page, you can display two types of content:
Custom built pages. Similar to an HTML Canvas widget, this feature allows you to expose lightweight, custom, purpose-built UI's on Ubidots dashboards or even publicly. The key difference with respect to an HTML canvas is that a page loads the custom code by taking the whole width and height of the dashboard from where it's being loaded, instead of being limited to a widget container.
Embedded existing pages. This could be anything, from a video that explains how to use the platform, all the way to a third-party application that's important to your operation.
2. Creating a Custom Dashboard
Creating custom dashboards, whether by embedding already-existing URLs or custom-built pages, requires only a few steps:
While in a dashboard, click on the hamburger button located in the upper left corner of the screen. On the pane that opens up, either create a new dashboard or edit an existing one.
Scroll down in the settings menu until you find the "dashboard type" option. Select the "custom" option in the drop-down menu that's next to this option.
Right below the "dashboard type" option, you'll see the "custom page URL" option, paste the URL of the page you want to embed there.
Configure other dashboard options to meet your requirements (such as its name) and when your done, click on the "save" button.
Important notes:
Some pages can't be embedded. This has nothing to do with Ubidots nor with the dashboard type feature, but with a restriction configured in those specific pages—this is the case of Google, for example.
Embedded pages can be interacted with. You can use available buttons and navigate freely through them.
Certain pages are embeddable and interactive except for their login portals. This means you won't be able to log in to that specific page through an Ubidots dashboard.
3. Developing Custom Dashboard Pages
You can code your own pages using HTML, JavaScript, and React in order to create completely custom visualizations that meet requirements otherwise not addressed natively by the platform.
Custom pages are structured around a specific set of files. These files not only determine the page’s settings (for example, references to local or external CDN-exposed CSS and JavaScript libraries), but also define its logic and overall functionality. Learn about each type of file in our technical documentation. The file structure for a page is as follows:
├── manifest.toml
├── script.js
├── body.html
├── style.css
├── static
│ ├── some_files_or_folders
To create a page:
Go to “dev center” ⟶ “pages”.
Click on the “+” button.
Name your page.
Build your code directly in the editor or copy and paste your code into each file. By default, every new page is created with a dummy version of all the essential files; you can create more files using the “+” button.
Use the “preview” button to check how your page would look like.
Once satisfied with the outcome, click on “save”.
The URL of your page will be generated and displayed in the editor.
Copy the URL and paste it into the "custom page URL" field of a dashboard. Once you save the changes, your page will be displayed in the dashboard.
