Community Tip - Did you get called away in the middle of writing a post? Don't worry you can find your unfinished post later in the Drafts section of your profile page. X
At this point, you have created the following Entities:
Now, you need to use the Collection Widget to display this Mashup for every row of data in the table.
2. Keep the default of Responsive with no Templates chosen, and click OK.
3. In the Name field, enter cwht_collection_mashup
4. If Project is not already set, search for and select PTCDefaultProject.
5, Click Save.
6. Click Design
7. On the top-left Layout tab, ensure that the default of Positioning > Responsive is selected.
8. From the top-left Widgets tab, drag-and-drop a Collection Widget onto the central Canvas area.
Click the + icon at the top-right to open the Add Data pop-up menu.
2. In the Entity Filter field, search for and select cwht_thing.
3. In the Services Filter field, enter getproperties.
4. Click the right arrow beside GetProperties to add the GetProperties Service to the right-side of the pop-up menu.
5. Click the Execute on Load checkbox
6. Click Done to close the pop-up menu.
7. On the top-right, expand GetProperties.
8. Drag-and-drop GetProperties > infotable_property onto the Collection Widget
9. On the Select Binding Target pop-up, click Data
In the Collection Widget's Filter Properties field in the bottom-left, enter mashup.
2. For the Mashup Property, search for and select cwht_base_mashup.
3. In the MashupHeight field, enter 250 and hit the Tab keyboard key to apply the change.
4. In the MashupWidth field, enter 500 and hit the Tab keyboard key.
5. In the Filter Properties field, enter uidfield.
6. In the UIDField drop-down, select first_number.
7. In the Filter Properties field, enter sort.
8. In the SortField drop-down, select first_number.
9. Check the SortAscending checkbox
10. n the Filter Properties field, enter mashupprop
11. Click Add, copy-and-paste the following JSON into the MashupPropertyBinding Property, replacing the existing curly braces {}, then click Done.
{ "first_number" : "first_number", "second_number" : "second_number", "third_number" : "third_number" }
12. Click Save, then View Mashup.
Notice that the base Mashup we previously created has been replicated multiple times, corresponding to each row of the Info Table Property.
As an extension exercise, go back into cwht_thing and add another row of data. Refresh the Collection Widget Mashup to see another instantiation of the base Mashup automatically added to display that new row.
A Mashup utilizing the Collection Widget dynamically expands to accommodate both the user and the available data.
Congratulations! You've successfully completed the Organize Your UI guide, and learned how to:
We recommend the following resources to continue your learning experience:
Capability | Guide |
Build | Application Development Tips & Tricks |
Experience | ThingWorx Application Development Reference |
If you have questions, issues, or need additional information, refer to:
Resource | Link |
Community | Developer Community Forum |
Support | Collection Widget Help Center |