Build an Equipment Dashboard Guide Part 2

[#1]

• Build an Equipment Dashboard Guide Part 2
• Step 5: Display Data
• Step 6: Test Application
• Step 7: Next Steps

Build an Equipment Dashboard Guide Part 2

Step 5: Display Data

Now that you have configured the visual part of your application, you need to bind the Widgets in your Mashup to a data source.

Add Services to Mashup

1. In the top-right, ensure the Data tab is selected.

   

2. Click the green + symbol.

   

3. In the Entities Filter field, search for and select MyPump.
4. In the Services Filter field, type GetPropertyValues.
5. Click the right-arrow beside GetPropertyValues. Note how GetPropertyValues was added to the right-side under Selected Services
6. Check the checkbox for Execute on Load. This causes the Service to execute when the Mashup starts.

      

7. In the Services Filter field, type QueryPropertyHistory.

8. Click the right-arrow beside QueryPropertyHistory.

9. Check the checkbox for Execute on Load.

10. Click Done to close the pop-up. Note how the Services have been added to the Data tab in the top-right.

        

11. Click Save.

Now that we have access to the backend data, we want to bind it to our Widgets.

 

Value Display

Configure the Value Display to display the SerialNumber of the pump.

1. Under the Data tab, expand GetPropertyValues > Returned Data > All Data.

   

2. Drag-and-drop GetPropertyValues > serialNumber onto the Value Display Widget in the top section.

   

3. On the Select Binding Target popup, select Data.

   

Image

We want to use an Image Widget to display a thumbnail picture of the pump for easy reference.

To do that, though, you first need to upload an image to Foundation by creating a Media Entity.

1. Right-click the image below, then click "Save image as..." to download.

   

2. Click Browse > Visualization > Media.

   

3. Click + New.
4. In the Name field, type pump-thumbnail.

   

5. If Project is not already set, click the + in the Project text box and select the PTCDefaultProject.
6. Under Image, click Change.
7. Navigate to and select the pump-image.png file you just downloaded.
8. On the navigation pop-up, click Open to close the pop-up and confirm the image selection.
9. At the top of Foundation, click Save.

   

Change Image to pump

We will now update the Image Widget to display the ThingWorx Media Entity we just created.

1. Return to the pump-dashboard Mashup.
2. Click the Image Widget to select it, and ensure that the bottom-left Properties tab is active.

   

3. In the bottom-left Properties' Filter field, type SourceURL.

   

4. For the SourceURL Property, search for and select pump-thumbnail.

   

5. Click Save.

 

Line Chart

Configure the Line Chart to display Property values changing over time.

1. In the top-right Data tab, expand QueryPropertyHistory > Returned Data.

   

2. Drag and drop QueryPropertyHistory > All Data onto the Line Chart Widget in the bottom-right Canvas section.

   

3. On the Select Binding Target pop-up, select Data.

   

4. Ensure the Line Chart Widget is selected.
5. On the Line Chart's Property panel in the bottom-left, in the Filter field, type XAxisField.
6. For the XAxisField Property, select timestamp.

   

7. In the Filter field, type LegendFilter.
8. Check the checkbox for LegendFilter.

   

9. Click Save.

 

Verify Data Bindings

You can see the configuration of data sources bound to Widgets in the bottom-center Connections pane.

1. In the top-right Data tab, click GetPropertyValues.

• Check the diagram in the bottom-center Connections window to confirm a data source is bound to the Value Display Widget.

     

2. Also in the top-right Data tab, click QueryPropertyHistory.

• Confirm that the diagram shows it is bound to the Line Chart.

       

3. Click Save.

 

Step 6: Test Application

1. Browse to your Mashup and click View Mashup to launch the application.
   

NOTE: You may need to enable pop-ups in your browser to see the Mashup.

2. Confirm that data is being displayed in each of the sections.

3. Open the MyPump Thing, then click the Properties and Alerts Tab.

4. Click Set Value on the line of the serialNumber Property.

5. Enter a value for the serial number, then click the Check-mark button.

6. Click Refresh to confirm the value is changed.

7. Refresh the browser window showing the dashboard to see the new serial number value.

 

Step 7: Next Steps

Congratulations! You've successfully completed the Build an Equipment Dashboard guide, and learned how to:

• Use Composer to create a Thing Shape and a Thing Template
• Make a Thing using a custom Thing Template
• Store Property change history in a Value Stream
• Create an applicaton UI with Mashup Builder
• Display data from connected devices
• Test a sample application

If you like to return to previous guides in the learning path, select Connect and Monitor Industrial Plant Equipment.