...
| Expand | |
|---|---|
|
Create A Portal
Log - in to the ClearBlade Platform and select the system that you wish to link to a portal.
Navigate to the “Portals” Portals button on the sidebar or menu of the developers console
Create a new portal by clicking + Add
Enter the your portal’s description for your portal
...
Assign roles
Click the next the gear icon next to your new portal and select Edit Roles in order to give permission for our Roles to permit users to access and edit the portal.
...
This step assumes we have users in our system, if not, please add users in “Users”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 will be able to can modify the portal that will to reflect in the public view.
...
Access a portal
Now that we have access to open a portal, click Click the portal’s link and log in with an administrator’s credentials.
...
Welcome to your portal!
...
Delete a portal
Click the next to your new portal and select SettingsSelect Settings
Click Delete Portal Confirm Portal. Confirm the deletion when prompted
...
Datasources
Click “Add Add Datasource+ ” in the side editor
Complete the information about the datasource in the pop up popup window. In this case, we will use a ClearBlade collection we created previously
Click “Apply” Apply, and the datasource and it’s its last update will appear in the side editor. It can also be used in a widget under “Dynamic”.Dynamic
...
Panes
Create a pane
Click on the ‘ + ’ button on the top toolbar of the side editor. A dropdown will appear.
Choose ‘New Pane’New Pane
...
A pane should will appear in the portal.
Edit pane
Click the wrench icon of the pane you wish to edit
...
Pane fields
Title
Optional title for the paneThe pane’s optional title
Hide Header
Removes Headerheader
Hide Borders
Removes Bordersborders
Tabbed Pane
Whether or not the pane will contain tabs
Theme
The theme’s type of theme for the pane (Primary primary or Secondarysecondary)
Pane ID
A The pane’s unique ID for the pane. Useful when switching tabs programmatically.
Resize pane
Click the resize handle on the bottom right corner or 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
...
Widget
For Click here for a tutorial on each widget, click here
...
.
Add a pane before adding a widget.
Click the ‘ + ’ button on the pane header toolbar
Choose a widget type of widget and edit it in this window
Click ‘Apply’ Apply to save the changes
...
Edit/Delete widget
Hover over the widget and click on the wrench icon to edit. To delete, click on Click the trash can icon to delete.
...
Import widget
There is also an option to You can import widget configurations. Create and save a widget first.
...
Open the flyout menu
Click on 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 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.
...
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 New Header Widget’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 Reset Header to Default’Default.
...
Pages
Create a page
Hover over ‘Pages’ Pages on the side editor and click the ‘ +’.
...
Fill in the name of the page and click ‘Apply’Apply.
...
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.
...
Adding children to page
Click on the plus button of the page you wish to add a child page
...
3. Save the child page by clicking Apply
The default value for the parameter will be used when navigating to the page
...
CB_PORTAL.selectPage("/states/TX/city/Austin")
Example use case:
User The user selects a state from a list of states so the portal should navigate navigates to a new page.
Retrieving the current path parameters
...
Example use case:
The current page changes, so the portal should display data that is relevant to the URL parameters
The portal needs to must 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
Hover over ‘Modals’ Modals on the side editor and click the ‘ +’
Give it a name , and size, and choose to make it draggable or add and close on click outside to close. draggable Draggable: gives allows the ability modal to drag the modal around the portal. close Close on click outside: allows modals to close when the user clicks away from them. Note: If You cannot select close on click if you make the modal dragrabble, you cannot select ‘close on click’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 also add more widgets by clicking ‘ + Add Widget’ Widget next to the modal
To edit or delete or edit the modal, hover over the name in the side editor and click on the pencil or trash can, respectively.
...
Internal Resources
Internal resources can be added in the toolbar on the right in of the portal.
...
There are two ways to add an internal resource:
In the internal resource parser
Importing a file
Parser
Click ‘Add Add Internal Resource’ Resource, and a ‘New File’ 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’ Import Files and choose the file(s) from your computerdevice.
After being created, they should be listed in the ‘Internal Resources’ Internal Resources section. From there, the file(s) can be exported and searched.
...
To add more files, hover over ‘Internal Resources’ Internal Resources and click on ‘ +’.
...
Export Files
Mark the checkbox of the file(s) you want to export and click ‘Export Files’Export Files.
Delete Files
To delete files, hover over the file you want to remove and click on the trashcan icon.
...
External Resources
External resources can be added in the toolbar on the right in of the portal.
...
In the example, we will be using use a CSS URI URL example from Font Awesome Icons. The icons can be found here.
Make sure to add 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 Add Resource +’.
Hit the enter key to add the resource.
...
There is a checkbox option to do ‘Block Block Widget Render’ Render if there is an import error.
Go to the HTML widget edit and copy/paste the code below in into the HTML parser:
| Code Block |
|---|
<div class="text-center underline"> <h2>Address</h2> <i class="fas fa-address-book fa-7x"></i> </div> |
HTML
...
This should appear in the widget:
...
To delete, hover over the resource and the click on the trash can icon that appears.
...
Parser
The parser can be found in on the widget edit page to configure widget.
1. Open the widget edit window.
2. Click on ‘Edit static data’ 3Edit static data
3. The parser will open a window where you can customize your widget data. On The changes you make will appear on the right side of the parser , the changes you make will appear when you click ‘Test’ 4Test
4. Click ‘Apply’ 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 for by clicking the section in the toolbar at the top of the screen
Adjust the layout by resizing your panes and /or resizing your 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
...
Create a plugin
Plugins can be created in on the portals page. Click + Add.
...
Enter the your plugin name and URL for your plugin.
...
The plugin should appear under the ‘Plugins’ Plugins tab.
...
Clicking on the plugin will take you to the URL.
Settings
Go to the gear next to the Plugin plugin and click ‘Settings’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’Update.
Export
Plugins can be exported all at once or 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’Export:
...
Click ‘Export Export as JSON’JSON.
...
Then click on ‘Download Click Download {Plugin Name}’ , and a zip ZIP file will be downloaded onto the computeryour device.
...
Click ‘Done’ Done when finished.