Connect IoT data from devices to Widgets that display in your application UI.
GUIDE CONCEPT
This project will demonstrate how to bind a data source to a Widget.
Following the steps in this guide, you will be able to show state-based changes resulting from data updates.
We will teach you how to essentially connect your backend data to the Widgets in your Mashup. ThingWorx facilitates this process with built-in functionality.
YOU'LL LEARN HOW TO
- Bind data to Widgets in ThingWorx Mashup
NOTE: This guide's content aligns with ThingWorx 9.3. The estimated time to complete this guide is 30 minutes.
Step 1: Completed Examples
Download the Complete Data Binding Example using file BindDataEntities.zip attached to this guide. Within this file you, you will find Entities referenced in this lesson, including a finished application. Import and utilize this file to see a finished example and return to it as a reference if you become stuck during this guide and need some extra help or clarification.
Keep in mind, this download uses the exact names for Entities used in this tutorial. If you would like to import this example and also create Entities on your own, change the names of the Entities you create.
Step 2: Bind Data to Widget
In order to display data from connected devices, each Widget must be connected to a data source. You should already be familiar with how to find the Widgets in the top left panel of a Mashup screen.
Mashup Areas
In the top right of the screen in a Mashup Entity is the Data Panel. This is where Entities and Services are used to bring in data and added functionality. This area also includes the Session Tab, which includes data that is being stored in the session. You can learn more about that in the Create Session Parameters guide. You can also filter for specific Properties.
In the lower right of the screen in a Mashup Entity is the Data Properties Panel. This is where you can configure how your Service calls will react to different Events. For example, you might want to perform a call to a Service as soon as another Service call is complete. You'll do that in this section. You will also notice the Functions Tab. This table enables you to create custom functionality for you Mashup and Widgets, such as navigating to a different Mashup on the click of a button.
In the lower left of the screen in a Mashup Entity is the Widget Properties Panel. This is where you'll be able to not only customize your Widget, but connect data directly from Services and other Widgets. You will also notice the Style Properties Tab. This will provide access to change the styling and themes used for a Widget. You can also filter for specific Properties.
In the bottom middle of your screen, you'll notice the Bindings Panel. This panel shows you where your connections are in reference to Widgets, Services, and any Events that are being used to connect them. Whenever you have a problem with thinking about the flow of your Mashup, look down to this panel to get a quick idea. You'll also notice the Reminder Tab in this area. This tab just helps with things you might have forgotten to do when setting up your data binding, such as setting the display field for a Widget.
Let's now move forward with setting up our data binding.
Add Service
- Open the HelloWorldPlayground Mashup. Drag and drop the Grid Advanced Widget to the left-hand column of your Canvas.
NOTE: If a pop-up appears about adding a Panel, choose Yes.
2. Click + in the Data panel.
3. Search and select the HelloWorldData Data Table from the search bar in the top left of the home screen.
4. Search for the GetFirstEntry Service and click the blue arrow. The GetFirstEntry service is part of the DataMagicians.XML file you imported.
5. Check the Execute on Load checkbox. This makes the page automatically load with content for a Widget.
6. Click Done.
Bind Data to Widget
We will bind data to a Widget, but also make the Widget editable. When it comes to making the field Editable, keep in mind any connections or Entities involved. In this case, the World field is attached to an Entity.
- In the Data panel, expand the Returned Data section. Drag and drop the All Data field of the GetFirstEntry Service to the Grid Advanced Widget.
- A pop-up will appear to select the binding target, select Data.
In the Widget Properties panel, check the checkbox for IsEditable. This will allow users to edit the data in the Property fields.
Select the Configure (Gear) button. The Configure Grid Columns window will open.
Update any fields you would like hidden (for instance, uncheck the box next to timestamp and key).
Click on source field. Check the Editable checkbox at the bottom.
- Click Done to close the pop-up.
Data Panel Buttons
There is an assortment of helpful buttons in the Data panel to make our lives easier.
Top Row of Buttons
The + button that you used before adds more Entities as a resource to make Service calls. The circlular button next to it provides a reload functionality. This is useful when you've made a change to a Service and would like for it to appear here. For example, adding a new parameter to a Service call.
Buttons by Entity
The i button provides information and access to the Entity in question. The Add Service button adds a Service that belongs to the same Entity. This will definitely help with saving time. The last button is the Delete button. This will delete the Entity from the list of resources that can make Service calls.
Buttons By Service
The only button is the Delete button. This will delete the Service from the list of Service calls an Entity has available.
Adding More Functionality
Click the Add Service button on the HelloWorldData Entity in the Data pane.
- Search for the UpdateDataTableEntry Service and click the arrow to select it.
- Leave the Execute on Load checkbox unchecked and click Done.
Deselect the Execute on Load option if you would like the page to load with content in response to user input, rather than automatically at startup. - Click on the UpdateDataTableEntry Service, then click on the Data Binding button in the bottom right.
- Click the arrow next to the Values Property under Parameters. Click Add Source.
- When the list of Widgets appear, click on the Editedtable of the Grid Advanced Widget that we added. Click Next and Done.
- Select the Grid Advanced Widget on your canvas. Drag and drop the EditCellCompelted property onto the UpdateDataTableEntry service.
NOTE: The columns returned by a data service are shown under the All Data section of the data service. They are outbound bindable, indicated by the outward facing arrows. When a data service All Data or individual column is bound, the arrows become filled in. You can also bind the data from one Widget to another.
8. Click Save and View Mashup.
You have just bound data from a service to a Widget. There are many different Widgets, and the process for binding data to a Widget is often similar. Within Composer, you can simply drag and drop to bind configurations for Events and Properties.
TIP: As, an extension to this lesson, edit the Property Display Widget to update the entry in the HelloWorldData DataTable. Editing the name of the World will result in no entries being updated. To add or update an entry when you update the Name property, used the AddOrUpdateDataTableEntry service instead of UpdateDataTableEntry.
Step 3: Next Steps
If you have questions, issues, or need additional information, refer to:
| Resource | Link |
| Community | Developer Community Forum |
| Support | Help Center |
