You are here:   Blog
Register   |  Login

 

May 8

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

image

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.

image

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

image

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.

image

You click the check button to accept the change…

image

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

image

Both records are now saved.

Creating The Example

image

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.

image

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

image

The Add Edit screen shows.

We enter information and click the Save button.

 

image

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

 

image

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

image

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

image

… 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.

image

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.

image

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.

image

When we click the Dynamic Add Order Detail button…

image

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

We click the check button to accept the edit.

image

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();
    });

 

image

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)

7 comment(s) so far...


Gravatar

Re: Visual Studio LightSwitch Screen Navigation and Advanced JavaScript Examples

I really like your staff. Could you please tell me where I can find "OrderDetailRowParent.css"? Thanks.

By Wanda Zeng on   5/21/2013 10:28 AM
Gravatar

Re: Visual Studio LightSwitch Screen Navigation and Advanced JavaScript Examples

@Wanda Zeng - That is not a file, it a method call on a property. You can get all the code on the Downloads page of this site.

By Michael Washington on   5/21/2013 10:39 AM
Gravatar

Re: Visual Studio LightSwitch Screen Navigation and Advanced JavaScript Examples

How would you solve the issue of updating the color of the item after it gets edited? In the scenario where you are adding a new item, you have a chance to cache the Html element in the postRender event, but when editing an existing element, how do we get ahold of the Html element being edited?
Great site by the way!

By Rudy on   5/22/2013 5:13 AM
Gravatar

Re: Visual Studio LightSwitch Screen Navigation and Advanced JavaScript Examples

@Rudy - It is easy but not easy to explain in the Blog comments. Make a post in the official LightSwitch forums.

By Michael Washington on   5/22/2013 5:15 AM
Gravatar

Re: Visual Studio LightSwitch Screen Navigation and Advanced JavaScript Examples

@Michael,

Thanks. Here's the link to the question in the forums, if you'd like to answer it :)
http://social.msdn.microsoft.com/Forums/en-US/lightswitch/thread/6138f8cd-74eb-4b9c-991c-b0054852142b

By Rudy on   5/24/2013 5:03 AM
Gravatar

Re: Visual Studio LightSwitch Screen Navigation and Advanced JavaScript Examples

@Rudy - The article has been updated. Thank you for your help.

By Michael Washington on   5/24/2013 5:53 AM
Gravatar

Re: Visual Studio LightSwitch Screen Navigation and Advanced JavaScript Examples


Great Info. Thanks for the your effort. Appreciate it.

By Cross Platform Android development Houston TX on   11/21/2013 11:12 PM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation