Michael Washington's Blog, page 17

New API For Refreshing Data in LightSwitch in Visual Studio 2013

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…

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

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:

 

 

We can update an OrderDetail record…

.. save the changes…

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

If we refresh the web browser…

…we now see the properly updated time.

 

The Solution

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.

We select Write my own method.

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.comhttp://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2013 (or higher) installed to run the code)

More ...Tags: VS2013

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

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…

Tags: HTML Client

How Does A LightSwitch HTML Client Application Work?

After using the Visual Studio LightSwitch HTML Client, you may wonder how is works. How does it turn the program we designed into an actual web application?…

Tags: HTML Client

Create PhoneGap Applications From LightSwitch HTML Client in Minutes

You can quickly and easily create PhoneGap Android and IOS applications from your Visual Studio LightSwitch HTML Client websites using VS Nomad from Redgate…

Tags: PhoneGap

HUY Volume II - Visual Studio LightSwitch Advanced JavaScript Examples

Visual Studio LightSwitch team member Huy Nguyen 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. In this article, I have created more examples from his latest articles…

Tags: HTML Client

Creating Visual Studio LightSwitch Code Snippets

Microsoft MVP and Visual Studio LightSwitch Insider, Alessandro Del Sole recently released an extension that “provides an easy way to install a number of JavaScript code snippets for the LightSwitch HTML Client created by the LightSwitch Team at Microsoft”. I decided to use it to help you create the code to implement the JQuery Mobile Reflow Table in Visual Studio LightSwitch that was covered in the article: LightSwitch HTML Client For The Desktop Web Browser…

Understanding The LightSwitch HTML Client Visual Collection

To maximize performance, all applications must properly manage the flow of data. When dealing with an entity (one row of data), Visual Studio LightSwitch transfers the entire entity from the data layer to the client, the user interface (UI) layer.  When dealing with collections (rows of data) LightSwitch uses Visual Collections, and is very deliberate as to how, and when it places entities in the Visual Collection…

Tags: HTML Client

Using The Clippy Agent in the Visual Studio LightSwitch HTML Client

You can easily implement animated help agents in your Visual Studio LightSwitch HTML Client applications…

Tags: HTML Client

LightSwitch HTML Client For The Desktop Web Browser

An objection many developers have about using Visual Studio LightSwitch HTML Client for their projects, is that they feel they need normal web pages. To many developers, LightSwitch HTML pages look odd when viewed in a normal desktop web browser.

The Reflow table displays data in a desktop web browser like any normal data grid, yet it will dynamically pivot the table when the screen becomes smaller (rather than just squeezing the table smaller). A user can easily view and navigate the table on any sized device…

Tags: HTML Client

Updating The LightSwitch JavaScript Runtime

The Visual Studio LightSwitch runtime was updated to support JQuery Mobile 1.3. This is a step by step guide to updating the LightSwitch JavaScript Runtime…

Tags: HTML Client