You are here:   Blog
Register   |  Login

Jun 13

Written by: Michael Washington
6/13/2013 8:22 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.

Previously, I created examples using techniques I learned from some of my favorite posts that he made. Those articles are:

In this article, I have created more examples from his latest articles.

Center A Popup

The first post by Huy we will cover is how to center a Popup.

image

In the Screen Designer, we can right-click on Popups and add a Popup.

image

We add a Custom Control to the Popup and use the following code for _render method for the control:

 

myapp.Main.ScreenContent_render = function (element, contentItem) {
    element.innerHTML = "<h1>Popup without centering</h1>";
};

 

image

Next, we create a button and set the Edit Action.

image

We set the action for the button to open the Popup.

image

We run the application and click on the button…

image

The Popup will show but it will not be centered.

Center The Popup

Now we will demonstrate how to make the Popup centered on the screen.

image

In the Screen Designer, we create a new Popup and a button to open the Popup.

Instead of using the “Choose an existing method” in the Edit Tap Action box, we will select “Write my own method”, and call our method “ShowCenteredPopup”.

We right-click on the method in the View Model section of the Screen Designer and select Edit Execute Code.

We use the following code for the control:

 

myapp.Main.ShowCenteredPopup_execute = function (screen) {
    // Note:If using JQuery Mobile 1.3 (or higher) use:
    // "popupcreate" rather than "popupbeforeposition"
    // An event handler to be fired before a popup is shown 
    // to override the popup positionTo option 
    // using "window" instead of "origin"
    $(window).one("popupbeforeposition", function (e) {
        $(e.target).popup({
            positionTo: "window"
        });
    });
    // Show the Popup
    screen.showPopup("Centered");
};

 

image

When we run the application and click the button, the Popup shows, centered on the screen.

 

Get Unsaved Changes

In this section we will look at a post by Huy that covers detecting when a Visual Collection is dirty, meaning there are unsaved changes. His post specifically covers the Silverlight client, but the principals are the same with the LightSwitch HTML Client.

We can query and detect unsaved changes (see the article: Deleting Data In The Visual Studio LightSwitch HTML Client for more information on discarding unsaved changes).

image

In our example, we can select an Order Detail record…

image

…and alter the record and accept the change.

image

Before we click the save button, we can switch to the Changes tab and click the Get Changes button and view the Product Name of any record that has unsaved changes.

We use the following code for the button:

 

myapp.AddEditOrder.GetChanges_execute = function (screen) {
    // Clear screen.strChanges
    screen.strChanges = "";
    // Get the Changes
    var ChangeSet = myapp.activeDataWorkspace.ApplicationData.details.getChanges();
    // Create a template
    var itemTemplate = $("<div></div>");
    // Loop through each change
    $(ChangeSet).each(function (i, OrderDetail) {
        // Format the display using .text that will prevent JavaScript injection
        // See: http://dotnetlore.com/lightswitch-custom-controls-and-script-injection/
        var ProductName = $("<h2>").text(OrderDetail.ProductName);
        // Add the change
        ProductName.appendTo($(itemTemplate));
    });
    // Display any changes
    screen.strChanges = itemTemplate[0].innerHTML;
};

 

Using Prototypes To Calculate Child Records

In this post by Huy, he shows a forum member how to use EventListeners to retrieve values from JavaScript prototype methods.

image

In our example, the Order Detail records attached to each Order have a field where you can make each one available or un-available.

image

On the Edit Order screen, the count of available and un-available saved Order Detail records for the selected Order are displayed.

 

Creating The Code

image

We open the Orders table.

image

(Notice that the OrderDetail entity is associated with the Order entity)

We select the HTMLClient tab and then select Write Code and then the created method.

This allows us to create JavaScript code on the entity that will run no matter what screen the entity is consumed on.

We use the following code for the method:

 

myapp.Order.created = function (entity) {
    // Set Default Date
    entity.OrderDate = new Date();
};

 

We also add the following prototype methods outside of the created method:

 

// Calculated field to count Available OrderDetails
myapp.Order.prototype.getAvailable = function () {
    return this.OrderDetails.sum(function (item) {
        return item.ItemAvailable == true;
    });
};
// Calculated field to count UnAvailable OrderDetails
myapp.Order.prototype.getUnAvailable = function () {
    return this.OrderDetails.sum(function (item) {
        return item.ItemAvailable == false;
    });
};

 

image

On the screen, we create two String properties and bind them to label controls on the screen.

The following code is used for the _postRender method for each label control:

 

myapp.AddEditOrder.AvailableItems_postRender = function (element, contentItem) {
    // Get the Order on the screen
    var order = contentItem.screen.Order;
    // Show the current count
    element.innerText = order.getAvailable();
    // Method that will be called on update of count
    function updateValue() {
        element.innerText = order.getAvailable();
    }
    // Add event listener
    order.OrderDetails.addEventListener(
        "collectionchange", updateValue);
    // Trigger load of OrderDetails
    order.getOrderDetails();
    // Clean up event listener
    contentItem.handleViewDispose(function () {
        parent.Children.removeEventListener(
            "collectionchange", updateValue);
    });
};
myapp.AddEditOrder.UnAvailableItems_postRender = function (element, contentItem) {
    // Get the Order on the screen
    var order = contentItem.screen.Order;
    // Show the current count
    element.innerText = order.getUnAvailable();
    // Method that will be called on update of count
    function updateValue() {
        element.innerText = order.getUnAvailable();
    }
    // Add event listener
    order.OrderDetails.addEventListener(
        "collectionchange", updateValue);
    // Trigger load of OrderDetails
    order.getOrderDetails();
    // Clean up event listener
    contentItem.handleViewDispose(function () {
        parent.Children.removeEventListener(
            "collectionchange", updateValue);
    });
};

 

 

Special Thanks

A very special thanks to LightSwitch Team member Huy Nguyen.

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)

2 comment(s) so far...


Gravatar

Re: HUY Volume III– Popups, Dirty Visual Collections, and Using Prototypes To Calculate Child Collections

I'm curious if it's possible to use prototype extension methods to perform the computed properties from the Flower Shop application that you previously posted at this website, and thereby obviating the WCF RIA call.

By lkbreth on   6/15/2013 10:38 PM
Gravatar

Re: HUY Volume III– Popups, Dirty Visual Collections, and Using Prototypes To Calculate Child Collections

@lkbreth - The WCF RIA class produces results that are searchable and sortable. They also allow you to tune for the best performance because you can query the database one time rather than once for each entity as the prototype extensions methods require. These Prototype extension methods are most useful to display calculations for a single entity.

By Michael Washington on   6/16/2013 5:20 AM

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