Elizabeth McErlean

PI Vision + new Operations Dashboard for ArcGIS

Blog Post created by Elizabeth McErlean on Dec 7, 2017

Are you using Esri's recently released Operations Dashboard with the new dashboard items? If so, you might be interested in how to integrate PI Vision into this new application.

 

The new Operations Dashboard supports HTML in some elements, and we can leverage that to embed PI Vision without a custom extension.

 

The simplest way to embed a PI Vision display into Operations Dashboard is to add a Rich Text element to the dashboard. This is a good option for displays that you do not need to update to reflect a change in feature selection, like a summary display.

1. In an opened dashboard with a map element already configured, highlight the Add + button in the top right corner to show the list of elements.

2. Click on the Rich Text item to add a configurable element to the dashboard.

3. Click the Source button to edit the HTML directly.

4. Type the following, but replace the value for src with the URL to a PI Vision display in your organization:

     <iframe height="400" id="MyFrame" name="MyFrame" runat="server" src="https://VisionServer/PIVision/#/Displays/10/Esri_States?hidetoolbar&hidetimebar" width="600"></iframe>

5. Click the Source button to exit the HTML editor and update the element preview. Then click the Done button in the bottom right corner to add the element to the dashboard. You should now see the PI Vision display.

PIVisionOpsDB1.png

 

 

If you would like to add a PI Vision display that you want to update when the feature context changes, add a List element instead of the Rich Text element. You can use the URLs provided by PI Integrator for Esri ArcGIS to link feature layers to AF elements in PI Vision displays. The Integrator provides both an ad-hoc URL and URLs to saved custom displays. (These are accessible in the Integrator website by navigating to the desired layer, then clicking on the Visualization tab.)

 

Example of an ad-hoc URL: https://IntegratorServer/api/v1/services/2017_opsdbagol/2017_opsdbagol/displayserver/0/adhoc?mapfeaturekey={name}

Example of a custom display URL: https://IntegratorServer/api/v1/services/2017_opsdbagol/2017_opsdbagol/displayserver/0/displays/1?mapfeaturekey={name}

 

These URLs can be used the same way as the HTML example provided above, just replace the src value. I've also added the PI Vision URL parameters to hide the tool bar and time bar in the following example.

1. In an opened dashboard with a map element already configured, highlight the Add + button in the top right corner to show the list of elements.

2. Click on the List item to add a configurable element to the dashboard.

3. On the Data tab, you might want to limit the Maximum Features Displayed to 1 so that you only see one copy of the display at a time.

4. On the List tab, click the Source button to edit the HTML directly.

4. Type the following, but replace the value for src with a PI Vision URL provided by your Integrator for one of the layers in the map element of the dashboard.

     <iframe height="400" id="MyFrame" name="MyFrame" runat="server" src="https://IntegratorServer/api/v1/services/2017_opsdbagol/2017_opsdbagol/displayserver/0/displays/1?mapfeaturekey={name}&hidetoolbar&hidetimebar" width="600"></iframe>

5. Click the Source button to exit the HTML editor and update the element preview. Then click the Done button in the bottom right corner to add the element to the dashboard. You should now see the PI Vision display.

 

You may see"Object reference not set to an instance of an object." but this resolves once the feature context is available to the List element and the URL is able to resolve to an AF element in the layer.

 

After configuring the List element, you can make the dashboard interactive by configuring an action to update that display context based on a selection in another element, like the map.

1. Hover over the top left hand corner of the Map element to show the menu, then click on Configure Actions .

2. For Source, select the desired layer from the dropdown.

3. Click Add Action and select Filter.

4. Click Add Target and select the List element just configured to show the PI Vision display.

5. Click Done to return to the dashboard.

6. To update the PI Vision display with the context of a specific feature, click on the feature in the map then click the selection tool .

7. The PI Vision display should then update to reflect the AF element data corresponding to the selected feature.

 

Note that the new Integrator hosted time-enabled feature layers available in PI Integrator for Esri ArcGIS 2017 are supported data sources in dashboards, but they cannot be used as an action's source in interactive dashboards.

Outcomes