Skip to content
    Categories
    Select Category

    Welcome to Teams Tuesday

    A podcast about mastering the best of what other people have already figured out with M365.

    Teams Tuesday focuses on insights and lessons that never expire. You’ll walk away from every episode with actionable insights that help you get better results and be more productive.

    Back to Home

    Client-Side People Picker with Angular CLI

    2 min read

    In the new non wsp world of SharePoint development, it’ all client-side development world, we are all aware of using Client-side People picker for our Custom Application including SharePoint app, but in those scenarios, we have to load a load boat lot of js files to make the People picker to actually work.

    For more information, the client-side People Picker read: Use the client-side People Picker control in SharePoint-hosted SharePoint Add-ins here.

    What if we wanted to use this functionality in Angular CLI based Applications for SharePoint, which isn’t a SharePoint List or Library?  You can implement this using REST Endpoint so that we can eliminate the loading of JS files.

    In SharePoint OOTB People picker is a simple POST operation in order to get suggestions, but you need a SharePoint List or Library.

    How to do an HTTP POST-END-POINT?

    Just like any post-operation, we need to pass a JSON Object for that we need to implement an interface that will have all the query parameters.  See below:

    _api/SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.ClientPeoplePickerSearchUser

    The Typescript above is an interface to make use of the JSON object to make a post-call.

    However, before you make the Post, the Response you need is also a Form Digest Value, so the final data call looks like this.

    Once the call was posted to SharePoint the response will look like this.

    Jump to the Angular World to build the UI for the Application

    I am making things simple by adding a text box and on the change event I am calling a function that will post data to SharePoint EndPoint then the return Data response will be massaged and displayed on the page.

    Please check the following HTML

    The final output page looks like this. Once you select the suggestion user info will be resolved as shown below.

    I will be presenting next Saturday at SharePoint Saturday at the Microsoft Offices in New York City. To learn more information and register for the event click here.

    Further Reading

    The source code of this article:

    Tools: 

    https://cli.angular.io

    https://nodejs.org/en/docs/guides/getting-started-guide/

    https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-5.html

    PrimeNG

    Technical requirements:

    Comments are closed.