Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Displaying Computed Properties
A very common feature used in LightSwitch applications is computed properties, which allow you to calculate a value only when necessary, in-memory, and their value isn't saved into the data source. These very efficient properties are useful for showing the results of combining other properties in a table. Although screens in the Silverlight desktop client automatically handle and display computed properties, this isn't true in the HTML client, so you need to write some JavaScript code. Let's start by editing the Order entity of the sample application, adding a property called Taxes, of type Money, and a computed property called TotalAmount, also of type Money, as shown in Figure 17.
)
Figure 17 Adding a computed property to the Order entity.
On the server side, you edit the Compute method of the property as follows:
Private Sub TotalAmount_Compute(ByRef result As Decimal)
' Set result to the desired field value
result = Amount + Taxes
End Sub
At this point, you need a way to handle this within screens of the HTML client. Follow these steps for both the Add Edit Order screen and the Add Edit Customer screen (for the latter, you must use the Rows Layout > Orders tab at the bottom of the Screen Designer):
- In the Screen Designer, click Add Data Item.
- Select Local Property, not required, and specify Money as the data type. Name the property TotalAmount (see Figure 18).
- Drag the property from the bar on the left onto the Screen Designer, between Taxes and Customer.
- Replace the Money Editor control with the Money Viewer control.
- With the property still selected, in the Properties window click Edit > PostRender Code. PostRender is an event raised after the element in the underlying DOM has been rendered on the user interface, and before jQuery Mobile expands it.
- At this point, the JavaScript code editor appears. Enter the code shown in Listing 1 (comments follow the code).
)
Figure 18 Adding a local property to handle a computed property.
Listing 1—Calculating the result of a computed property.
myapp.AddEditOrder.TotalAmount_postRender = function (element, contentItem) {
// A simple function that calculates
// the sum of two values.
function updateTotalAmount() {
contentItem.screen.TotalAmount =
contentItem.screen.Order.Amount +
contentItem.screen.Order.Taxes;
}
// force the entity to be updated
contentItem.dataBind("screen.Order.Amount", updateTotalAmount);
contentItem.dataBind("screen.Order.Taxes", updateTotalAmount);
};
postRender takes two arguments: element and content Item. The element argument represents the HTML/DOM element for the control showing the value. contentItem represents the view model for the active data object, with all the information about its state and dependencies.
The updateTotalAmount function returns the sum of Amount and Taxes; both are referenced by accessing the Order entity instance exposed by the screen property of contentItem. Using the dataBind method is necessary because it allows an invocation to updateTotalAmount to reflect changes based on Amount and Taxes values.
Figure 19 shows how the HTML client displays the result of our implementation of the computed property.
)
Figure 19 Showing the result of the computed property.
This example has given you an idea of how to write JavaScript code in the HTML client. For more about this specific topic, read the blog post from the LightSwitch team's Joe Binder.