Portals
Introduction
A portal is a single web application instance with preconfigured integrations with the ClearBlade system to which it belongs. It is fully responsive, mobile-friendly, and customizable.
Click here to learn how to get started with portals.
Purpose
Very powerful visual and interactive widgets to view and manipulate data
Role-based authorization
Out-of-box integrations with your ClearBlade system (e.g., fetching code services, maintaining tokens)
User-facing frontend for your ClearBlade system
Mobile-friendly
Real-time data streaming
User management
Highly customizable and extensible
Components
Version 7.0.0 and later:
Datasource
Datasources are integrated with your system assets. They can consume or generate data, such as:
Datasources can be globally accessed by using the datasources
object.
Page
Users can view one page at a time. Every user starts on the home page by default. The page can change programmatically by running CB_PORTAL.selectPage from within a widget’s parser. A page can have multiple panes.
Pane
A pane is a container that holds one or more widgets. The pane’s width and height can be set according to Bootstrap grid.
Widget
A widget links to datasources and renders a visual or interactive way to manipulate them. Tutorials for each widget can be found here.
Parser
A parser manipulates a datasource's output before its ingestion by a widget. A datasource’s output may need to be modified into different data structures to be consumed by widgets.
Flyout pane
This customizable pane flies out from the left-hand side of the screen. The page can change programmatically by running CB_PORTAL.toggleFlyout from within a widget’s parser.
Header pane
The header pane is the same across all of a portal’s pages. It can contain multiple widgets.
Internal resource
An internal resource is a JavaScript or CSS file containing global functions or styles. This is loaded just once when the page loads. Add global/reusable code in this section, which the user chooses to be loaded before anything else loads on the page. Users can set the loading order of internal resources used on the portal. Users can also disable any resource. When this happens, they are not loaded. This is usually used while in development.
External resource
An external resource represents a web asset (such as JavaScript and CSS). Users can set the loading order of external resources used on the portal, and it can disable any resource. When this happens, they are not loaded. This is usually used while in development. This allows for a more customizable development of the widget using other resources.
Theme editor
You can choose or customize the portal’s color scheme.
Screen size editor
The pane and widget layout can be adjusted at different screen sizes.
Modal
This element sits on top of an application’s main window. It can contain widgets like a pane.
Security
The portal has a dedicated URL that can be shared and linked to a domain name. Users can visit a portal and interact with the data, edges, messaging, and other assets. A ClearBlade system user, such as an administrator, can be granted write access. This will allow them to customize a portal for another user.
Advanced
Plugins
A plugin is a JavaScript file that a portal can load to extend the default list of widgets and datasources. This can be used when a custom datasource is necessary and a custom widget is called for in a separate portal.
CB_PORTAL
This is used for portal management from the parser.
Local storage
Portals allow users to get/set values in the local storage using standard JavaScript functions. ClearBlade natively stores a few keys by default to avoid re-authentication and re-querying of constants.
Local storage stores:
Authentication information for the portal to avoid re-authentication
Platform and message URLs to avoid querying
Users can access it in a browser's local storage, usually via the Developer Tools' application section.
These are the pre-existing key-value pairs in local storage:
Key | Type | Description | Example |
---|---|---|---|
cb_messagePort | number | MQTT over the WebSocket port for messaging | 8904 |
cb_messageURL | string | Messaging broker | |
cb_platformURL | string | The platform that the broker is connecting to |