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

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


Similar Articles