Apr 11

Written by: Michael Washington
4/11/2013 9:43 PM 

The current version of the LightSwitch HTML Client does not expose the computed properties created at the Entity level. Here are a few methods you can use.

In LightSwitch, we can create a computed column and use the following code for the result:

 

        partial void OrderTotal_Compute(ref decimal? result)
        {
            decimal dOrderTotal = 0.0M;
            // Get OrderDetails that have products
            var colOrderDetails = from OrderDetails in this.FlowerShopOrderDetail
                                  where OrderDetails.FlowerShopProduct != null
                                  select OrderDetails;
            foreach (var order in colOrderDetails)
            {
                dOrderTotal = dOrderTotal + (order.Quantity * order.FlowerShopProduct.Price);
            }
            result = dOrderTotal;
        }

 

When we consume the Entity in the LightSwitch Silverlight client…

The value shows.

However, when we create a page with the LightSwitch HTML Client we don’t have access to the computed property.

 

Using JavaScript

We can create the computed property using JavaScript.

 

First, we Add Data Item to the Visual Studio LightSwitch HTML Client screen.

We add an Integer property to the screen called TotalOfOrders, and we drag it to the screen layout.

We click on the screen element, and in the Properties, we select Edit PostRender Code.

We use the following code:

 

myapp.AddEditFlowerShopOrder.NumberOfDetails_postRender = function (element, contentItem) {
    function updateTotal() {
        // Compute the total for the Order
        contentItem.screen.TotalOfOrders =
            TotalOrders(contentItem.screen.FlowerShopOrderDetail);
    }
    // Set a dataBind to update the value when the collection changes
    contentItem.dataBind("screen.FlowerShopOrderDetail.count", updateTotal)
};
// Function to compute the total for the Order 
function TotalOrders(OrderDetails) {
    // Start with 0
    var TotalAmountOfOrders = 0;
    // Get the data for the collection passed
    var OrderDetail = OrderDetails.data;
    // Loop through each row
    OrderDetail.forEach(function (order) {
        // Add each row to TotalAmountOfOrders
        TotalAmountOfOrders = TotalAmountOfOrders +
            (order.Quantity * order.FlowerShopProduct.Price);
    });
    // Return TotalAmountOfOrders
    return TotalAmountOfOrders;
}

 

 

When we run the application, the value will now show.

Note: in this example we only detect that the count of the records has changed. If for example, only the price changed, you would expect that the computed property to change, it would not. Also, if the list were a paged list and there were more records than the current page setting (the default is 45 records per page) it would not update properly.

However, in this example we return the user to the main screen after making any change, when they return to this screen the value is always properly updated.

 

Using WCF RIA Service

The limitation with the method above is that you would not be able to query or sort on the computed value when used in a collection. A WCF RIA Service resolves any limitations.

We follow the article: Shape Your LightSwitch OData Using WCF RIA Services.

Note: With the latest version of Visual Studio LightSwitch HTML Client you need to connect to "ApplicationDataObjectContext.cs", change "ApplicationDataObjectContext" (in the code) to "ApplicationData" and use: "using LightSwitchApplication.Implementation;" in the using statement section.

 

We use the following code for the method:

 

      [Query(IsDefault = true)]
        public IQueryable<EnhancedFlowerShopOrder> GetAllOrders()
        {
            // Get all the Orders
            var colFlowerShopOrders = from Order in this.Context.FlowerShopOrders
                                      // Shape the results into the 
                                      // EnhancedFlowerShopOrder class
                                      select new EnhancedFlowerShopOrder
                                      {
                                          // The Order ID
                                          ID = Order.Id,
                                          // The Order Date
                                          OrderDate = Order.OrderDate,
                                          // The first name of the Customer
                                          FirstName = Order.FlowerShopCustomer.FirstName,
                                          // The last name of the Customer
                                          LastName = Order.FlowerShopCustomer.LastName,
                                          // The order Total
                                          OrderTotal =
                                          // Get all order details lines of the Order
                                          (from FlowerShopOrderDetail in Order.FlowerShopOrderDetail
                                           // Group the products in the Order Details
                                           group FlowerShopOrderDetail 
                                           by FlowerShopOrderDetail.Id into g
                                           // Shape a new entity
                                           select new
                                           {
                                               // Create a total property that is the Quantity times the
                                               // Product price
                                               TotalOrder = g.Sum(x => x.Quantity) 
                                               * g.Sum(x => x.FlowerShopProduct.Price),
                                           }).Sum(x => x.TotalOrder) // Add the sum of all the TotalOrders
                                      };
            return colFlowerShopOrders;
        }

 

When we consume the Entity, the property shows up  in the screen designer like a normal field.

 

The computed value shows up in a list…

… and in a detail record.

 

 

Special Thanks

A special thanks to Stephen Provine for his assistance.

 

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2012 Update 2 installed to run the code)