Jun 13

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

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

• Visual Studio LightSwitch Screen Navigation and Advanced JavaScript Examples
• HUY Volume II - Visual Studio LightSwitch Advanced JavaScript Examples

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.

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

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>";
};

 

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

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

We run the application and click on the button…

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.

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

 

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

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

…and alter the record and accept the change.

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.

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

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

We open the Orders table.

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

 

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)