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
![homepage.gif]()
Step 2 : In the Solution Explorer there are two files that we will primarily work with, program.js and default.html.
![solutionexplorer.gif]()
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>
<!-- WinJS references -->
<link href="winjs/css/ui-light.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="WinJS/js/base.js"></script>
<script type="text/javascript" src="WinJS/js/ui.js"></script>
<script type="text/javascript" src="WinJS/js/wwaapp.js"></script>
<!-- SDK Base references -->
<link rel="stylesheet" type="text/css" href="css/base-sdk.css" />
<script type="text/javascript" src="base-sdk.js"></script>
<!-- Sample references -->
<link rel="stylesheet" type="text/css" href="css/program.css" />
<script type="text/javascript" src="program.js"></script>
</head>
<body role="application" style="background-color:#ffd800">
<div id="rootGrid">
<div id="content">
<h1 id="featureLabel" style="background-color:#b6ff00">Contact Picker</h1>
<h2 id="inputLabel">Input</h2>
<div id="input" role="main" aria-labelledby="inputLabel">
<div class="options">
<h3 id="listLabel">Select Point</h3>
<select size="2" id="Sections" aria-labelledby="listLabel" style="background-color:#ff6a00">
<option selected="selected" value="1">1. Pick a contact</option>
<option value="2">2. Pick multiple contacts</option>
</select>
</div>
<div class="details" role="region" aria-labelledby="descLabel" aria-live="assertive">
<h3 id="descLabel">Description</h3>
<!-- Section 1 Input -->
<div class="item" id="Section1Input">
<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>
<!-- Section 2 Input -->
<div class="item" id="Section2Input">
<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>
</div>
</div>
<div class="clear"></div>
<h2 id="outputLabel"> Output</h2>
<div id="output" role="region" aria-labelledby="outputLabel" aria-live="assertive">
<div id="statusMessage"></div>
<!-- Section Output -->
<div class="item" id="Section1Output">
<div id="Section1Contacts" ></div>
</div>
<div class="item" id="Section2Output">
<div id="Section2Contacts"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Step 4 : After applying this code, run this application and then we get the following output:
![output1.gif]()
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.
![output2.gif]()
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]()