Dashboards

Overview

A dashboard provides a way for users to modify properties of a WebWidget in a Px View in real-time, without needing to edit it manually through the Px Editor. It also allows those modifications to be saved so that the user always sees their personalized view whenever they are logged in.

Currently, there are two out-of-the-box dashboardable WebWidgets: CircularGauge and Chart from the webChart Palette.

These Widgets both allow a user to dynamically drag and drop applicable Components onto them so the user can see new values instantly. You can combine this feature with a dashboard to allow a user to save the override ORD and show their preferred content by default.

What problems do dashboards solve?

Setting up a dashboard (Px Page designer)

Verify DashboardService exists under Config > Services. If not, add a DashboardService to Config > Services from the dashboard Palette.

In the Px Editor, add a DashboardPane from the dashboard Palette.

NOTE: To adjust the size of a dashboard, you must first select the DashboardPane in the Widget Tree. Clicking on the dashboard on the Px page directly interacts with the mounted Widget.

Adding a Widget

The Component-first way is the easiest way to set up a dashboard. Drag a Component from the Nav Tree and drop it into the Widget Tree, directly onto the content space under the DashboardPane (dragging onto the dashboard itself does not work!). The Make Widget dialog box will show, allowing you to select a WebWidget from a Palette.

This automatically sets up the dragged Component as the default ORD for the dashboard.

Alternatively, you can drag a WebWidget from a Palette and drop it into the the dashboard’s content space, and then set the default ORD manually.

Manually setting a default ORD

You can open the Widget Properties by double clicking on the dashboard itself, or on WebWidget(Content) under the DashboardPane in the Widget Tree. Then modify the ord slot under Wb View Binding to set the default value.

Adding a Custom Widget

If you have a custom dashboardable Widget that is not part of a Palette, you can still add it to a dashboard.

First, add a WebWidget to the dashboard from the workbench Palette. Then open up the Widget Properties, and enter the ORD for the custom Widget in the js slot under Web Widget. For example: view:myFirstModule:MyFirstWidget.

Using a Dashboard (End User)

To change the content, drag and drop a new point onto the Widget.

To save changes so that your contents load next time you view this Widget, click the Save icon in the top area of the dashboard.

To reset to default contents, click the Reset icon (X) in the top area of the dashboard.

This functionality works in both Workbench as well as in the HTML5 Hx profile.

Custom Widget Development

Making Your Custom Widgets Dashboardable

Check out the bajaux Making your Widget Dashboardable tutorial, the third part in a series designed to introduce bajaux basics!

Working Demo

You can get a working dashboard demo from the docDeveloper Palette, including JavaScript examples.

  1. From the docDeveloper Palette, drag the BajauxExamples folder onto your Config folder.

  2. Expand BajauxExamples in the Nav Tree, and double-click DashboardWidget.