A state definition is a collection of style definitions, along with rules for when to apply each style definition. The rule plus the style definition is a state.
In the HelloWorldPlayground Mashup, if the Gauge Widget goes to 10 and the Increment the Count button is clicked once again, the Gauge starts back at 0. This value change is displayed in the Line Chart when it is refreshed. Nevertheless, it would be helpful to have a way to show a user that they’re encroaching 10 and will have to restart, such as the Gauge changing colors in the section. This and many other uses is where State Definitions become useful and go hand and hand with Style Definitions.
First, let’s create Style Definitions to represent the changes in the count. The default Style Definition for a Gauge is the DefaultGaugeFaceStyle Style Definition. We can simply duplicate and update the new Style Definition for our own purposes.
Click Style Information.
The inside line of the Gauge Widget is very thin. As an additional exercise, update the Line Thickness property and/or Line Color to see the effect.
Now let’s create a State Definition that will use both the default Gauge Style Definition and the one we just created.
In the ThingWorx Composer, click the + New at the top of the screen.
Select State Definitions in the dropdown.
Click States Information.
|Operator||Less than (<)|
|Display Name||Under 10|
8. Click the Add State button to create the other states to match the below image:
9. Click Save.
You’ve now created a State Definition. If the value is below 10, the default Gauge format will be applied. Once the value reaches 10, notice the state-based changes you defined are displayed in the appearance of the Gauge.
Update HelloWorldPlayground Mashup to incorporate the State-based formatting.
Select the Gauge Widget in the Workspace pane and click the ValueFormatter property.
Choose Count_Property for the Dependent Field drop-down and select the GaugeCount State Definition that we just created.
Click Done and Save the Mashup.
Click View Mashup. If you used the color schemes mentioned, your new HelloWorldPlayground Mashup should look like this.
The Gauge now displays a visual indication for when the count is approaching 10.
To further enhance the user experience, you could add another color that warns the user in advance before the threshold is reached. For this example, we will update our State Definition and create a Style Definition that uses the color yellow.
Duplicate the UpdatedGaugeFaceStyle Style Definition.
Click Style Information.
Set the Secondary Background Color property to a darker yellow (color code #D2CD0E is used in this example).
Open the States Information tab of the GaugeCount State Definition.
Update the State Definition to fit the image below and utilize the Style Definition we just created:
The State and Style Definition you just implemented enables the Gauge to show users when the data property value is approaching the defined threshold. To increase the effectiveness of your application, you can define Event Handling processes that alert the user.
In this section we will explain two ways to handle the Event when the count is nearing the threshold value. One, with a Service that gets called whenever the Button Widget is clicked, and the other by using Expression Widgets.
In this part of the exercise, we will configure the Mashup so that once the Count hits 9, we will display a more drastically changed Gauge.
The below sections are based on the HelloWorldPlayground Mashup.
Click the Paste button in the toolbar. If you Gauge Widgets will not go on top of one another, set the Z-index value of the new Gauge to a smaller number and set the Container Layout Position to static.
NOTE: You just copied and pasted a Widget inside of a Mashup. While the Mashup retains the same property configurations and style definitions, the pasted Gauge will not have the same connections as the original Widget. You still need to define the inputs/outputs. For this new Gauge, we will only need to connect to the GetPropertyValues service.
6. Add the UnderWarningValue and WarningValueReached Services with the Execute on Load checked for both.
7. Click Done.
Drag and drop the UnderWarningValue service result to the Visible property.
Drag and drop the WarningValueReached service result to the Visible property.
This will ensure the other Services are run whenever the Increment the Count button is clicked.
The UnderWarningValue service will return true if the Count property is under 9. The WarningValueReached service will return true if the Count property is equal to or above 9. The result sent to the original Gauge controls whether the Gauge is visible to users or not.
You could choose to implement a pop-up, alert, or another visual indicator to the UI that would inform your application users.
7. Select the new Gauge in the Mashup or Explorer pane.
8. Clear the GaugeFaceStyle Style Definition and replace it with the DefaultChartStyle11.
9. Click Save and View Mashup to see the changes.
Expression Widgets are a great asset to handle information being passed around inside of a Mashup and also events occurring within a Mashup. In this scenario, we will use the Count property value to create changes in the UI.
In the Functions Tab in the bottom right. Add a new function.
Select Data, then the Count_Property from the GetPropertyValues service.
NOTE: Move the Gauges from on top of one another if necessary to set values and parameters. The first Expression will show the newest Gauge Widget when Count hits 9. The other Expression Widget will show the original Gauge based on the evaluation of the first Expression Widget results.
Click the Increment the Count button to see how the display changes in the Mashup at runtime.
The next guide in the Customize UI and Display Options to Deploy Applications learning path is Object-Oriented UI Design Tips.
If you have questions, issues, or need additional information, refer to:
|Community||Developer Community Forum|
|Support||Style & Themes Help Center|