Create Your Application UI Guide Part 2

[#1]

• Create Your Application Guide UI Part 2
• Step 4: Bind Data to Widgets
• Import an Entity
• Retrieve Data
• View Data Connections

Create Your Application Guide UI Part 2 

 

Step 4: Bind Data to Widgets

Mashup Data Services allow you to access IoT data so you can push data to the platform's backend as well as pull data into the Mashup itself. In the table below, we describe some common Mashup Data Services that enable that functionality:

Service Name	Description
GetProperties	Pulls in a particular Thing's Properties, as well as the associated current values contained within those Properties. GetProperties has an option to automatically update the Mashup whenever a Property value changes.
GetPropertyValues	Pulls in a particular Thing's Properties and their associated current values. However, it does so in an All Data grouping, opening the possibility of assigning all Properties to the same Widget. This can be helpful with some Widgets, such as the List Widget.
SetProperties	Pushes a value from some Widget (Checkbox, TextBox, etc.) into the Property of a Thing.

NOTE: Using a combination of a "Get" and "Set" Mashup Service establishes a bidirectional communication between the Mashup and the backend IoT data storage.

Import an Entity

In order to focus on the Mashup Builder in this lesson, we have created a Thing for you to download and import. This Thing has predefined Properties and associated Values which will simplify the demonstration of binding data to Widgets in subsequent steps.

1. Download and unzip the attached MBQS_Entities.zip file.
2. In the bottom-left, click the "up/down arrows" for Import/Export, then Import.
   
3. In the Import pop-up window, click Browse.
   
4. In the OS's pop-up, navigate-to, select, and open the MBQS_Entities.twx file you downloaded earlier.
   
5. Click Import.
   
6. Click Close.

Retrieve Data

You now have a Thing called MBQSThing from which you can retrieve data. To demonstrate this, we'll use the GetPropertyValues Service.

1. At the top-right of Mashup Builder, click the Data tab.
   
2. Click the + symbol.
   
3. In the Add Data pop-up window's Entity filter field, type mbqs.
   
4. Select the MBQSThing.
   
5. In the Services Filter field, type getprop.
   
6. Click the right arrow to select GetPropertyValues.
• The GetPropertyValues Service for MBQSThing has now been added to the Selected Services section on the right side of the Add Data pop-up window.
7. Check the box for Execute on Load under Selected Services.
• Checking this box causes the GetPropertyValues Service to execute as soon as the Mashup is loaded.

8. Click Done.

       9. At the top, click Save.

• Note how the GetPropertyValues Service now appears in the top-right under the Data tab.

View Data Connections

In the top-left of the Mashup Builder, click the Explorer tab, select the Mashup itself, and you can see the connections between the Mashup and the Data sources.

Mashup Builder Section	Description
Data	Previously empty, now has a reference to the GetPropertyValues Service of the MBQSThing.
GetPropertyValues	On the Data tab, click GetPropertyValues. The Connections window in the bottom-center will update.
Bindings	Shows the logical flow of the Mashup. In this instance, it shows how GetPropertyValues is called from the Event triggered by the Mashup being Loaded in a web browser. This means that all Properties of the MBQSThing will be available to the Mashup as soon as your UI is opened.

Bind Widget to Property

Follow the steps below to place a Widget in the Mashup and bind the Property named Gauge_Value (of MBQSThing) to it.

1. On the left-side of the Mashup Builder, select the Widgets tab.
2. In the Filter Widgets search box, type gauge.
3. Drag-and-drop a Gauge Widget onto the central Canvas area.
4. On the right-side, expand GetPropertyValues > Returned Data > All Data.
   • There is a clear left arrow pointing away from the Gauge_Value Property. This indicates that this Property is to be used to set the value on something else. If the arrow had been pointing towards the Gauge_Value Property, that would indicate that it was ready to accept an external value. The clear status of the arrow indicates that it has not yet been tied to anything.

       5. Drag-and-drop MBQSThing > GetPropertyValues > Returned Data > All Data > Gauge_Value onto the Gauge Widget in the central Canvas area.

         6. On the Select Binding Target pop-up, select Data.

      7. At the top, click Save.

      8. Click View Mashup.

• You must enable pop-ups in order to view the Mashup in a new tab.

In your new Mashup, notice that the Gauge has been set to the Gauge_Value default value of 25. In a real-world scenario, you would likely utilize an IoT sensor that would report back to the Thing storing the value. When the Mashup loads, that value would be set to the real-world sensor data value.

In the next few steps, you will build a GUI using several different Widgets and Services.

Click here to view Part 3 of this guide.