• Basic Mashup Widgets Guide Part 3
• Step 5: Gauge
• Step 6: Grid Advanced
• Step 7: Next Steps

Basic Mashup Widgets Guide Part 3

Step 5: Gauge

A Gauge is best for displaying a quickly readable approximate value.

1. Select the Widgets tab in the uppper panel of the left dock, then enter gauge inside the Filter field in the top left.
2. Drag-and-drop the Gauge widget onto the bottom-center container.

   

3. We will now bind the Slider to the Gauge. Click the Slider Widget in the top-right Container.
4. Click the drop-down arrow on the left side of the Slider widget.
5. Click and drag the Value property listed in the Slider drop-down onto the Gauge widget.

    

6. Click the # Data property that is available from the Select Binding Target pop-up.

    

7. Click Save to save your Mashup.
8. Click View Mashup then adjust the slider to the left to see the changing value shown on the widget.

   

Many properties are available that give control over how the Gauge widget will be displayed. Many properties can be changed both statically when designing the mashup, and dynamically in response to changes in property values.

Bindable

Static

Step 6: Grid Advanced

A Grid Advanced widget is used to display data to a mashup user in a table

1. Select the Widgets tab in the uppper panel of the left dock, then enter grid inside the Filter field in the top-left.
2. Drag-and-drop the Grid Advanced widget onto the top-left container on your Mashup that already has the Button Widget.

Add Data Source

Before you can customize the Grid display, you must first bind an Infotable to the Grid's Data property. In this example we will use the QueryImplementingThingsWithData Service to bind a group of Things created with the same Template.

We have created a file with sample entities for this exercise.

1. Download the attached demoTractors.xml.
2. Click Import/Export in the lower left of Composer, then select Import

    

3. Click From File in the drop down, then Browse.
4. Browse to the demoTractors.xml file and click Open.
5. Click Import, then Close after entities are successfully imported.
6. Click the green + button in the Data tab on the right side of the Mashup Builder window.
7. In the Select Entity panel click Thing Templates from the drop down.

    

8. Scroll through the available Thing Templates and select the Connected Tractors Template that was imported.
9. Enter query into the filter text box then click the arrow to the right of QueryImplementingThingsWithData.
10. Click the Execute on Load check box, this option will execute the QueryImplementingThingsWithData Service when the Mashup is loaded.

     

11. Click Done.
12. Click the arrow icon to expand QueryImplementingThingsWithDate, and Returned Data.
13. Click and drag All Data onto the Grid widget.

     

14. Click Data in the Select Binding Target pop-up.

     

NOTE: The Grid widget now shows Property names in the column headers. 

15. Click the drop down in the upper left of the Grid widget, then click Configure Grid Columns to show the Configure Grid Columns pop-up.

16. Uncheck the check box next to the property names in the left-hand panel that you don't want shown in the Grid.

NOTE: You can drag and drop the property names to change the display order. You can customize Column names and formatting by making changes in this window.

17. Click Done when you are satisfied with the column formatting options.

18. Click Save to save your Mashup.

19. Click View Mashup.

In addition to properties that give control over how a Grid widget will be displayed, the scroll position of a Grid can be read in the CurrentScrollTop property and can be set with the ScrollTop property.

Bindable

Static

Widget Events

Step 7: Next Steps

Congratulations on completing the guide!

The next guide in the Customize UI and Display Options to Deploy Applications learning path is Define Your UI Style. 

If you have questions, issues, or need additional information, refer to: