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

Community Tip - Did you know you can set a signature that will be added to all your posts? Set it here! X

Organize Your UI with the Collection Widget Part 2

No ratings

 

Step 3: Create a Base Mashup

 

Now that you have some data, you need to create and configure a Mashup to display the data.

 

Using Mashup Parameters, the Collection Widget will replicate the base Mashup multiple times, correlating to each row of data in the Info Table Property.

 

  1. On the ThingWorx Composer Browse tab, click Visualization > Mashups, + New

 

13-ocw-mashups.png       

 

   2. Keep the default ofResponsive(without selecting any Templates), and click OK

 

01-uiv92-new-mashup-popup.png

 

 

   3In the Name field, enter cwht_base_mashup.

 

   4. If Project is not already set, search for and select PTCDefaultProject.

 

   5. Click Save.

 

14-ocw-new-mashup.png 

Add Widgets to Design

 

  1. At the top, click Design.

TIP: You can click the left arrow on the divider between the Browse left-navigation and the Mashup Builder to minimize the navigation and provide more room for the Mashup Builder itself.

 

15-ocw-design.png     

   

     2.  On the Layout tab at the top-left, select Positioning > Static.

You generally want the base Mashup to be "Static" so that you know the size of the cells which  the Collection Widget will replicate.

 

19-ocw-positioning-static.png

   

   

     3. From the top-left Widgets tab, drag-and-drop a Gauge Widget onto the central Canvas area.

 

03-htcw-gauge.png  

 

     4. Drag-and-drop an LED Display Widget onto the central Canvas area.

 

04-htcw-led.png     

 

    5. Drag-and-drop a Text Field Widget onto the central Canvas area

 

06-drag-drop-text-field.png 

 

Reduce the Mashup Size

 

  1. At the top-left on the Explorer tab, select the Container.

 

07-explorer-select-container.png    

 

      2. In the central Canvas area, click-and-drag the far-right side of the container to reduce its horizontal size

 

08-reduce-horizontal-size.png    

 

     3. Click-and-drag the bottom of the container to reduce its vertical size

 

09-reduce-vertical-size.png 

Create Mashup Parameters

 

  1. On the top-left Explorer tab, select the Mashup itself.

    • A drop-down menu indicator will appear in the top-left of the Mashup.

 

10-select-mashup.png 

     

      2. Click the top-left drop-down menu to reveal the Mashup options

 

16-ocw-mashup-dropdown.png    

 

     3. Select Configure Mashup Parameters to open the Configure Mashup pop-up menu

 

01-cwv92-config-mashup-params-popup.png      

 

    4. Click Add Parameter three times

 

02-cwv92-three-add-params.png    

      5. For the Name fields, enter first_number, second_number, and third_number.

 

      6. Change the Base Type to NUMBER for all three Parameters

 

03-cwv92-param-names.png

 

 

    7. Click Done to close the Configure Mashup pop-up menu

 

Bind Mashup Parameters to Widgets

 

  1. Click the Mashup's drop-down menu in the top-left to expose the options again.

    • There are now additional options for first_number, second_number, and third_number.

 

17-ocw-new-mashup-params.png

 

   

     2. Drag-and-drop first_number onto the Gauge Widget

 

64-cwht-bind-gauge.png 

   

      3. Select Data on the Select Binding Target pop-up menu of the Gauge Widget.

 

      4. Drag-and-drop second_number onto the LED Display Widget.

  • You may have to first reselect the Mashup itself to reveal the Mashup's drop-down menu to access the second_number Mashup Parameter.
  • Remember that you can easily select the Mashup itself through the Explorer tab.                       

     

      5. Select Data on the Select Binding Target pop-up menu of the LED Display Widget.

 

      6. Drag-and-drop third_number onto the Text Field Widget.

 

      7. Select Text on the Select Binding Target pop-up menu of the Text Field Widget.

 

      8. At the top, click Save.

  • You can expand the Connections window at the bottom and select the Mashup itself to confirm that all three Mashup Parameters have been correctly bound to each Widget.

 

       9. Click the Right Arrow on the far-left of the Mashup Builder to re-expand the Browse navigation menu.

 

18-ocw-mashup-saved.png 

 

 

Click here to view Part 3 of this Guide.

Version history
Last update:
‎Mar 07, 2023 02:18 PM
Updated by:
Contributors