Portals

A Portal is a single instance of a web application with preconfigured integrations with the ClearBlade System to which it belongs. It is fully responsive, mobile-friendly, and customizable.

A portal can have:

Purpose

  • Very powerful visual and interactive widgets to view and manipulate data
  • Role-based authorization
  • Out-of-box integrations with your ClearBlade System (ex. fetching code services, maintain tokens)
  • User-facing frontend for your ClearBlade Platform System
  • Mobile-friendly
  • Real-time data streaming
  • User management
  • Highly customizable and extensible

Getting started

Components

Portal
-Datasources
-Pages
Panes
Widgets
—-Parsers
-External Resources
-Flyout Pane
-Header Pane
-Theme Editor

Datasource

Datasources are integrated with assets within your System. These assets can consume or generate data, such as:

Page

A User 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. See Changing Pages.

A Page can have:

Pane

A Pane is a container that holds one or more widgets. The width and height of the pane can be set according to Bootstrap Grid.

Widget

A widget links to one or more Datasources and renders a visual or a interactive way to manipulate the datasource.

Parser

A Parser offers a mechanism for manipulating a Datasource’s output prior to its ingestion by a widget. Often times, a Datasource’s output may need to be modified into different data structures to be consumed by different widgets.

Flyout Pane

The customizable pane that flies out from the left-hand side of screen.

Header Pane

The Header Pane is the same across all of a Portal’s Pages. Header Pane can contain:

  • Multiple Widgets

External Resource

An External Resource represents a web asset (such as js, css

Theme Editor

You can choose or customize the color scheme of the portal

Screen Size Editor

The layout of panes and widgets can be adjusted at different screen sized

Advanced

Plugins

A plugin is a Javascript file that can be loaded by a portal to extend the default list of widgets and datasources. This can be used when a custom datasource is necessary and custom widget is called for in a separate portal.

CB_PORTAL

This is used for portal management from the parser. To find out what each object is used for click here

Security

The portal has a dedicated URL that can be shared and/or linked to a domain name.

A [User] can visit a portal and interact with the data, edges, messaging, and other assets.

A [User] of a ClearBlade System, such as an Administrator User, can be granted Write access. This will allow a [User] to customize a portal for another user.

For information on the difference between a Developer and a User, see here

FAQ

Settings

1. How do I change settings programmatically?

  • To get the settings programmatically, use datasources.myDatasource.settings();
  • To Set the settings programatically , use datasources.myDatasource.settings({ ...datasources.myDatasource.settings(), refresh_interval: 50

This can be done in the widget’s parser.

Make sure to use the spread operator followed by properties/settings which needs to be changed programmatically. Example: “of changing the message settings….”

Datasource

1. What are the different methods available on a datasource inside of a parser?

  • Users can access the selected datasource by using this.dsModel. Then pair it with methods such as sendData to call on them after being accessed. Ex. "this.dsModel.sendData(insert datasource name here);"
  • 'datasources' is used inside of the widget parser and gives the user the freedom to use any of their datasources. Examples:
  • datasources.myDatasource.sendData(insert datasource name here);
  • To retrieve latest cache for a datasource, use datasources.myDatasource.latestData()
  • To subscribe and unsubscribe to updates on a datasource, retrieve the data first and assign it to a variable - const updateCb = (data) { //do something with data } then use- datasources.myDatasource.latestData.subscribe(updateCb) datasources.myDatasource.latestData.unsubscribe(updateCb)
  • if(datasources.myDatasource.lastUpdated){ const data = datasources.myDatasource.latestData(); }
  • To reach out to the server and update cache- datasources.myDatasource.refresh()

2. How do I change the message topic on a datasource?

  • Create a new HTML widget and use your message topic as your datasource
  • Edit the parser to include this code:

Make sure to change ‘msg’ to the name of your topic and ‘newTopic’ to the topic name you want to change to

  • Save changes and see the change appear when you open the message datasource settings

Widgets

1. How do I set up permissions for rule builder?

Permissions needs to be added to the system’s:

  • Code Services
  • Triggers
  • Roles

This can be done in the Roles section of the system. It is recommended to add a new role specifically for the rule builder.

To learn more about adding new roles and permissions to a role, go to (enter roles link here)

2. How do I use the list widget to update other widgets?

Here is an example between the text and list wiget:

  • Create a local variable
  • Add the list widget to the pane using the local variable as the ‘Selected Item’ datasource
  • Add the text widget using the local variable as the datasource
As you switch items on the list the text will change to the item’s id.