May 8

Written by: Michael Washington
5/8/2013 7:59 PM 

Visual Studio LightSwitch team member Huy Nguyen is a good person to follow on the Visual Studio LightSwitch forums. He typically provides well explained answers to difficult questions and usually provides code samples and in some cases downloadable projects.

In this article, I have created examples using techniques I learned from some of my favorite posts that he made.

Copy A Record - Show Add Edit dialog with initialized parameters

In this post, Huy demonstrates the use of the beforeShown option that allows us to create default values for a screen we are opening from another screen.

In my example, I use the technique to implement a Copy button on an edit screen.

When you click the Copy button, it opens another screen, copies the contents of the previous screen, and appends the text _copy to the Product Name.

You click the check button to accept the change…

This returns you to the previous screen where you can now click the Save button.

Both records are now saved.

Creating The Example

To create the code, we open the AddEditProduct screen and add a Copy button.

We then right-click on the method for the button in the View Model, and select Edit Execute Code.

We use the following code for the button:

 

myapp.AddEditProduct.Copy_execute = function (screen) {
    myapp.showAddEditProduct(null, {
        beforeShown: function (addNewScreen) {
            var copied_item = screen.Product;
            var new_item = new myapp.Product();
            new_item.ProductName = copied_item.ProductName + '_copy';
            new_item.ProductPrice = copied_item.ProductPrice;
            // Set Product
            addNewScreen.Product = new_item;
        }
    });
};

 

Note: With the “show” method, be aware that depending on the particular page, the method may take different parameters than the ones in this example. You can us intellisense to determine what parameters the method expects.

Navigating to a New Screen (and Returning)

In this post, Huy shows us how to use the afterClosed option, that allows us to indicate what happens when we return from a screen we opened.

The normal program flow for creating a new Customer record is to first click the Add Customer button.

The Add Edit screen shows.

We enter information and click the Save button.

 

We are navigated back to the Browse Customer screen and the new record displays.

 

However, when we click the Add And View Customer button…

The same Add Edit screen opens. However, when we click Save…

… we are navigated to a view only screen.

This happens because we used the afterClose option in the code for the button.

The following code is used for the Add And View Customer button:

 

myapp.BrowseCustomers.AddAndViewCustomer_execute = function (screen) {
    myapp.showAddEditCustomer(null, {
        beforeShown: function (addEditScreen) {
            // Create new Customer here so that
            // discard will work.
            var newCustomer = new myapp.Customer();
            addEditScreen.Customer = newCustomer;
        },
        afterClosed: function (addEditScreen, navigationAction) {
            // If the user commits the change,
            // show the new Customer in View Screen.
            if (navigationAction === msls.NavigateBackAction.commit) {
                var newCustomer = addEditScreen.Customer;
                myapp.showViewCustomer(newCustomer);
            }
        }
    });
};

 

Changing The Color of List Boxes

This post from Huy shows us how to easily apply CSS style to a List.

In my example, I added code that will show a item in blue if the quantity were over 5 and yellow if it were 5 or less.

To create the code, we click on the Layout control and click the Edit PostRender Code link in the Properties.

We use the following code for the method:

 

// Value to hold the cached OrderDetailRowParent
var OrderDetailRowParent;
myapp.AddEditOrder.RowTemplate1_postRender = function (element, contentItem) {
    // Cache the OrderDetail item so it can possibly be updated
    OrderDetailRowParent = $(element).parent();
    // Get Order Quantity
    var OrderQuantity = contentItem.data.OrderQuantity;
    if (OrderQuantity != null && OrderQuantity != undefined) {
        // If we have a value -- color the line item
        ColorOrderDetail(OrderQuantity);
    }
};
// Utility
function ColorOrderDetail(OrderQuantity) {
    // if OrderQuantity is more than 5 make the background Blue
    // otherwise make it Yellow
    if (OrderQuantity > 5) {
        OrderDetailRowParent.css({
            "background-color": "blue",
            "background-image": "none",
            color: "white"
        });
    }
    else {
        OrderDetailRowParent.css({
            "background-color": "yellow",
            "background-image": "none",
            color: "black"
        });
    }
}

 

But Wait! – There is a Problem!

If we create a new record, there is no coloring applied.

The solution to that is found in another Huy article…

 

Cache an Element to be Updated Later

In this post by Huy, he is talking about a Popup. However, in his solution he demonstrates the use of caching an object so that it can be updated later.

When we click the Dynamic Add Order Detail button…

The Add Edit Order Detail screen opens and allows us to enter the details.

We click the check button to accept the edit.

The new item shows in the proper color.

The following code is used for the button:

 

// Value to hold the cached OrderDetailRowParent
var OrderDetailRowParent;
myapp.AddEditOrder.DynamicAddOrderDetail_execute = function (screen) {
    myapp.showAddEditOrderDetail(null, {
        beforeShown: function (AddEditOrderDetailScreen) {
            // Make a new OrderDetail
            var newOrderDetail = new myapp.OrderDetail();
            // Set the Order property
            newOrderDetail.setOrder(screen.Order);
            // Set the Quantity
            newOrderDetail.OrderQuantity = 0;
            // Try to find a Product
            screen.details.dataWorkspace.ApplicationData.Products
                .load().then(function (results) {
                    // Try to get the first Product
                    var FirstProduct = results.results[0];
                    // Did we find a first Product?
                    if (FirstProduct != undefined && FirstProduct != null) {
                        // Set the first Product as the Product for the OrderDetail
                        newOrderDetail.setProduct(FirstProduct);
                    }
                    AddEditOrderDetailScreen.OrderDetail = newOrderDetail;
                });
        },
        afterClosed: function (AddEditOrderDetailScreen, navigationAction) {
            // Update the last cached OrderDetailRowParent item 
            ColorOrderDetail(AddEditOrderDetailScreen.OrderDetail.OrderQuantity);
        }
    });
};

 

Updating an Existing Item

A thank you to reader rnoda for providing code to handle updating the .css when editing an existing item.

The first step is to add the following code to the postRender event of the List template:

 

    // Update the cached order when one is selected
    $(element).on("click", function () {
        // Cache the OrderDetail item so it can possibly be updated
        OrderDetailRowParent = $(element).parent();
    });

 

Next, we create our own event that will be fired when the List control is clicked on.

We use the following code for its method:

 

myapp.AddEditOrder.DynamicEditOrderDetail_execute = function (screen) {
    // Open the AddEditOrderDetail screen 
    // Passing it the currently selected OrderDetails item
    myapp.showAddEditOrderDetail(screen.OrderDetails.selectedItem, {
        afterClosed: function (AddEditOrderDetailScreen, navigationAction) {
            // Update the last cached OrderDetailRowParent item 
            ColorOrderDetail(AddEditOrderDetailScreen.OrderDetail.OrderQuantity);
        }
    });
};

 

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)