- Create Your Application Guide UI Part 3
- Step 5: Add Widgets to Mashup
- Scenario
- Create the Mashup
- Add Labels
- Add TextBoxes
- Add Checkboxes
- Add Buttons
- Resize the Mashup
Create Your Application Guide UI Part 3
Step 5: Add Widgets to Mashup
At this point, you should have an understanding of how the Widgets in your Mashup relate to the data from devices you've connected via the ThingWorx platform.
Scenario
Now, let's try to imagine a real-world scenario. For this example, assume that you are in a company developing an IoT application utilizing ThingWorx Foundation.
Developer Role | Responsibility |
Edge Developers | Utilize the Edge MicroServer, Software Development Kits, or ThingWorx Kepware Server to connect devices and bring data into the platform. |
Backend Developers | Created Things, Thing Templates, and Thing Shapes to store and manipulate the data within ThingWorx Foundation. |
Frontend Developer | Tasked with taking the IoT data and creating an interface with which your users can interact to gain insight from the data. |
In this scenario, you are the Frontend Developer.
The Thing you imported previously represents those Edge and Backend Developers’ work. The data is all there. Specifically, let's assume that this Data Model represents a factory inventory system. You want to quickly build a GUI that is a Minimum Viable Product (MVP) to display the current counts of various products in your warehouse, while also allowing you to manually edit those counts if you receive a report that an IoT scanner in the warehouse has malfunctioned. Since this is a real factory, inventory is constantly increasing and decreasing as manufactured parts are completed or shipping orders are fulfilled. In this lesson, we'll simulate these changes by a 10-second-timer which will increment the counts until a shipping order has been fulfilled (100 total parts), at which point the current inventory count for that part will be reset.
Create the Mashup
Follow the subsequent steps to create an MVP GUI for the example scenario:
- Click Browse > VISUALIZATION > Mashups > + New.
- Keep the default of Responsive (with NO Responsive Templates chosen), and click OK in the pop-up window.
- In the Name field, enter MBQSMashup.
- If the Project field is not already set, search for and select PTCDefaultProject.
- At the top, click Save.
- At the top, click Design.
- On the left, click the Left Arrow to slide-back the navigation pane, leaving more room for the Mashup Builder.
- At the topleft on the Layout tab, for Positioning, check the radio-button for Static.
Add Labels
Follow the subsequent steps to add Labels that clarify GUI sections of the application.
- Select the Widgets tab, then drag-and-drop three Label Widgets onto the central Canvas.
- With the top Label Widget selected (by clicking on it), change the DisplayName to label-gears-count and hit the Tab key on your keyboard to lock in the modification.
NOTE: You can find the DisplayName and all other Widget Properties in the bottom-left of the Mashup Builder. Changing the Widget DisplayNames to recognizable values is highly recommended, as it assists with your logic inspection in the bottom-center Connections window.
3. With the newly-named label-gears-count still selected, type Gears Count in the LabelText field and hit the Tab key.
4. Click on the middle Label; then, in the bottom-left Widget Properties panel, change the DisplayName to label-pistons-count and LabelText to Pistons Count.
5. Similarly, change the bottom Label's DisplayName to label-wheels-count and LabelText to Wheels Count.
6. Click Save.
Add TextBoxes
Follow the subsequent steps to display some information on the various part-counts in our inventory.
- Drag-and-drop three Text Field Widgets onto the central Canvas.
- With the top Text Field Widget selected, change the DisplayName to textfield-gears-count and hit the Tab key.
- Change the middle Text Field's DisplayName to textfield-pistons-count, and hit the Tab key.
- Change the bottom Text Field's DisplayName to textfield-wheels-count, and hit the Tab key.
- Click Save.
Add Checkboxes
We want to display that inventory counts have been manually set when something went wrong, rather than have someone assume that the information is current and coming from an IoT sensor. This also allows us to flag any sensors that are experiencing issues.
Follow the subsequent steps to create checkboxes.
- Drag-and-drop three Checkbox Widgets onto the central Canvas.
- With the top Checkbox Widget selected, change the DisplayName to checkbox-gears-manual and the Label property to Gears Manually Set.
- Change the middle Checkbox's DisplayName to checkbox-pistons-manual and Label to Pistons Manually Set.
- Change the bottom Checkbox's DisplayName to checkbox-wheels-manual and Label to Wheels Manually Set.
- Click Save.
Add Buttons
After our manual count has been entered, we need to trigger storing it in the backend. We can do this with a Button Widget. In addition, it would be helpful to be able to update the changing counts in the Textboxes without having to reload the entire Mashup. Follow the subsequent steps to add Buttons.
- Drag-and-drop two Button Widgets onto the central Canvas.
- With the top Button Widget selected, change the DisplayName to button-manual-set, the Label to Manually Set Counts, and click-and-drag the right-side of the Button to expand its size.
- With the bottom Button Widget selected, change the DisplayName to button-manual-retrieve, the Label to Manually Retrieve Counts, and click-and-drag the right-side of the Button to expand its size.
- Click Save.
Resize the Mashup
Follow the subsequent steps to enable the Mashup to fit on a smartphone screen.
- Click-and-drag your Widgets around the Mashup such that they look roughly like the pictures shown above.
- Click-and-drag the right-side of the Mashup, pulling it to the left to reduce the horizontal size.
- Click-and-drag the bottom of the Mashup, pulling it up to reduce the vertical size.
- Click Save.
Click here to view Part 4 of this guide.
