Effective UI Implementation Part 2

[#1]

• Step 5: Collection Widget
• Step 6: Customize Collection
• Step 7: Detail Panel

Step 5: Collection Widget

A Collection widget is used to display information from a collection of Things. Similar to a Grid Widget, the Collection widget gives you complete control over how data is displayed by binding data to an embedded static Mashup.

In the first part of this step we will create a static Mashup with Parameters bound to its widgets. Next, we will configure a Collection widget to use the static Mashup we create. In the next step we will customize the Collection styling.

Create Static Mashup

1. Click the Browse tab on the far left of Composer, in the Visualizations section, click Mashups .
2. Click + New to create a Mashup.
3. Select Static Mashup, then click OK.
   
   
   
4. Name your Mashup TractorListFormat
5. If Project is not already set, click the + in the Project text box and select the PTCDefaultProject.
6. Click Save.
7. Click the Design tab
8. If Project is not already set, click the + in the Project text box and select the PTCDefaultProject.
9. In the Layout tab, under Container > Positioning, Click Static, then scroll to Container Size, and click Fixed Size
   
   NOTE: A Static Mashup maintains fixed widget sizes and spacing, as opposed to a Responsive Mashup that will dynamically change widget sizes and spacing to use the available window area.
   
   
10. Click the Width property and set it to 200 and the Height property to 60
    
    
    
11. In the lower left panel, click the Style tab and click the X to remove the default Style.

12. Click the + icon, then select DefaultImageBorderStyle to remove all styling.
    
    NOTE: The default Mashup styling is removed so it will not override the sidebar and parent Mashup styling.
    
    

13. Scroll to the Width property and set it to 200 and the Height property to 60

14. Click the Widgets tab and type label in the filter text box.
15. Drag and drop two Label Widgets onto the upper left of your static Mashup.
    
    
    

Add Parameters to Mashup

1. Select the Explorer tab then select the top level Mashup
2. Click Configure Mashup Parameters from the drop-down menu in the upper left of the Mashup canvas.
   
   
   
3. Click the Add Parameter button.
4. Type firstLine in the Name field and select a Base Type of STRING.
5. Click Add Parameter again and name this parameter secondLine also with a Base Type STRING.
   
   
   
6. Click Done to return to Mashup Builder.

 

Bind Parameters to Widgets

1. Click the drop-down in the upper left of the Mashup canvas, then select Configure Bindings
2. Click firstLine from the Properties list on the left.
3. Clicking the drop-down arrow and click Add Source to display the Mashup entities that can be bound to the Mashup parameter named firstLine.
   
   
   
4. Select the checkbox next to the top LabelText property.
   
   
   
5. Click Done to return to the Configure Bindings pop-up.
6. Click secondLine, then Binding Targets, and select the checkbox next to the bottom Label Text property, then click Done
7. Click Done to close Configure Bindings pop-up and return to Mashup builder.
   
   
   

   
   NOTE: The Mashup parameters and bindings are displayed in the Connections panel at the bottom.
   
   

8. Click Save before continuing to the next step.

 

Bind Data to Collection

1. Return to the main Mashup then drag and drop a Collection widget onto the top area of the left side bar.
2. In the Collection Properties panel, set the View property to Table
3. Scroll to the Mashup property, click the wand icon and browse to the name of the static Mashup created above.
4. Drag the All Data source from the data panel on the right onto the Collection widget, then click Data in the Select Binding Target pop-up.
   
   
   
5. Set UIDField property and SortField to SerialNumber.
   
   
   
6. Drag the All Data source from the data panel on the right onto the Collection widget, then click Data in the Select Binding Target pop-up.
   
   
   
7. In the Collection Properties panel, scroll to MashupPropertyBinding and click *Add
8. Enter the text below, then click Done:
   
   

    {
        "SerialNumber": "firstLine",
        "ModelNumber": "secondLine"
    }

   
   
   NOTE: This JSON property binds the SerialNumber and ModelNumber properties in the data source to the the firstLine and secondLine parameters in the embedded mashup

9. Save the Mashup and click View Mashup.

10. Test the Mashup and you will see the navigation panel on the left is showing data and is linked to the Google Map widget in the center.

Step 6: Customize Collection

The Collection uses default styling and no images. In this part of the exercise, we will replace the blue bar that indicates the selected row with a custom icon and modify the default styles so that the left panel's background color is shown.

Right-click on each of the images below to download and save them for use in the next step.

We will upload these images to create new Media entities and apply them to the Repeater widget.

1. Select the Browse folder icon on the far left of Composer, in the Visualization section click Media
2. Click the + New to create a new Media entity and enter a name for the un-selected tractor image.
3. Click Change in the Image section, then browse to the saved image.
4. Click Open, then Save.
5. Repeat these steps to create a Media entity for a selected tractor
6. Open the static TractorListFormat mashup that controls the Collection widget formating
7. Click and drag an Image widget onto the mashup
8. In the lower left panel, in the SourceURL property, click the wand icon to select the unselected tractor image.
9. Change both the Width and Height properties to 50 pressing Tab after each entry to record them.
   
   
   
10. Click the Explorer tab in the top left, click the top-most Mashup entity, then click the Style Properties tab
11. Cick the X in the Style property and select DefaultImageBorderStyle to remove all styling, then click Save
12. Click the More drop-down at the top of Composer and click Duplicate
    
    
    
13. Enter TractorListSelectFormat for the name and click Save then click the Design tab
14. Click on the tractor image, then, the lower left, click the wand icon in the SourceURL property and select the selected tractor image and Click Save
    
    
    
15. Open your original Mashup and click on the Collection widget in the Mashuo Builder canvas.
16. Scroll to the SelectedMashupName Property and click the + to select TractorListSelecteFormat.
    
    
    
17. Click Save for the Mashup, then View Mashup to see your Mashup with customized icons.
    
    
    

The default black text on green is a little hard to read. The steps below will change the text colors to make the data more readable.

1. Open the TractorListSelectFormat Mashup then click on the top Label widget to change the color of the text.
2. Click the Style Properties tab and expand Base and Label
3. In color property select yellow and select Bold in the font-weight property before clicking Save.
4. Select the other Label widget and assign a light grey color for the color then save the embedded Mashup.
5. Reload the runtime view of the Mashup to see the results.
   
   
   

Step 7: Detail Panel

The right sidebar has a simple Image of a tractor along with product-specific information shown in Gauges and Value Displays.

The right sidebar contains two tabs in a Tabs - Responsive widget. The tabs are used to selectively hide and display groups of functions and data. The orange button labeled "View Vehicle Specs" is a Navigation widget that opens a pop-up window with other detailed product information. The colored range indications on the right Gauge were created by configuring the gauges ValueFormatter property to use State Formatting.

Add Tab Widget

1. Open the original, main Mashup and enter tab in the Widget panel search field.
2. Drag and drop a Tabs widget onto the Right Sidebar.
   
   
   
3. Scroll to the Tab1Name property and enter Tractor Details.
   
   NOTE: This guide only covers configuring one of the two tabs added to the Mashup. Using the skills you've practiced thus far, feel free to add additional information to the tabs on your Mashup.
   
   
4. Uncheck the RoundedCorners property.
5. Click the Layout tab and click the radio button under Container > Orientation > Vertical

Add ValueDisplay Widgets

1. Type value in the Widget search box then click and drag a Value Display Widget onto Tab 1.
2. In the Property panel, scroll to the Label property and enter Serial Number
3. In the Data panel, expand Selected Row(s) then drag the SerialNumber property onto the Value Display widget and click Data when the Select Binding Target pop-up is displayed.
   
   
   
4. Drag another Value Display Widget onto the tab widget below to the first one and enter Name for the Label property.
5. Drag name from the Selected Row(s) onto the second Value Display and then click Data.
   
   NOTE: Be sure to select data sources under Selected Row(s) so that data displayed will correspond to the tractor selected from either the map or the left side menu.
   
   
6. Save the Mashup then click View Mashup to see all three panels working together to show data.

Add Gauges

1. Enter gauge in the Widget search box then click and drag a Gauge Widget onto Tab 1.
2. In the Properties panel, enter 3000 for the MaxValue property and RPM in the Legend property.
3. In the Data panel, expand Selected Row(s) then drag CurrentRPM onto the Gauge widget and click Data when the Select Binding Target pop-up is displayed.
4. Drag another Gauge widget onto the canvas next to the first one and enter MPH for the Legend property.
5. Drag CurrentSpeed from the Selected Row(s) onto the second Gauge, then click Data.
   
   
   

Click here to view Part 3 of this guide.