Step 4: Use Collection Widget
At this point, you have created the following Entities:
- A Thing with data stored in an Info Table Property (columns defined by a Data Shape)
- A base Mashup (containing Gauge, LED Display, and Text Field Widgets) that displays an individual row of data from the table
Now, you need to use the Collection Widget to display this Mashup for every row of data in the table.
- On the ThingWorx Composer Browse tab, click Visualization > Mashups, + New
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.
- You want the "base" Mashup to generally be Static, while the "collection" Mashup should be Responsive to allow it to grow to an appropriate size.
8. From the top-left Widgets tab, drag-and-drop a Collection Widget onto the central Canvas area.
Access Mashup Data Service
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.
- The GetProperties Service of the cwht_thing is now shown on the right under the Data tab.
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
Configure Properties
In the Collection Widget's Filter Properties field in the bottom-left, enter mashup.
- This will limit the displayed Properties of the Collection Widget (in the bottom-left section) to only those containing the word "mashup".
2. For the Mashup Property, search for and select cwht_base_mashup.
- Choosing "cwht_base_mashup" lets the Collection Widget know which base Mashup to repeat in every Cell
3. In the MashupHeight field, enter 250 and hit the Tab keyboard key to apply the change.
- This Property changes the height of each Cell of the Collection Widget.
- Ensure the height is large enough to fit all of the Widgets.
4. In the MashupWidth field, enter 500 and hit the Tab keyboard key.
- This Property changes the width of each Cell of the Collection Widget.
- Ensure the is large enough to fit all of the Widgets.
5. In the Filter Properties field, enter uidfield.
6. In the UIDField drop-down, select first_number.
- The UIDField sets the unique identifier for the Collection Widget.
7. In the Filter Properties field, enter sort.
8. In the SortField drop-down, select first_number.
- SortField determines which sub-section of the Infotable to use for sorting purposes.
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.
- The point of this JSON is to relate the columns of the Infotable Property to the Mashup Parameters that we previously defined in the base Mashup.
{
"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.
Step 5: Next Steps
Congratulations! You've successfully completed the Organize Your UI guide, and learned how to:
- Create a Datashape to define columns of a table
- Create a Thing with an Info Table Property
- Create a base Mashup to display data
- Utilize a Collection Widget to display data from multiple rows of a table
Learn More
We recommend the following resources to continue your learning experience:
| Capability | Guide |
| Build | Application Development Tips & Tricks |
| Experience | ThingWorx Application Development Reference |
Additional Resources
If you have questions, issues, or need additional information, refer to:
| Resource | Link |
| Community | Developer Community Forum |
| Support | Collection Widget Help Center |
