Learn Skype Web SDK Day 10 : Getting the Contact List
This is one post in a series of more than 30, devoted to helping you get up to speed quickly with the new Skype Web SDK. Each lesson comes with source code (in GitHub) and a working demo page so you can see what it does. Check out the full list of posts on the Skype Web SDK page.
View Demo
One of the things which the personsAndGroupsManager gives us is a full list of all contacts in the signed-in user’s contact list. This can be useful if you need to represent the contact list on screen, or want to use it for intelli-sense style searches.
The personsAndGroupsManager has a full list of both groups and users in a user’s contact list, however, neither will be populated unless you subscribe to the information. To do this, register an event listener for the .added function and then call subscribe(). The listener will be called for each person that’s added to the collection. For instance, to get a full list of users, this is how you would register the event listener for when users are added:
Application.personsAndGroupsManager.all.persons.added(function (newUser) { //do something with the new user here });
Once you have registered the listener, you can then call subscribe():
Application.personsAndGroupsManager.all.persons.subscribe();
You can use exactly the same approach to retrieve a list of groups, by using the groups object instead of the persons object:
Application.personsAndGroupsManager.all.groups.added(function (newGroup) { //do something with the new group here }); Application.personsAndGroupsManager.all.groups.subscribe();
In the code sample below, the user’s list of contacts and groups is displayed:
<div class="form-horizontal"> <div class="form-group"> <label for="username" class="col-sm-2 control-label">Username</label> <div class="col-sm-10"> <input type="email" class="form-control" id="username" placeholder="Email"> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="password" placeholder="Password"> </div> </div> </div> <div class="form-horizontal"> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-default" id="btnLogIn">Log in</button> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-default" id="btnLogOut">Log out</button> </div> </div> </div> <div> <span id="loginStatus"></span><hr/> Contact List: <ul id="lstContactList"></ul> <hr/> Group List: <ul id="lstGroupList"></ul> </div> <script type="text/javascript"> var client; $(function () { 'use strict'; Skype.initialize({ apiKey: 'SWX-BUILD-SDK', }, function (api) { client = new api.application(); // whenever client.state changes, display its value client.signInManager.state.changed(function (state) { $('#loginStatus').text("Login State: " + state); }); }, function (err) { alert('Error loading Skype Web SDK: ' + err); }); $('#btnLogIn').click(function () { // start signing in client.signInManager.signIn({ username: $('#username').val(), password: $('#password').val() }).then(function () { //log in worked! alert('Logged in!'); GetContactList(); GetGroupList(); }, function (error) { //Something went wrong. alert(error); }); }); $('#btnLogOut').click(function () { // start signing out client.signInManager.signOut() .then(function () { //log out worked! alert('Logged out!'); }, function (error) { //Something went wrong. alert(error); }); }); function GetContactList() { client.personsAndGroupsManager.all.persons.added(function (contact) { contact.displayName.get().then(function (theName) { $("#lstContactList").append('<li>' + contact.id() + " - " + theName + '</li>'); }); }); client.personsAndGroupsManager.all.persons.subscribe(); } function GetGroupList() { client.personsAndGroupsManager.all.groups.added(function (group) { group.name.get().then(function (theName) { $('#lstGroupList').append('<li>' + theName + '</li'); }); }); } }); </script>
Demo Online
You can try this code out against your own Skype for Business environment by going to the demo page. From here you can also download the code from GitHub if you want to host it locally, or take it and use it in your next project.
Good to Know
- Before you can run this code, make sure you've read my post on all the prerequisites you need to have in place.
- You don't have to copy the code from here - it's all on GitHub!
- If you liked this post, there are more! Check out the dedicated Skype for Web SDK Collection page, or signup to the newsletter
- Need a Skype for Web SDK solution, but not in a position to build yourself? Hire me!