Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Log in to the ClearBlade Platform and select the system you wish to link to 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 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.

...

Delete a portal

  1. Select Settings.

  2. Click 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 popup window. In this case, we will use a ClearBlade collection we created previously.

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

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

  2. Choose New Pane.

...

A pane will appear in the portal.

...

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

...

Pane fields

Title

The pane’s optional title

...

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

...

Delete pane

  1. Click the trashcan button on the pane you wish to delete.

  2. Confirm deletion when prompted.

...

Widget

Click here for a tutorial on each widget.

  1. Add a pane before adding a widget.

  2. Click the + button on the pane header toolbar.

  3. Choose a widget type and edit it in this window.

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

...

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

Header Pane

Add widget to the header

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

...

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

...

Adding children to the page

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

...

  1. The current page changes, so the portal should display data that is relevant to the URL parameters.

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

...

  1. Hover over Modals on the side editor and click the +.

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

  3. You can add more widgets by clicking + Add Widget next to the modal.

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

...

1. Open the widget edit window.

2. Click Edit static data 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.

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

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

...

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

...