Exercise

  1. Within the CBVending system, click Portal to display the portal interface.
  2. Click +Add icon to begin creating a new portal
  3. In the create Portal or Plugin dialog, specify the following information:
    Portal
    Name: CBVendingPortal
    Portal Type dropdown: Custom
  4. Click Create to create the portal
  5. Select the All checkboxes to grant read and update permissions to the Authenticated role
  6. 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.
  7. Select Roles in the side navigation bar
  8. Click on Maintenance
  9. Give Read permissions to Users and Message History
  10. Give All permissions to Portals as well
  11. 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.
  12. Click the CBVendingPortal link
    A new browser tab should open displaying the portal login dialog
  13. In the login dialog, enter as the email address and test as the password
  14. 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.
  15. Click on Datasources and then click on Add Datasource+ on the right side of the portal
  16. In the resulting dialog enter the following information:
    • Name: VendingMachineInventories
    • Type: ClearBlade Collection
    • Collection Name: Vending_Machine_Inventory
    • Refresh Intervals: 10000
  17. Click Apply
  18. Click on the '+' when you hover over Datasource.
  19. 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
  20. Save the portal
    Let’s add a pane and widget that uses our newly created Vending Machine Inventories datasource:
  21. Click on the + and then click New Pane to add a pane

    New Pane:
  22. To label the pane, click on the wrench
  23. Type "Primary Pane" in the Title section
  24. Click Apply
  25. In the pane, click the + to create a new widget.

  26. In the widget type dropdown menu, select Bar Chart
  27. Chart Data: Dynamic Datasource: VendingMachineInventory
  28. Click Edit Parser
  29. 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.

Complete and Continue  
Discussion

0 comments