You are here:   Blog
Register   |  Login

LightSwitch News

 

Jun 28

Written by: Michael Washington
6/28/2013 5:27 AM  RssIcon

Yesterday Visual Studio LightSwitch was released in a preview of Visual Studio 2013.

You can get it here: http://www.microsoft.com/visualstudio/eng/2013-downloads. You can read more about the new features here: http://blogs.msdn.com/b/lightswitch/archive/2013/06/27/announcing-lightswitch-in-visual-studio-2013-preview.aspx.

One new feature is described as: API support for refreshing data on lists and screens in the runtime app. That is the feature we will explore here.

The Sample Project

We start with the application created in the tutorial: An End-To-End Visual Studio LightSwitch HTML5 Application.

When we open it up, it will be converted to the new Visual Studio 2013 format. However, to get it to run we have right-click on the first project…

image

…and set it as the startup project.

The API

The new refresh() API consists of  two methods that each return a Promise object.

  • refresh()
    • Asynchronously loads the first page of items into this collection and
      returns a promise that will be fulfilled when the first page is loaded.
      Existing results will be refreshed on the first page and subsequent
      pages unless load() is called again.
  • refresh(navigationPropertyNames)
    • Updates the entity with values from the data source if the entity
      is not changed.
      • <param name="navigationPropertyNames" type="Array" optional="true">
        An array of names of navigation properties to be included. An empty
        array means no properties will be included. If not specified, all
        reference properties are included.

Sample usage

  • Refresh the Order entity and its Customer, Employee, Shipper
    • screen.Order.details.refresh();
  • Refresh only the Order entity
    • screen.Order.details.refresh([]);
  • Refresh the Order entity and its Customer
    • screen.Order.details.refresh(["Customer"]);

The Problem

image

Let’s say we have a field on the Order entity that is updated in the save pipeline when an associated OrderDetail record is updated.

In the OrderDetail record, the updating event looks like this:

 

image

 

image

We can update an OrderDetail record…

image

.. save the changes…

image

…but the time is unchanged on the screen (even though it has been updated in the database).

image

If we refresh the web browser…

image

…we now see the properly updated time.

 

The Solution

image

We can instantly have the entity updated if we use the new refresh() method.

To do so requires us to implement our own code to open the edit screen (so we have an opportunity to implement the refresh code).

We select the Item Tap action for the Orders list.

image

We select Write my own method.

image

We then edit the code for the method we created.

We use the following code:

 

myapp.Main.Order_ItemTap_execute = function (screen) {
    myapp.showAddEditOrder(null, {
        beforeShown: function (addEditOrderScreen) {
            // Set the Order on the AddEditOrder screen
            // to the selected Order on the Main screen
            addEditOrderScreen.Order = screen.Orders.selectedItem;
        },
        afterClosed: function (addEditScreen, navigationAction) {
            // If the user commits the change,
            // update the selected order on the Main screen
            if (navigationAction === msls.NavigateBackAction.commit) {
                // *****************************************
                // The .refresh() method refreshes the Order
                screen.Orders.selectedItem.details.refresh();
            }
        }
    });
};

 

When we update the record we will see the date instantly updated without the need to refresh the entire screen.

To have the entity automatically refreshed, LightSwitch would need to implement datajs 1.1.1. This may happen by the time Visual Studio 2013 is fully released.

For now, the work around is to call the refresh() method as we have shown above.

Behind the Scenes

What the new refresh API does is execute a query using the unchanged-only merge option. In the previous version of LightSwitch, it used the append-only merge option:

  • Append only: This is the only option in previous version and still the default behavior of query execution.
    • Entities that do not exist in the data workspace are added to the data workspace. If an entity is already in the data workspace, the current and original values of the entity's properties are not overwritten with data source values.
  • Unchanged only: This is the new merge option introduced with VS 2013. It is used for Visual Collection and Entity refresh.
    • Entities that do not exist in the data workspace are added to the data workspace. If an entity is already in the data workspace and its entity state is unchanged, the current and original values of the entity's properties are overwritten with data source values

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 2013 (or higher) installed to run the code)

Tags: VS2013
Categories:

5 comment(s) so far...


Gravatar

Re: New API For Refreshing Data in LightSwitch in Visual Studio 2013

Also see this thread: http://social.msdn.microsoft.com/Forums/vstudio/en-US/4896b49c-83c8-49d4-aeb8-940ca53e44d2/propagate-changes-in-database-to-ls-html-client

By Michael Washington on   9/1/2013 5:50 AM
Gravatar

Re: New API For Refreshing Data in LightSwitch in Visual Studio 2013

Nice aRtilce. Question: I have a HTML app that's connected to external LOB data. When a change happens on the SQL Server outside of LS, the change is not seen in HTML UI until I refresh the browser. If I open a edit detail popup and make a change in LS to the same record, I get save op failed message 'the data your are editing has been updated by another transaction'. Is this normal behavior? Would I have to force a refresh upon tap before the modal popup displays the edit details form?
TIA,
Josh

By jbooker on   9/19/2013 10:17 AM
Gravatar

Re: New API For Refreshing Data in LightSwitch in Visual Studio 2013

@jbooker - You will want to make a post on the official Visual Studio Forums: http://social.msdn.microsoft.com/Forums/vstudio/en-US/home?forum=lightswitch

By Michael Washington on   9/19/2013 10:28 AM
Gravatar

Re: New API For Refreshing Data in LightSwitch in Visual Studio 2013

This works fine but stops working after a random amount of time. I have wrapped it in a try/catch and nothing.

Anyone else have this issue?

By Rich Greene on   2/6/2014 9:00 AM
Gravatar

Re: New API For Refreshing Data in LightSwitch in Visual Studio 2013

@Rich Greene - If you have any code samples post them on the official Visual Studio Forums: http://social.msdn.microsoft.com/Forums/vstudio/en-US/home?forum=lightswitch (don't post them here because the comments section of the blog posts is lousy for resolving any issues, plus you need the Microsoft people to provide input).

By Michael Washington on   2/6/2014 9:01 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