Portal Tutorial

Create A Portal

  1. Log-in to the ClearBlade Platform and select the system that you wish to link a portal.

  2. Navigate to the “Portals” button on the sidebar or menu of the developers console

  3. Create a new portal by clicking + Add

  4. Enter the description for your portal

Create a new portal

Assign roles

Click the next to your new portal and select Edit Roles in order to give permission for our users to access and edit the portal.

This step assumes we have users in our system, if not, please add users in “Users”. Giving the authenticated role access to read will allow these users to sign in and operate a portal. By giving administrator roles CRUD access, they will be able to modify the portal that will reflect in the public view. Give role's access to portal

Access a portal

Now that we have access to open a portal, click the portal’s link and sign in with an administrator’s credentials. Click portal link Login to portal

Welcome to your portal!

Delete a portal

  1. Click the next to your new portal and select Settings
  2. Click Delete Portal Delete portal Confirm the deletion when prompted

Datasources

  1. Click “Add Datasource+” in the side editor
  2. Complete the information about the datasource in the pop up window. In this case we will use a ClearBlade collection we created previously
  3. Click “Apply” and the datasource and it’s last update will appear in the side editor. It can also be used in a widget under “Dynamic”.

Panes

Create a pane

  1. Click on the ‘+’ button on the top toolbar of the side editor. A dropdown will appear.
  2. Choose ‘New Pane’

A pane should appear in the portal

Edit pane

  1. Click the wrench icon of the pane you wish to edit Edit pane Edit pane modal

Pane fields

Title

Optional title for the pane

Hide Header

Removes Header

Hide Borders

Removes Borders

Tabbed Pane

Whether or not the pane will contain tabs

Theme

The type of theme for the pane (Primary or Secondary)

Pane ID

A unique ID for the pane. Useful when switching tabs programmatically.

Resize pane

  1. Click the resize handle on the bottom right corner or the pane and drag to desired shape Resize pane

Delete pane

  1. Click the trashcan button on the pane you wish to delete Delete pane
  2. Confirm deletion when prompted

Widget

For tutorial on each widget, click here

  1. Make sure you have added a pane before adding a widget.
  2. Click the ‘+’ button on the pane header toolbar
  3. Choose a type of widget and edit it in this window
  4. Click ‘Apply’ to save the changes

Edit/Delete widget

Hover over the widget and click on the wrench icon to edit. To delete, click on the trash can.

Import widget

There is also an option to import widget configurations. Create and save a widget first.

Flyout pane

Open the flyout menu

Click on the hamburger icon on the left-hand side of the header

Open flyout

Customize the menu title

Hover over the menu title and click the wrench icon

Edit title

Note

The menu title defaults to the name of the portal but can be configured like any widget

Add menu widgets

Click the plus icon on the left-hand side of the header bar

Add widget

Edit menu widgets

Widgets can be edited in the same way that they are edited inside of a normal pane

Header Pane

Add widget to header

Click on the ‘+’ button on the top toolbar of the side editor. A dropdown will appear.

Choose ‘New Header Widget’

A pane should appear in the portal

Edit header widget

Hover over the widget you wish to edit and click the wrench icon

Edit header widget

Reset header to default

Click the ‘…’ in the side editor toolbar and select ‘Reset Header to Default’

Reset header

Pages

Create a page

Hover over ‘Pages’ on the side editor and click the ‘+’

Add page

Fill in the name of the page and click ‘Apply’

Create page

Edit/Delete page

Click on the pencil icon of the page you wish to edit

Click on the trash can icon of the page you wish to delete

Edit page

Adding children to page

  1. Click on the plus button of the page you wish to add a child page

Add child

  1. Add name and parameters

Save child

  1. Save the child page by clicking Apply

The default value for the parameter will be used when navigating to the page

Programmatic interaction

The portal provides an interface via the CB_PORTAL object for interacting with pages from within a parser, widget, or datasource.

Selecting a page programmatically

CB_PORTAL.selectPage("/states/TX/city/Austin")

Example use case:

User selects a state from a list of states so the portal should navigate to a new page

Retrieving the current path parameters

CB_PORTAL.getPathParams() // will return {"state": "TX", "city": "Austin"} if the current path is "/states/TX/city/Austin"

Example use case:

  1. The current page changes so the portal should display data that is relevant to the URL parameters
  2. The portal needs to load the correct state on initial startup when the URL is /states/TX/city/Austin

Edit/Delete page

Click on the pencil icon of the page you wish to edit

Click on the trash icon of the page you wish to delete Confirm deletion when prompted

Modals

  1. Hover over ‘Modals’ on the side editor and click the ‘+’
  2. Give it a name, size, make it draggable or add click outside to close.
    • draggable: gives the ability to drag the modal around the portal.
    • close on click outside: allows modals to close when the user clicks away from them. Note: If you make the modal dragrabble, you cannot select ‘close on click’. There will be tips in the modal as a default. You can hover over these and edit the widget by clicking the wrench.
  3. You can also add more widgets by clicking ‘+ Add Widget’ next to the modal
  4. To delete or edit the modal hover over the name in the side editor and click on the pencil or trash can respectively.

Parser

The parser can be found in the widget edit page to configure widget. 1. Open the widget edit window.
2. Click on ‘Edit static data’
3. The parser will open a window where you can customize your widget data. On the right side of the parser, the changes you make will appear when you click ‘Test’ 4. Click ‘Apply’ to save the changes

Screen Size Editor

This guide assumes that panes and widgets have already been added to your portal

  1. Select the screen size you’d like to change the layout for by clicking the section in the toolbar at the top of the screen

  2. Adjust the layout by resizing your panes and/or resizing your widgets

Select screen size

Select screen size

Theme Editor

Macro

  • Choose between a standard or night base theme
  • Choose different color themes using a palette
  • Change the colors of the graph elements

Micro

Change the color palette by portal element

Plugins

Create a plugin

Plugins can be created in the portals page Click + Add

Enter the name and URL for your plugin

Create a new portal

The plugin should appear under the ‘Plugins’ tab

Clicking on the plugin will take you to the URL

Settings

Go to the gear next to the Plugin and click ‘Settings’

The name cannot be edited but the URL can be as well as copied.

The plugin can also be deleted from this window.

To save changes, click, ‘Update’.

Export

Plugins can be exported one at a time or all at once

All at once:

One at a time:

Go to the gear next to the plugin and click ‘Export’:

Click ‘Export as JSON’

Then click on ‘Download {Plugin Name}’ and a zip file will be downloaded onto the computer.

Click ‘Done’ when finished