Exercise
- Within the CBVending system, click Portal to display the portal interface.
- Click +Add icon to begin creating a new portal
- In
the create Portal or Plugin dialog, specify the following information:
Portal
Name: CBVendingPortal
Portal Type dropdown: Custom - Click Create to create the portal
- Select the All checkboxes to grant read and update permissions to the Authenticated role
- Click Add permissions
We also need to grant additional permissions to the Authenticated role in order for some of our widgets and datasources to function properly. - Select Roles in the side navigation bar
- Click on Maintenance
- Give Read permissions to Users and Message History
- Give All permissions to Portals as well
- Click Save and exit to save your change. Now that we have created our portal and have granted permissions to a role, let’s log into the portal and begin adding content to it.
- Click
the
CBVendingPortal link
A new browser tab should open displaying the portal login dialog - In the login dialog, enter as the email address and test as the password
- Click Login
After logging in, we are presented with an empty portal . We, as system users, now need to add datasources to our portal that will provide data to widgets we display in the panes. - Click on Datasources and then click on Add Datasource+ on the right side of the portal
- In
the resulting dialog enter the following information:
- Name: VendingMachineInventories
- Type: ClearBlade Collection
- Collection Name: Vending_Machine_Inventory
- Refresh Intervals: 10000
- Click Apply
- Click on the '+' when you hover over Datasource.
- Repeat
step 16 to add a datasource that
returns the users defined to the system. Use the following values as a guide:
- Datasource name: UserResource
- Datasource Type: ClearBlade User List
- Refresh
Time:
360000
The datasources should now be displayed
- Save the portal
Let’s add a pane and widget that uses our newly created Vending Machine Inventories datasource: - Click on the + and then click New Pane to add a pane
New Pane: - To label the pane, click on the wrench
- Type "Primary Pane" in the Title section
- Click Apply
- In the pane, click the + to create a new widget.
- In the widget type dropdown menu, select Bar Chart
- Chart Data: Dynamic Datasource: VendingMachineInventory
- Click Edit Parser
- In the code editor, paste the code-32.js code:
30. In the lower right corner of the code editor, click Apply
31.In the widget dialog, enter the following information in its respective tabs:
Bars tab:
Y Axes tab:
X Axis tab:
For all other settings, leave the default values.
32.In the widget settings dialog, click Apply
You should now see your new widget displayed and accurately reflecting the data in your Vending_Machine_Inventory data collection
Let’s now add a widget that uses our newly created UsersDatasource datasource (Repeat steps 21-25 for the "Secondary Pane")
33.In the widget type dropdown menu, select Text
34.In the widget dialog, enter the following information in its respective tabs:
Data tab:
Style tab:
For all other settings, leave the default values.
35. Go back to the Data section and click Edit Parser
36.Paste into parser in the console:
37.In the lower right corner of the code editor, click Apply
38.In the widget settings dialog, click Apply
You should now see your new widget displayed and accurately displaying the users defined to the system.
0 comments