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
- In the top-right, ensure the Data tab is selected.
![Step 5 Add Services to Mashup Step 1.png Step 5 Add Services to Mashup Step 1.png](https://community.ptc.com/t5/image/serverpage/image-id/61749iA7645455F7A9636B/image-size/large?v=v2&px=999)
- Click the green + symbol.
![Step 5 Add Services to Mashup Step 2.png Step 5 Add Services to Mashup Step 2.png](https://community.ptc.com/t5/image/serverpage/image-id/61750i8568848546F47143/image-size/large?v=v2&px=999)
- In the Entities Filter field, search for and select MyPump.
- In the Services Filter field, type GetPropertyValues.
- Click the right-arrow beside GetPropertyValues. Note how GetPropertyValues was added to the right-side under Selected Services
- Check the checkbox for Execute on Load. This causes the Service to execute when the Mashup starts.
![Step 5 Add Services to Mashup Step 6.png Step 5 Add Services to Mashup Step 6.png](https://community.ptc.com/t5/image/serverpage/image-id/61752iB0EC09A3470A191B/image-size/large?v=v2&px=999)
7. In the Services Filter field, type QueryPropertyHistory.
8. Click the right-arrow beside QueryPropertyHistory.
9. Check the checkbox for Execute on Load.
![Step 5 Add Services to Mashup Step 9.png Step 5 Add Services to Mashup Step 9.png](https://community.ptc.com/t5/image/serverpage/image-id/61754iF08F5A2610124592/image-size/large?v=v2&px=999)
10. Click Done to close the pop-up. Note how the Services have been added to the Data tab in the top-right.
![Step 5 Add Services to Mashup Step 10.png Step 5 Add Services to Mashup Step 10.png](https://community.ptc.com/t5/image/serverpage/image-id/61753i539891628805A4BD/image-size/large?v=v2&px=999)
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.
- Under the Data tab, expand GetPropertyValues > Returned Data > All Data.
![Step 5 Value Display Step 1.png Step 5 Value Display Step 1.png](https://community.ptc.com/t5/image/serverpage/image-id/61755i783AC289D40889D5/image-size/large?v=v2&px=999)
- Drag-and-drop GetPropertyValues > serialNumber onto the Value Display Widget in the top section.
![Step 5 Value Display Step 2.png Step 5 Value Display Step 2.png](https://community.ptc.com/t5/image/serverpage/image-id/61756i22C71ADC1FE3EF9F/image-size/large?v=v2&px=999)
- On the Select Binding Target popup, select Data.
![Step 5 Add Value Display Step 3.png Step 5 Add Value Display Step 3.png](https://community.ptc.com/t5/image/serverpage/image-id/61757i4E900BACC654102F/image-size/large?v=v2&px=999)
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.
- Right-click the image below, then click "Save image as..." to download.
![Step 5 Image Step 1.png Step 5 Image Step 1.png](https://community.ptc.com/t5/image/serverpage/image-id/61758i044CFB23CE031249/image-size/large?v=v2&px=999)
- Click Browse > Visualization > Media.
![Step 5 Image Step 2.png Step 5 Image Step 2.png](https://community.ptc.com/t5/image/serverpage/image-id/61759iB48F95FEB56C4F4E/image-size/large?v=v2&px=999)
- Click + New.
- In the Name field, type pump-thumbnail.
![Step 5 Image Step 4.png Step 5 Image Step 4.png](https://community.ptc.com/t5/image/serverpage/image-id/61760i7385532D74A08782/image-size/large?v=v2&px=999)
- If Project is not already set, click the + in the Project text box and select the PTCDefaultProject.
- Under Image, click Change.
- Navigate to and select the pump-image.png file you just downloaded.
- On the navigation pop-up, click Open to close the pop-up and confirm the image selection.
- At the top of Foundation, click Save.
![Step 5 Image Step 9.png Step 5 Image Step 9.png](https://community.ptc.com/t5/image/serverpage/image-id/61761iC7EC2658F2130122/image-size/large?v=v2&px=999)
Change Image to pump
We will now update the Image Widget to display the ThingWorx Media Entity we just created.
- Return to the pump-dashboard Mashup.
- Click the Image Widget to select it, and ensure that the bottom-left Properties tab is active.
![Step 5 Change Image to Pump Step 2.png Step 5 Change Image to Pump Step 2.png](https://community.ptc.com/t5/image/serverpage/image-id/61762i132EA66686F46D54/image-size/large?v=v2&px=999)
- In the bottom-left Properties' Filter field, type SourceURL.
![Step 5 Change Image to Pump Step 3.png Step 5 Change Image to Pump Step 3.png](https://community.ptc.com/t5/image/serverpage/image-id/61765i26E902DFDBA1AA94/image-size/large?v=v2&px=999)
- For the SourceURL Property, search for and select pump-thumbnail.
![Step 5 Change Image to Pump Step 4.png Step 5 Change Image to Pump Step 4.png](https://community.ptc.com/t5/image/serverpage/image-id/61766iFD9A61CFAD416169/image-size/large?v=v2&px=999)
- Click Save.
Line Chart
Configure the Line Chart to display Property values changing over time.
- In the top-right Data tab, expand QueryPropertyHistory > Returned Data.
![Step 5 Line Chart Step 1.png Step 5 Line Chart Step 1.png](https://community.ptc.com/t5/image/serverpage/image-id/61767i1CE2D264EA9377AE/image-size/large?v=v2&px=999)
- Drag and drop QueryPropertyHistory > All Data onto the Line Chart Widget in the bottom-right Canvas section.
![Step 5 Line Chart Step 2.png Step 5 Line Chart Step 2.png](https://community.ptc.com/t5/image/serverpage/image-id/61768i1B802BC0F76C156E/image-size/large?v=v2&px=999)
- On the Select Binding Target pop-up, select Data.
![Step 5 Line Chart Step 3.png Step 5 Line Chart Step 3.png](https://community.ptc.com/t5/image/serverpage/image-id/61770i2F79D87088539CA9/image-size/large?v=v2&px=999)
- Ensure the Line Chart Widget is selected.
- On the Line Chart's Property panel in the bottom-left, in the Filter field, type XAxisField.
- For the XAxisField Property, select timestamp.
![Step 5 Line Chart Step 6.png Step 5 Line Chart Step 6.png](https://community.ptc.com/t5/image/serverpage/image-id/61772i9CA844DB6827A707/image-size/large?v=v2&px=999)
- In the Filter field, type LegendFilter.
- Check the checkbox for LegendFilter.
![Step 5 Line Chart Step 8.png Step 5 Line Chart Step 8.png](https://community.ptc.com/t5/image/serverpage/image-id/61773i447604D9E74AB2C9/image-size/large?v=v2&px=999)
- Click Save.
Verify Data Bindings
You can see the configuration of data sources bound to Widgets in the bottom-center Connections pane.
- 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.
![Step 5 Verify Data Step 1.png Step 5 Verify Data Step 1.png](https://community.ptc.com/t5/image/serverpage/image-id/61774iC14D574B499345EF/image-size/large?v=v2&px=999)
2. Also in the top-right Data tab, click QueryPropertyHistory.
- Confirm that the diagram shows it is bound to the Line Chart.
![Step 5 Verify Data Step 2.png Step 5 Verify Data Step 2.png](https://community.ptc.com/t5/image/serverpage/image-id/61775i227DA4EF9EAFBB9D/image-size/large?v=v2&px=999)
3. Click Save.
Step 6: Test Application
- Browse to your Mashup and click View Mashup to launch the application.
![Step 6 Step 1.png Step 6 Step 1.png](https://community.ptc.com/t5/image/serverpage/image-id/61776iEAACB5A9B4C4FC60/image-size/large?v=v2&px=999)
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.
![Step 6 Step 2.png Step 6 Step 2.png](https://community.ptc.com/t5/image/serverpage/image-id/61777iF8D5B6CA5C9DDBEA/image-size/large?v=v2&px=999)
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 6 Step 7.png Step 6 Step 7.png](https://community.ptc.com/t5/image/serverpage/image-id/61778i049BE8CF33B00301/image-size/large?v=v2&px=999)
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