Geting Account Details of User Windows Store Apps Using JavaScript

Deepak Middha
12y
10k
0
1

Article

Introduction

In this article I describe creation of an app for accessing the user's account name, first and last name and profile picture. This is only available for Microsoft Accounts. For this app you first add a new folder named html by right-clicking on your project name and add four HTML pages:

page1.html
page2.html
page3.html
page4.html

Now add four JavaScript pages:

script1.js
script2.js
script3.js
script4.js

Add a new folder named utill and the following pages:

One HTML page named select.html
One .js page named utill.js
One .css page named stylesheet.cs

Write the following code in default.html:

<!DOCTYPE html>

<html>

<head>

<title>image</title>

</head>

</div>

</body>

</html>

Write the following code in default.js:

(function () {

"use strict";

var pageTitle = "My App";

var pages = [

{ url: "/html/page1.html", title: "Display name" },

{ url: "/html/page2.html", title: "First and Last name" },

{ url: "/html/page3.html", title: "Account picture" },

{ url: "/html/page4.html", title: "Set Account picture" }

];

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

}));

}

else {

if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.protocol) {

if (eventObject.detail.uri.schemeName === "ms-accountpictureprovider") {

eventObject.setPromise(WinJS.UI.processAll().then(function () {

return WinJS.Navigation.navigate(pages[3].url);

}));

}

WinJS.Navigation.addEventListener("navigated", function (eventObject) {

var url = eventObject.detail.location;

var host = document.getElementById("c_host");

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;

}));

});

function ensureUnsnapped() {

var currentState = Windows.UI.ViewManagement.ApplicationView.value;

var unsnapped = ((currentState !== Windows.UI.ViewManagement.ApplicationViewState.snapped) || Windows.UI.ViewManagement.ApplicationView.tryUnsnap());

if (!unsnapped) {

WinJS.log && WinJS.log("Cannot unsnap the sample application.", "sample", "status");

}

return unsnapped;

}

WinJS.Namespace.define("app", {

pageTitle: pageTitle,

pages: pages,

ensureUnsnapped: ensureUnsnapped

});

WinJS.Application.addEventListener("activated", activated, false);

WinJS.Application.start();

})();

Now write the following code in page1.html:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

DisplayName for the current user.

</p>

DisplayName

</button>

<br />

</div>

</div>

</body>

</html>

Write the following code in page2.html:

<html>

<head>

</head>

<body>

<p>

First and Last Name for the current user.

</p>

FirstName

</button>

LastName

</button>

<br />

</div>

</div>

</body>

</html>

Write the following code in page3.html:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

Account Picture for the current user.

</p>

Small Image

</button>

Large Image

</button>

Video

</button>

<br />

</div>

Account Picture video

</video>

</div>

</body>

</html>

Write the following code in page4.html:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

Set the Account Picture image for the current logon user.

</p>

Set image

</button>

Set video

</button>

<br />

</div>

Get Dynamic Account Picture video

</video>

</div>

</body>

</html>

Now write the following code in script1.js:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

Set the Account Picture image for the current logon user.

</p>

Set image

</button>

Set video

</button>

<br />

</div>

Get Dynamic Account Picture video

</video>

</div>

</body>

</html>

Write the following code in script2.js:

(function () {

"use strict";

var page = WinJS.UI.Pages.define("/html/page2.html", {

ready: function (element, options) {

document.getElementById("fname").addEventListener("click", getFirstName, false);

document.getElementById("lname").addEventListener("click", getLastName, false);

}

});

function getFirstName() {

Windows.System.UserProfile.UserInformation.getFirstNameAsync().done(function (result) {

if (result) {

WinJS.log && WinJS.log("First Name = " + result, "sample", "status");

} else {

WinJS.log && WinJS.log("No First Name was returned.", "sample", "status");

}

});

}

function getLastName() {

Windows.System.UserProfile.UserInformation.getLastNameAsync().done(function (result) {

if (result) {

WinJS.log && WinJS.log("Last Name = " + result, "sample", "status");

} else {

WinJS.log && WinJS.log("No Last Name was returned.", "sample", "status");

}

});

}

})();

Write the following code in script3.js:

(function () {

"use strict";

var page = WinJS.UI.Pages.define("/html/page3.html", {

ready: function (element, options) {

hideVisibleHolders();

document.getElementById("getSmallImage").addEventListener("click", getSmallImage, false);

document.getElementById("getLargeImage").addEventListener("click", getLargeImage, false);

document.getElementById("getVideo").addEventListener("click", getVideo, false);

}

});

function getSmallImage() {

hideVisibleHolders();

var image = Windows.System.UserProfile.UserInformation.getAccountPicture(Windows.System.UserProfile.AccountPictureKind.smallImage);

if (image) {

document.getElementById("smallImageHolder").style.visibility = "visible";

document.getElementById("smallImageHolder").src = URL.createObjectURL(image, { oneTimeOnly: true });

WinJS.log && WinJS.log("Small image path= " + image.path, "sample", "status");

} else {

WinJS.log && WinJS.log("Small account picture is not available.", "sample", "status");

}

function getLargeImage() {

hideVisibleHolders();

var image = Windows.System.UserProfile.UserInformation.getAccountPicture(Windows.System.UserProfile.AccountPictureKind.largeImage);

if (image) {

document.getElementById("largeImageHolder").style.visibility = "visible";

document.getElementById("largeImageHolder").src = URL.createObjectURL(image, { oneTimeOnly: true });

WinJS.log && WinJS.log("Large image path= " + image.path, "sample", "status");

} else {

WinJS.log && WinJS.log("Large account picture is not available.", "sample", "status");

}

function getVideo() {

hideVisibleHolders();

var video = Windows.System.UserProfile.UserInformation.getAccountPicture(Windows.System.UserProfile.AccountPictureKind.video);

if (video) {

document.getElementById("videoHolder").style.visibility = "visible";

document.getElementById("videoHolder").src = URL.createObjectURL(video, { oneTimeOnly: true });

document.getElementById("videoHolder").play();

WinJS.log && WinJS.log("Video path= " + video.path, "sample", "status");

} else {

WinJS.log && WinJS.log("Video is not available.", "sample", "status");

}

function hideVisibleHolders() {

document.getElementById("smallImageHolder").style.visibility = "hidden";

document.getElementById("largeImageHolder").style.visibility = "hidden";

document.getElementById("videoHolder").style.visibility = "hidden";

}

})();

Write the following code in Script4.js:

(function () {

"use strict";

var page = WinJS.UI.Pages.define("/html/page3.html", {

ready: function (element, options) {

hideVisibleHolders();

document.getElementById("getSmallImage").addEventListener("click", getSmallImage, false);

document.getElementById("getLargeImage").addEventListener("click", getLargeImage, false);

document.getElementById("getVideo").addEventListener("click", getVideo, false);

}

});

function getSmallImage() {

hideVisibleHolders();

var image = Windows.System.UserProfile.UserInformation.getAccountPicture(Windows.System.UserProfile.AccountPictureKind.smallImage);

if (image) {

document.getElementById("smallImageHolder").style.visibility = "visible";

document.getElementById("smallImageHolder").src = URL.createObjectURL(image, { oneTimeOnly: true });

WinJS.log && WinJS.log("Small image path= " + image.path, "sample", "status");

} else {

WinJS.log && WinJS.log("Small account picture is not available.", "sample", "status");

}

function getLargeImage() {

hideVisibleHolders();

var image = Windows.System.UserProfile.UserInformation.getAccountPicture(Windows.System.UserProfile.AccountPictureKind.largeImage);

if (image) {

document.getElementById("largeImageHolder").style.visibility = "visible";

document.getElementById("largeImageHolder").src = URL.createObjectURL(image, { oneTimeOnly: true });

WinJS.log && WinJS.log("Large image path= " + image.path, "sample", "status");

} else {

WinJS.log && WinJS.log("Large account picture is not available.", "sample", "status");

}

function getVideo() {

hideVisibleHolders();

var video = Windows.System.UserProfile.UserInformation.getAccountPicture(Windows.System.UserProfile.AccountPictureKind.video);

if (video) {

document.getElementById("videoHolder").style.visibility = "visible";

document.getElementById("videoHolder").src = URL.createObjectURL(video, { oneTimeOnly: true });

document.getElementById("videoHolder").play();

WinJS.log && WinJS.log("Video path= " + video.path, "sample", "status");

} else {

WinJS.log && WinJS.log("Video is not available.", "sample", "status");

}

function hideVisibleHolders() {

document.getElementById("smallImageHolder").style.visibility = "hidden";

document.getElementById("largeImageHolder").style.visibility = "hidden";

document.getElementById("videoHolder").style.visibility = "hidden";

}

})();

Now write the following code in select.html page:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h3 id="listLabel">Select pages:</h3>

</select>

</div>

</body>

</html>

Write the following code in utill.js:

(function () {

var lastError = "";

var lastStatus = "";

var pageInput = WinJS.Class.define(

function (element, options) {

element.winControl = this;

this.element = element;

new WinJS.Utilities.QueryCollection(element)

.setAttribute("role", "main")

.setAttribute("aria-labelledby", "inputLabel");

element.id = "input";

this.addInputLabel(element);

this.addDetailsElement(element);

this.addpagesPicker(element);

}, {

addInputLabel: function (element) {

var label = document.createElement("h2");

label.textContent = "Input";

label.id = "inputLabel";

element.parentNode.insertBefore(label, element);

addpagesPicker: function (parentElement) {

var pages = document.createElement("div");

pages.id = "pages";

var control = new pageSelect(pages);

parentElement.insertBefore(pages, parentElement.childNodes[0]);

addDetailsElement: function (sourceElement) {

var detailsDiv = this._createDetailsDiv();

while (sourceElement.childNodes.length > 0) {

detailsDiv.appendChild(sourceElement.removeChild(sourceElement.childNodes[0]));

}

sourceElement.appendChild(detailsDiv);

_createDetailsDiv: function () {

var detailsDiv = document.createElement("div");

new WinJS.Utilities.QueryCollection(detailsDiv)

.addClass("details")

.setAttribute("role", "region")

.setAttribute("aria-labelledby", "descLabel")

.setAttribute("aria-live", "assertive");

var label = document.createElement("h3");

label.textContent = "Description";

label.id = "descLabel";

detailsDiv.appendChild(label);

return detailsDiv;

}

);

var pageOutput = WinJS.Class.define(

function (element, options) {

element.winControl = this;

this.element = element;

new WinJS.Utilities.QueryCollection(element)

.setAttribute("role", "region")

.setAttribute("aria-labelledby", "outputLabel")

.setAttribute("aria-live", "assertive");

element.id = "output";

this._addOutputLabel(element);

this._addStatusOutput(element);

}, {

_addOutputLabel: function (element) {

var label = document.createElement("h2");

label.id = "outputLabel";

label.textContent = "Output";

element.parentNode.insertBefore(label, element);

_addStatusOutput: function (element) {

var statusDiv = document.createElement("div");

statusDiv.id = "statusMessage";

element.insertBefore(statusDiv, element.childNodes[0]);

}

);

var pageioUrl = null;

WinJS.Navigation.addEventListener("navigating", function (evt) {

currentpageUrl = evt.detail.location;

});

WinJS.log = function (message, tag, type) {

var isError = (type === "error");

var isStatus = (type === "status");

if (isError || isStatus) {

var statusDiv = /* @type(HTMLElement) */ document.getElementById("statusMessage");

if (statusDiv) {

statusDiv.innerText = message;

if (isError) {

lastError = message;

statusDiv.style.color = "blue";

} else if (isStatus) {

lastStatus = message;

statusDiv.style.color = "green";

}

};

var pageSelect = WinJS.UI.Pages.define("/utill/select.html", {

ready: function (element, options) {

var that = this;

var selectElement = WinJS.Utilities.query("#pageSelect", element);

this._selectElement = selectElement[0];

app.pages.forEach(function (s, index) {

that._addpage(index, s);

});

selectElement.listen("change", function (evt) {

var select = evt.target;

if (select.selectedIndex >= 0) {

var newUrl = select.options[select.selectedIndex].value;

WinJS.Navigation.navigate(newUrl).then(function () {

setImmediate(function () {

document.getElementById("pageSelect").setActive();

});

}

});

selectElement[0].size = (app.pages.length > 5 ? 5 : app.pages.length);

if (app.pages.length === 1) {

selectElement[0].setAttribute("multiple", "multiple");

}

_addpage: function (index, info) {

var option = document.createElement("option");

if (info.url === currentpageUrl) {

option.selected = "selected";

}

option.text = (index + 1) + ") " + info.title;

option.value = info.url;

this._selectElement.appendChild(option);

}

});

function activated(e) {

WinJS.Utilities.query("#f_Label")[0].textContent = app.pageTitle;

}

WinJS.Application.addEventListener("activated", activated, false);

WinJS.Namespace.define("app", {

pageInput: pageInput,

pageOutput: pageOutput

});

document.Testapp = {

getLastError: function () {

return lastError;

getLastStatus: function () {

return lastStatus;

selectpage: function (pageID) {

pageID = pageID >> 0;

var select = document.getElementById("pageSelect");

var newUrl = select.options[pageID - 1].value;

WinJS.Navigation.navigate(newUrl).then(function () {

setImmediate(function () {

document.getElementById("pageSelect").setActive();

});

}

};

})();

Your output will look like this:

Up Next

Ebook Download

View all

Step into Windows 10 UWP

Read by 2.7k people

Download Now!

Learn

View all