This is part two of a mini blog series on a recently designed OfficeDev PnP Code Sample by our Waldek Mastykarz and Stefan Bauer. You can find part one, a post by guest blogger by Stefan Bauer, here.
In our work, we communicate with many different people. But how do you easily find their contact information, specifically when you are on the go? Microsoft Graph has just the right answer for you.
One API to rule them all
Microsoft Graph is an API that gives you access to the Microsoft cloud. With Microsoft Graph, you can easily access raw information such as documents, meetings or e-mail. The truly great thing about the Microsoft Graph is, however, that it also provides you with easy access to insights such as what is happening in your organization or when is the best time to meet with others.
One of the insights provided by the Microsoft Graph is how to contact people you have recently been working with. And to illustrate how you could leverage it, fellow MVP Stefan Bauer and I have recently built a sample application that has just been published in the latest release of Office 365 Dev PnP.
Find relevant contacts easily on your mobile phone with OfficeDev PnP
Quick Contacts is a web application built with Angular that uses the Microsoft Graph People API to help you easily find relevant contacts.
Mobile first
The application has been built with mobile devices in mind: it can be easily operated with touch and it also supports gestures for getting the list of actions for the contacts. Specifically for this application, Stefan has designed a UX that would work on a mobile phone and at the same time be familiar to people using Office.
How we built it
Quick Contacts is an Angular web application that uses the Microsoft Graph to get the relevant contacts from the People API. It uses the ADAL JS library for authenticating with Office 365.
Phonetic searching for contacts
Upon loading, the application shows you a search field that you can use to search for contacts. Because the People API supports phonetic search, it doesn’t matter if you spell the name of your contact incorrectly: you will still be able to find who you are looking for.
This capability is invaluable particularly if you work in a global organization that employs people from all over the world.
Contact information, and more
For every contact, Quick Contacts shows you the photo, name, and title. Additionally, on every contact, you can open the list of quick actions by swiping from right to left.
Using the quick actions you can easily call, Skype or e-mail the particular person.
The People API provides you with some basic information such as name, title and the list of e-mail addresses you have used to communicate with that particular person. In Quick Contacts, we try to backfill the personal information with additional telephone numbers, photos and the personal profile link.
Loading the person picture
We load the picture using the Microsoft Graph Users API. Using the e-mail address, we first try to determine if the particular contact is in your organization (code). If the person is found, we execute another request to retrieve the person’s profile photo (code).
Loading the personal profile URL
Another piece of information that we add to the contact information is the personal profile URL. We retrieve this URL using the SharePoint Search REST API. However, rather than requesting the profile URL for every contact separately, we do that in a single search request which allows us to optimize the performance of the application.
SharePoint Search REST API supports both GET and POST requests. POST requests are particularly useful in cases when the search query can get long. Because we are combining multiple e-mail addresses into a single search query, the query could become too long for a GET request. This is why we use a POST request instead.
SharePoint REST API prerequisites – it’s all about the context
Each POST request to the SharePoint REST API has to include the Request Digest – a security token that proves that the request is authentic. A valid Request Digest can be obtained by issuing an empty POST request to the/_api/contextinfo endpoint (code) which we do before calling the SharePoint Search REST API (code).
Getting multiple profile URLs in a single Search REST API call
After we received a valid Request Digest we combine the multiple e-mail addresses into a single SharePoint Search query (code).
Next, we build the search payload (code) where we specify the query as well as which properties we want to retrieve and how many results we want to get back.
Finally, we execute the SharePoint Search REST API POST request (code). In the results, we match each result using the e-mail address (code) and add the newly retrieved profile page URL to the existing user information object.
As a result, we can display a complete contact card including the photo, contact information and the profile link to get more information about that particular person.
Next steps
Quick Contacts is available on GitHub as a part of the OfficeDev PnP repository. It is a great starting point if you want to learn more about building Microsoft Graph solutions using Angular and I would strongly encourage you to clone the repository and run the sample application.
I’m very interested in hearing if you find the sample useful and if you have any questions about how it’s working or how it’s built. Also, if you have questions about other APIs available as a part of the Microsoft Graph and would like to see some samples showing how they work, don’t hesitate to reach out.
You can take a deeper look into the development of the user interface and user experience in a recent blog post by Stefan Bauer.
This blog post was originally published on Waldek’s blog at blog.mastykarz.nl
