#

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.