As the heart of your application, the dashboard page has to be as flexible as possible to accommodate to varying content needs. Widgets displaying all sorts of data will always be the bread and butter of any Ubidots application, but often times 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 Industrial plan and onwards.
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 Dashboard Page
Creating dashboard pages, 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 visualization that meet requirements otherwise not addressed natively by the platform.
In order to develop your own custom page and deploy it successfully to Ubidots, you must refer to our technical documentation, where every aspect and step is properly covered. Having said that, here’s a general overview of the process of creating a custom page:
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. The file structure for a page is as follows:
├── manifest.toml
├── script.js
├── body.html
├── style.css
├── static
│ ├── some_files_or_folders
After creating the necessary files, the process continues by creating the page in Ubidots. A custom page is the entity in Ubidots that will hold the custom code of the files and will provide a reference to it that can be loaded from a dashboard page.
Note: Currently, all the CRUD (create, read, update and delete) process for pages is done through the API. This will change in the near future so that this process is done through the platform's UI.
During the process of creating the page in Ubidots you will get the ID of your page. To finish the process, you have to upload a ZIP file containing all the files you previously created and “assemble” the URL of your page using its ID, like this:
https://industrial.ubidots.com/app/pages/public/<page_id>
That URL is then copied in the "custom page URL" field of a new dashboard. Once you save your dashboard, your page will be displayed in it.
Remember to read our technical documentation to learn about the process of creating a custom-built page in detail. |