Jun
28
Written by:
Michael Washington
6/28/2013 5:27 AM
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. - <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
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.com/Downloads.aspx
(you must have Visual Studio 2013 (or higher) installed to run the code)
7 comment(s) so far...
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
|
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
|
@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
|
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
|
@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
|
I am also facing the same issue "the data you are editing has been updated by another transaction". The code snippet is as below.
I have two functionality. 1. Save as Draft, 2. Save and next page.
1. Save as draft.
myapp.AddFinState.Save_execute = function (screen) {
try {
isDraft = true;
myapp.applyChanges().done(function () {
//window.location.reload();
//myapp.showBrowseRefresh(null, screen.UserID, screen.UserName, screen.RoleType);
});
//myapp.activeDataWorkspace.FSCPDB.saveChanges().then(function () {
// window.location.reload();
//});
Your draft has been saved successfully.");
}
catch (e) {
console.log("Error in AddFinState.Save_execute. " + e.description);
}
};
2. Save & next
myapp.AddFinState.SubmitNext_execute = function (screen) {
try {
//myapp.applyChanges().then(null, function fail(e) {
// msls.showMessageBox(e.message, { title: e.title })
//});
myapp.applyChanges().done(function () {
myapp.activeDataWorkspace.FSCPDB.FinancialSurveyRecords_SingleOrDefault(screen.UserID).execute().then(function (data) {
if (data.results[0] != null) {
myapp.showAddFinRecord(data.results[0], screen.UserID, screen.UserName, screen.RoleType);
}
else {
myapp.showAddFinRecord(null, screen.UserID, screen.UserName, screen.RoleType, {
beforeShown: function (addEditScreen) {
addEditScreen.FinancialSurveyRecord = new myapp.FinancialSurveyRecord();
}
});
}
})
})
}
catch (e) {
console.log("Error in AddFinState.SubmitNext_execute. " + e.description);
}
};
When I save draft it save properly and next when I click SaveNext it show the above error.
Thanks
Sham
By sham on
1/16/2015 11:14 AM
|
@sham - 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
1/16/2015 11:14 AM
|