ContactPicker Control in Windows Store App

Introduction

In this section we will learn about the contactpicker and define it's functionality by using the JavaScript and HTML in Windows 8. Here, we will present an example of how to display and work with the contactpicker control. In this example we explain how to use the Contact Picker to select one contact. It includes a basic implementation of the Contact Picker APIs to demonstrate how to display a list of contacts to the user and in the second point we will also present how to use the Contact Picker to select one or more contacts.

So, we use the steps given below.

Step 1 : First of all you create a new Metro Style Application; let us see the description with images of how to create it.

Open Visual Studio 2011
File>New>Project
Choose Template>JavaScript> Blank Application
Rename the application

Step 2 : In the Solution Explorer there are two files that we will primarily work with, program.js and default.html.

Step 3 : Open the default.html page and add the following code. The code will look as shown below.

Code :

<!DOCTYPE html>

<html>

<head>

<title>Contact Picker</title>

</head>

<h1 id="featureLabel" style="background-color:#b6ff00">Contact Picker</h1>

<h2 id="inputLabel">Input</h2>

<h3 id="listLabel">Select Point</h3>

<option selected="selected" value="1">1. Pick a contact</option>

<option value="2">2. Pick multiple contacts</option>

</select>

</div>

<h3 id="descLabel">Description</h3>

<p>This point demonstrates how to use the Contact Picker to select one contact. It includes

a basic implementation of the Contact Picker APIs to demonstrate how to display a list of

contacts to the user.</p>

<button id="Section1Open" class="action">Pick Contact</button>

</div>

<p>This sample demonstrates how to use the Contact Picker to select one or more contacts.

It includes a basic implementation of the Contact Picker APIs to demonstrate how to display

a list of contacts to the user.</p>

<button id="Section2Open" class="action">Pick Contacts</button>

</div>

<h2 id="outputLabel"> Output</h2>

</div>

</div>

</body>

</html>

Step 4 : After applying this code, run this application and then we get the following output:

We select the contacts but we have choose only one of the contacts into the given list.

output1.1.gif

After selecting one contact the output will be as given below:

ouyput1.2.gif

In the second point we choose multiple contacts.

After selecting one or more contacts, these contacts will appear as shown below:

output2.1.gif

The selected contacts will appear as shown below:

output2.2.gif