Introduction
In this article I describe how to create a Windows Store App to change the version of an app using JavaScript. Versioning enables you to change the application data format used in a future release of your app without causing compatibility problems with previous releases of your app. Each version will only roam to the same version, thus separating incompatible data.
For this we use Windows.Storage.ApplicationData.current.setVersion to change the Application Data version. I assume you can create a simple Windows Store App using JavaScript. For more help visit Simple Windows Store Apps using JavaScript.
To start the creation of the app, add two JavaScript pages by right-clicking on the js folder in the Solution Explorer and select Add > new item > JavaScript Page and then give an appropriate name. In the same way, add one HTML page to your project.
![version-change-in-windows-store-appss.jpg]()
Write the following code in default.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>app</title>
<link rel="stylesheet" href="//Microsoft.WinJS.1.0/css/ui-light.css" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>
<body role="application" style="background-color: lightcyan">
<center><div id="rootGrid">
<div id="content">
<h1 id="featureLabel"></h1>
<div id="contentHost"></div>
</div>
</div></center>
</body>
</html>
Write the following code in default.js:
(function () {
"use strict";
var appTitle = "ApplicationData";
var pages = [
{ url: "page.html" }
];
function activated(eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
eventObject.setPromise(WinJS.UI.processAll().then(function () {
var url = WinJS.Application.sessionState.lastUrl || pages[0].url;
return WinJS.Navigation.navigate(url);
}));
}
}
WinJS.Navigation.addEventListener("navigated", function (eventObject) {
var url = eventObject.detail.location;
var host = document.getElementById("contentHost");
host.winControl && host.winControl.unload && host.winControl.unload();
WinJS.Utilities.empty(host);
eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {
WinJS.Application.sessionState.lastUrl = url;
}));
});
WinJS.Namespace.define("App", {
appTitle: appTitle,
pages: pages
});
WinJS.Application.addEventListener("activated", activated, false);
WinJS.Application.start();
})();
Write the following code in page.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/script.js"></script>
</head>
<body>
<div data-win-control="SdkSample.ScenarioInput">
<button id="setVersion0">Do Version 0</button>
<button id="setVersion1">Do Version 1</button>
</div>
<div data-win-control="SdkSample.ScenarioOutput">
<div class="item" id="setVersionOutput"></div>
</div>
</body>
</html>
Write the following code in script.html:
(function () {
"use strict";
var page = WinJS.UI.Pages.define("page.html", {
ready: function (element, options) {
document.getElementById("setVersion0").addEventListener("click", setVersion0, false);
document.getElementById("setVersion1").addEventListener("click", setVersion1, false);
setVersionDisplayOutput();
}
});
var appData = Windows.Storage.ApplicationData.current;
var localSettings = appData.localSettings;
var settingName = "setVersionSetting";
var settingValueV0 = "Data.v0";
var settingValueV1 = "Data.v1";
function setVersion0Callback(setVersionRequest) {
var setVersionDeferral = setVersionRequest.getDeferral();
var version = appData.version;
if (version === 0) {
} else if (version === 1) {
localSettings.values[settingName] = settingValueV0;
} else {
throw "Unexpected ApplicationData Version: " + version;
}
setVersionDeferral.complete();
}
function setVersion1Callback(setVersionRequest) {
var setVersionDeferral = setVersionRequest.getDeferral();
var version = appData.version;
if (version === 1) {
} else if (version === 0) {
localSettings.values[settingName] = settingValueV1;
} else {
throw "Unexpected ApplicationData Version: " + version;
}
setVersionDeferral.complete();
}
function setVersion0() {
appData.setVersionAsync(0, setVersion0Callback).then(setVersionDisplayOutput);
}
function setVersion1() {
appData.setVersionAsync(1, setVersion1Callback).then(setVersionDisplayOutput);
}
function setVersionDisplayOutput() {
var output = "Version: " + appData.version;
document.getElementById("setVersionOutput").innerText = output;
}
})();
Output:
![version-change-in-windows-store-app.jpg]()
Summary
In this app I described how to change the version of an application in a Windows Store using JavaScript. I hope this article has helped you to understand this topic. Please share if you know more about this. Your feedback and constructive contributions are welcome.