PxPlus Dashboard

PxPlus Dashboard

The PxPlus Dashboard allows application developers to provide end users with a way to view multiple sources of information at the same time. Multiple Web pages or sources can be displayed concurrently in an independent frame that can be resized or placed where desired on the screen. Virtually any website or Web-based display such as charts, graphs or tabular information, can be used within the Dashboard.

Settings for the Dashboard are unique to the user and held within the browser, allowing each user to customize his/her layout and contents.

When used in conjunction with PxPlus Web Services, the PxPlus Dashboard provides users with a powerful and efficient way to access their information.

Web Server Configuration

To use the Dashboard, a Web server must be operating and configured to run the Dashboard. The Dashboard can run on either the PxPlus EZWeb Server or the Apache Web Server.

The Dashboard is often used in conjunction with PxPlus Web Services. See PxPlus Web Services for instructions on setting up a Web server to run PxPlus Web Services.

PxPlus EZWeb Server

The PxPlus EZWeb Server runs the Dashboard by default without additional configuration.

Apache Web Server

To configure the Apache Web Server to run the Dashboard, the following lines need to be added to the httpd.conf file:

Note:
The path to PxPlus should be substituted with the actual path to PxPlus on the server.

Alias /services/ "/pxplus/lib/_web/services/"
<Directory "/pxplus/lib/_web/services/">
     Options Indexes FollowSymLinks
     AllowOverride None
     Order allow,deny
     Allow from all
     DirectoryIndex index.html
</Directory>

Running the Dashboard

To launch the Dashboard, the user navigates to the Dashboard URL, which defaults to the following:

http://your.website.com/services/dashboard

If this user is navigating to the Dashboard for the first time (or the user has cleared his/her browser settings), the default layout will be presented. This default setting is defined by a control file on the server and can be easily adapted to meet the needs of any site.

When the Dashboard is displayed, the user can drag any of the widgets around the screen using the caption line at the top of each widget. Widgets can be resized by dragging the lower right corner of any widget.

The browser maintains changes to the size and position of the widgets automatically. When they are changed and the user returns to the Dashboard, the widgets are redrawn in the same location.

The two buttons in the top right corner of the Dashboard are for Dashboard settings, while the two buttons in the top right corner of each widget are for widget settings. Information about these buttons is provided in the sections below.

Dashboard Settings

The top right corner of the Dashboard displays two buttons, General Dashboard Settings and Add a New Widget.

General Dashboard Settings

Click the gear button to access the following options:

Auto Arrange	This check box option controls the placement of widgets on the Dashboard. When selected, *all* the widgets are automatically arranged in order, starting from the top left and proceeding left-to-right and top-to-bottom. Dragging a widget changes their order, and the Dashboard determines where to display it. Uncheck this option if you want to directly control the placement of widgets on the Dashboard.
Reset	Click this button to remove customized Dashboard settings and revert to the original default layout and widgets.
Done	Click this button to save any changes and return to the Dashboard.

Add a New Widget

Click the plus sign button to add a new widget to the Dashboard.

If Auto Arrange is selected, the new widget is added to the end of the Dashboard. If Auto Arrange is not selected, the new widget is added to the top left corner of the Dashboard.

To access settings for creating (and maintaining) a widget, click the Settings button (gear) in the Empty Widget window. For an explanation of these settings, see Adding and Maintaining a Widget below.

Adding and Maintaining a Widget

Each widget displays two buttons in the top right corner. The Reload button (left/right circular pointing arrows) refreshes the contents of the widget. The Settings button (gear) invokes another window with options for creating and maintaining the widget. These options are explained in the table below.

For examples of widgets created for the different Web Services, see Examples - Web Service Widgets.

Contents

Click the drop-down for available selections:

Custom	Allows you to define the widget's settings for Title, URL, Title Color and Background.
Dashboard Info	A pre-defined sample layout that displays information about the PxPlus Dashboard. The Title and URL are populated with the pre-defined details that display this information.
PVX Plus Technologies	A pre-defined sample layout that displays the PVX Plus Web page. The Title and URL are populated with the pre-defined details that display this information.
(Web Service title)	The titles of any Web Service records added to the JSON file using Web Services Maintenanceare listed, if applicable. These records are located in the "options" section of the JSON file, which is used to populate the Title and URL. Note: If a new Web Service has been added to the JSON file but it is not listed, reload the browser page or restart your browser.

Title

Enter the text for the widget title.

URL

Specify the URL to use for the widget contents. This can be a valid Web address or a PxPlus Web Service. You can type the full syntax or use the methods described below.

If you selected a Web Service title from the Contents drop-down list, the URL will be defaulted.

If you created a Web Service record using Web Services Maintenance, you can enter the URL as:

id=serviceID

Where:

serviceID is the unique ID assigned to the Web Service record.

Additional parameter values can be entered (Optional), each separated by a space.

Example:

id=tasks type=pdf

Using this example, the Web Service ID is tasks, and the pdf output type overrides the default output type defined for this record only if Allow Override is selected. If Allow Override is not selected, the pdf output type will not override the default output type. An HTML error will display when a widget for this Web Service is in the Dashboard or when this Web Service is run as a URL on a browser. The HTML error will indicate that this Web Service ID does not allow the override of the specified parameter(s).

Note:
Only parameter values that are valid for the Type of Web Service can be entered.

Example:
If the Web Service ID is a Query, you cannot enter type=png, as this applies only to a Chart. See Web Services Maintenance.

Timer

Number of minutes between auto-refresh intervals.

Title Color

Select a color for the widget title from the drop-down list.

Background

Select a background color for the widget title from the drop-down list.

Delete

(Trash can) Deletes the current widget.

Refresh

(Left/right circular pointing arrows) Refreshes the settings for the current widget back to the last saved update and exits the Settings window.

Save

Saves any changes and closes the Settings window.

To exit the Settings window without saving any changes, click the red X button in the top right corner or click the Settings button (gear) again.

Resizing a Widget

To resize a widget, position the mouse pointer on the triangle gripper in the bottom right corner of the widget and then drag the mouse until the widget is the desired size.

Moving a Widget

To move a widget, position the mouse pointer on the widget's title bar, and then click and hold down the left mouse button to select the widget (a dark border appears around the widget). Drag the widget to the desired location.

Note:
The positioning for the widget is also influenced by the Auto Arrange option. If selected, dragging the widget automatically changes the order of all the widgets on the Dashboard. To directly control the placement of the widget, uncheck this option.

Website Restrictions

While most websites and Web data can be displayed in the Dashboard, some sites, such as Google, prevent their site from being displayed inside another Web page. In that case, the Dashboard will not be able to display these sites. You can verify why a website is not displayed by checking the browser error log. Generally, you will see a message that may look similar to this:

Refused to display ' https://www.google.com/?gws_rd=ssl' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

The message conveys the meaning that Google has decided that only pages from Google are allowed to display the requested page inside another Web page.

Dashboard Defaults (JSON)

The PxPlus Dashboard allows you to predefine the default layout and widgets. This is done by using a JSON file (*web/services/dashboard/dashboard.json) on the server. The JSON (JavaScript Object Notation) file contains information for the Dashboard such as the title, the default widgets to display (along with their title, URL, color, position and size), as well as any predefined options. These elements are explained in the table below.

To see the contents of the JSON file for your current Dashboard setup, hold down the CTRL + SHIFT keys and then click the Settings button (gear) in the top right corner of the Dashboard.

To edit a JSON file, select Configure Dashboard from the Web Deployment menu on the PxPlus Web IDE or from the Web Deployment category on the IDE Main Launcher (Windows). Select the file to edit from the list of JSON files stored in the *web/services/dashboard directory. (The ability to select a JSON file in Configure Dashboard was added in PxPlus 2016 Update 0001.)

Element	Value	Description
"title"	"Text"	Title for the Dashboard page
"autoArrange"	true \| false	Default setting for the Auto Arrange option
"restrict"	true \| false	If true, the user can *only* select URLs from the provided list. If false, the user can enter any URL he/she wants.
"icon"	"URL"	URL for an icon to display in the top left corner of the display *(Optional)*
"header1"	"Text"	Contents of an <h1> tag that will be inserted in the Dashboard HTML immediately following the icon *(Optional)*
"header2"	"Text"	Contents of an <h2> tag that will be inserted in the Dashboard HTML immediately following "header1" *(Optional)*
"header3"	"Text"	Contents of an <h3> tag that will be inserted in the Dashboard HTML immediately following "header2" *(Optional)*
"subheader"	"Text"	Text that will be inserted in the Dashboard HTML immediately following "header3" *(Optional)*
"css"	"URL"	CSS file to be applied to the page *(Optional)*
"div"	Array	Array of widgets to be displayed (See "div" Array Elements below)
"options"	Array	Array of URLs that the user can select (See "options" Array Elements below)
"div" Array Elements
"ttl"	"Text"	Caption line title
"url"	"URL"	URL to put in the widget
"timer"	nnn	Minutes between auto-refresh cycles (0 = None)
"color"	"color"	Text color for the title
"bgcolor"	"color"	Background color for the title
"top"	nnn	Topmost pixel of the widget
"left"	nnn	Leftmost pixel of the widget
"hi	nnn	Height in pixels
"wd"	nnn	Width in pixels
"options" Array Elements
"ttl"	"Text"	Caption line title
"url"	"URL"	URL to put in the widget
Note: The information in the "options" section is used to load the Contents drop box for adding and maintaining a Dashboard widget. See Adding and Maintaining a Widget above.

Web Server Configuration

PxPlus EZWeb Server

Apache Web Server

Note:
The path to PxPlus should be substituted with the actual path to PxPlus on the server.

Running the Dashboard

Dashboard Settings

Adding and Maintaining a Widget

Note:
If a new Web Service has been added to the JSON file but it is not listed, reload the browser page or restart your browser.

Note:
Only parameter values that are valid for the Type of Web Service can be entered.

Example:
If the Web Service ID is a Query, you cannot enter type=png, as this applies only to a Chart. See Web Services Maintenance.

Resizing a Widget

Moving a Widget

Note:
The positioning for the widget is also influenced by the Auto Arrange option. If selected, dragging the widget automatically changes the order of all the widgets on the Dashboard. To directly control the placement of the widget, uncheck this option.

Website Restrictions

Dashboard Defaults (JSON)

Note:
The information in the "options" section is used to load the Contents drop box for adding and maintaining a Dashboard widget. See Adding and Maintaining a Widget above.

Web Server Configuration

PxPlus EZWeb Server

Apache Web Server

Note:The path to PxPlus should be substituted with the actual path to PxPlus on the server.

Running the Dashboard

Dashboard Settings

Adding and Maintaining a Widget

Note: If a new Web Service has been added to the JSON file but it is not listed, reload the browser page or restart your browser.

Note: Only parameter values that are valid for the Type of Web Service can be entered.Example: If the Web Service ID is a Query, you cannot enter type=png, as this applies only to a Chart. See Web Services Maintenance.

Resizing a Widget

Moving a Widget

Note: The positioning for the widget is also influenced by the Auto Arrange option. If selected, dragging the widget automatically changes the order of all the widgets on the Dashboard. To directly control the placement of the widget, uncheck this option.

Website Restrictions

Dashboard Defaults (JSON)

Note: The information in the "options" section is used to load the Contents drop box for adding and maintaining a Dashboard widget. See Adding and Maintaining a Widget above.

Note:
The path to PxPlus should be substituted with the actual path to PxPlus on the server.

Note:
If a new Web Service has been added to the JSON file but it is not listed, reload the browser page or restart your browser.

Note:
Only parameter values that are valid for the Type of Web Service can be entered.

Example:
If the Web Service ID is a Query, you cannot enter type=png, as this applies only to a Chart. See Web Services Maintenance.

Note:
The positioning for the widget is also influenced by the Auto Arrange option. If selected, dragging the widget automatically changes the order of all the widgets on the Dashboard. To directly control the placement of the widget, uncheck this option.

Note:
The information in the "options" section is used to load the Contents drop box for adding and maintaining a Dashboard widget. See Adding and Maintaining a Widget above.