Portal Tutorial

Table of Contents

Click here to expand...

Create A Portal

Log in to the ClearBlade Platform and select the system you wish to link to a portal
Navigate to the Portals button on the sidebar or menu of the developers console
Create a new portal by clicking + Add
Enter your portal’s description

Assign roles

Click the gear icon next to your new portal and select Edit Roles to permit users to access and edit the portal.

If you have no users, add them in Users. Giving the authenticated role access to read will allow these users to log in and operate a portal. By giving administrator roles CRUD access, they can modify the portal to reflect in the public view.

Access a portal

Click the portal’s link and log in with an administrator’s credentials.

Welcome to your portal!

Delete a portal

Select Settings
Click Delete Portal. Confirm the deletion when prompted

Datasources

Click Add Datasource+ in the side editor
Complete the information about the datasource in the popup window. In this case, we will use a ClearBlade collection we created previously
Click Apply, and the datasource and its last update will appear in the side editor. It can also be used in a widget under Dynamic

Panes

Create a pane

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

A pane will appear in the portal.

Edit pane

Click the wrench icon of the pane you wish to edit

Pane fields

Title

The pane’s optional title

Hide Header

Removes header

Hide Borders

Removes borders

Tabbed Pane

Whether or not the pane will contain tabs

Theme

The theme’s type for the pane (primary or secondary)

Pane ID

The pane’s unique ID. Useful when switching tabs programmatically

Resize pane

Click the resize handle on the bottom right corner of the pane and drag to the desired shape.

Delete pane

Click the trashcan button on the pane you wish to delete
Confirm deletion when prompted

Click here for a tutorial on each widget.

Add a pane before adding a widget
Click the + button on the pane header toolbar
Choose a widget type and edit it in this window
Click Apply to save the changes

Edit/Delete widget

Hover over the widget and click the wrench icon to edit. Click the trash can icon to delete.

Import widget

You can import widget configurations. Create and save a widget first.

Flyout pane

Open the flyout menu

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

Customize the menu title

Hover over the menu title and click the wrench icon.

The menu title defaults to the portal’s name but can be configured like any widget. ..

Add menu widgets

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

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 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.

Reset header to default

Click the ellipsis in the side editor toolbar and select Reset Header to Default.

Pages

Create a page

Hover over Pages on the side editor and click the +.

Fill in the name of the page and click Apply.

Edit/Delete page

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

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

Adding children to page

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

2. Add name and parameters

3. 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:

The user selects a state so the portal navigates 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:

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

Edit/Delete page

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

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

Modals

Hover over Modals on the side editor and click the +
Give it a name and size, and choose to make it draggable and close on click outside. Draggable: allows the modal to drag around the portal. Close on click outside: allows modals to close when the user clicks away from them. You cannot select close on click if you make the modal draggable. There will be tips in the modal as a default. You can hover over these and edit the widget by clicking the wrench
You can add more widgets by clicking + Add Widget next to the modal
To edit or delete the modal, hover over the name in the side editor and click the pencil or trash can, respectively

Internal Resources

Internal resources can be added in the toolbar on the right of the portal.

There are two ways to add an internal resource:

In the internal resource parser
Importing a file

Parser

Click Add Internal Resource, and a New File modal will appear. Give your file a unique name, choose whether it is a JS or CSS file, and type in the code. There is an option to test before saving the changes.

Type	Parser	Appearance
JS
CSS

Import File

Click Import Files and choose the file(s) from your device.

After being created, they should be listed in the Internal Resources section. From there, the file(s) can be exported and searched.

Add More Files

To add more files, hover over Internal Resources and click +.

Export Files

Mark the checkbox of the file(s) you want to export and click Export Files.

Delete Files

To delete files, hover over the file you want to remove and click the trashcan icon.

External Resources

External resources can be added in the toolbar on the right of the portal.

In the example, we will use a CSS URL example from Font Awesome Icons. The icons can be found here.

Add the HTML widget to the portal before continuing with the example.

Copy the URL (https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css) and add it to the box that appears after clicking Add Resource +.

Hit the enter key to add the resource.

The resource should then get added to the list.

There is a checkbox option to do Block Widget Render if there is an import error.

Go to the HTML widget and copy/paste the code below into the HTML parser:

<div class="text-center underline">
  <h2>Address</h2>
  <i class="fas fa-address-book fa-7x"></i>
</div>

This should appear in the widget:

To delete, hover over the resource and click the trash can icon.

Parser

The parser can be found on the widget edit page.

1. Open the widget edit window

2. Click Edit static data

3. The parser will open a window where you can customize your widget data. The changes you make will appear on the right side of the parser 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.

Select the screen size you’d like to change the layout by clicking the section in the toolbar at the top of the screen
Adjust the layout by resizing your panes and widgets