cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

We are working to address an issue with subscription email notifications. In the meantime, be sure to check your favorite boards for new topics.

Create Your Application UI Guide Part 5

100% helpful (2/2)

 

Create Your Application Guide UI Part 5 

 

Step 7: Test Your GUI

 

At this point in the lesson, your Mashup now contains:

  • Graphics to represent data
  • Data
  • Logical connections between the graphical elements and the data

 

Run Application

 

Execute the following steps to test that your application works as expected.

  1. Click the View Mashup button at the top.
    • You may have to disable your pop-up blocker to load the Mashup in a new browser tab.
IoTProductMgmt_0-1658776250298.png

 

2. Wait and observe the Mashup for at least 20 seconds, clicking the Manually Retrieve Counts button regularly.

NOTE: The values in the Mashup will increase roughly every 10 seconds, after you press the button to manually retrieve them. This happens because the Thing you imported earlier is simulating data and the work already done by the Edge and Backend Developers in this scenario. In this simulation, different production lines are continually producing new inventory, and that information is being fed into ThingWorx Foundation. As the count for each production line reaches 100, the batch is shipped out, and the count resets to 0 for the next iteration.

IoTProductMgmt_1-1658776250300.png

3. Check the Gears Manually Set Checkbox, change the Gears Count Text Field to read 7, and click the Manually Set Counts button. After 10+ seconds have passed, click the Manually Retrieve Counts button again.

NOTE: This simulates a situation where an IoT sensors in the inventory warehouse has failed. Maybe it's over or under-counting inventory. Maybe there's a network issue. Maybe the sensor has simply stopped working entirely. Regardless, the warehouse floor has contacted a user of your GUI, and asked them to manually set the inventory to the correct amount. Performing Step 4 is all that is required to do so. As long as the Gears Manually Set checkbox is active, the inventory does not increase on the 10 second timer. This is to prevent a malfunctioning sensor from providing incorrect data to your GUI.

IoTProductMgmt_2-1658776250301.png

4. Uncheck the Gears Manually Set Checkbox and click Manually Set Counts.

NOTE: The Gears Count starts increasing again after 10 seconds have passed. Remember to click the Manually Retrieve Counts button to see this change. This represents the previously-malfunctioning IoT sensor having been repaired.

IoTProductMgmt_3-1658776250301.png

 

Spend some time interacting with your Mashup GUI to get a better sense of its functionality. For the purposes of this exercise, this is a Minimum Viable Product. After testing it and getting feedback from your users, you would likely make further enhancements.

 

Collect Feedback

 

When testing your GUI, it is a best practice to collect feedback from users regarding your design, so that you can improve the experience with your application.

Example User Feedback

Possible Resolution

Manually Set Counts button is too easy to accidentally press.

Implement a Confirmation pop-up.

Manually Retrieve Counts button is not ideal, should automate

Remove the manual button and implement auto-update functionality instead.

Manually Set Checkboxes have confusing names.

Change the text to read Disabled, indicating that the sensor-input is being ignored.

User wants to use your GUI on their smartphone and on a desktop computer.

Re-implement the GUI using a Responsive (rather than Static) Mashup, so that there isn’t as much dead space on larger-resolution screens.

User wants a visual indication of each inventory line amount at which the pallet is shipped out.

Instead of using TextBoxes to show the current inventory counts, you could implement them as Gauges, showing a minimum and maximum amount that is easy to see at-a-glance.

 

Now that we've gotten some feedback, let's implement one such change-request as an example.

 

Enhance your GUI

 

Set up GetProperties to automatically update whenever data changes instead of using a button to manually retrieve the data.

  1. Close your MVP Mashup browser-tab and return to the Mashup Builder.
  2. Click the button-manual-retrieve Widget to select it.
    IoTProductMgmt_4-1658776250302.png

     

  3. Hit your keyboard's Delete key.
    IoTProductMgmt_5-1658776250302.png

     

  4. Click Yes in the Remove the selected widgets? pop-up window.
    IoTProductMgmt_6-1658776250307.png

     

  5. Click the green </> button beside Things_MBQSThing in the top-right Data tab.
    IoTProductMgmt_7-1658776250308.png

     

IoTProductMgmt_8-1658776250309.png

6. In the Services Filter field, type getprop.

7. Click the right-arrow beside GetProperties. Be sure to select GetProperties, not GetPropertyValues.

8. Check the Execute on Load checkbox.
IoTProductMgmt_9-1658776250311.png

9. Click Done.
IoTProductMgmt_10-1658776250312.png

10. In the Data tab on the top-right, expand the newly-added GetProperties Service.
IoTProductMgmt_11-1658776250313.png

11. Drag-and-drop Gears_Count onto textbox-gears-count.
IoTProductMgmt_12-1658776250316.png

12. On the Select Binding Target popup, click Text.
IoTProductMgmt_13-1658776250317.png

13. On the Confirm Binding Replace pop-up, click Yes.

14. Repeat steps 11-13 for Pistons_Count and Wheels_Count onto their respective TextBox Widgets.

15. Drag-and-drop Gears_Count_Manually_Set onto checkbox-gears-manual.

16. On the Select Binding Target popup, click State.

17. On the Confirm Binding Replace pop-up, click Yes.

18. Repeat steps 15-17 for Pistons_Count_Manually_Set and Wheels_Count_Manually_Set onto their respective Checkboxes.

19. Click the GetProperties Service to select it.
IoTProductMgmt_14-1658776250321.png

20. In the bottom-right Data Properties section, check the Automatically update values when able box.
IoTProductMgmt_15-1658776250322.png

21. Click Save.

22. Click View Mashup.
IoTProductMgmt_16-1658776250323.png

 

You have now enhanced your MVP Mashup based on user feedback. The Counts in each TextBox will automatically update whenever there is a change in the Property values, as requested.

ThingWorx Foundation provides a platform that allows you to quickly create a GUI for your IoT application in an extremely flexible and agile manner. The options to continue to improve your GUI are entirely up to you.

 

Step 8: Next Steps

 

Congratulations! You've successfully completed the Create Your Application UI guide, and learned how to:

  • Create new Mashups
  • Choose a Static or Responsive layout
  • Add Widgets to your Mashup
  • Bind data Services to Widgets in your Mashup
  • Create a functional GUI with applied usage of Widgets and Service

 

The next guide in the Customize UI and Display Options to Deploy Applications learning path is Basic Mashup Widgets

 

Learn More

 

We recommend the following resources to continue your learning experience:

Capability

Guide

Build

Data Model Introduction

 

Additional Resources

 

If you have questions, issues, or need additional information, refer to:

Resource

Link

Community

Developer Community Forum

Support

Mashup Builder Support Help Center

 

 

Version history
Last update:
‎Nov 18, 2022 04:52 PM
Updated by:
Contributors