How add value to User field using REST API

As all we know, SharePoint is having People field in list. We can add data for this field from custom webpart. There is lots of way to add listitems like server side (c#), client side (SP Client Context or REST API). We will see how to add value to user field using REST.

In REST, you can't get Proper column name of User Field. For Example, If you are having field with Owner as Column name. REST will not provide the value with Owner column. It will give two properities like OwnerId, OwnerString.

We have to pass the value for OwnerId. So first get the UserID for selected user. Then pass the ID to OwnerId field.

 let Listdata = JSON.stringify({

            "__metadata": { 'type': 'SP.Data.ListItem' },

           

    "OwnerId": 26

        })

How to render People Picker in Client side using Typescript

SharePoint gives provision to get Site Users using People Picker. It will get Groups and People of the site. In a same way we can add people picker in custom webpart. We can easily add this control in Farm solution. But Client side can't add this directly. Let's see the steps to render this using typescript.


declare the followings

declare var SP: any;

declare var SPClientPeoplePicker: any;

declare var SPClientPeoplePicker_InitStandaloneControlWrapper: any;

Then, Initialize the control.

InitializePeoplePicker() {
        var schema = {};
        schema['PrincipalAccountType'] = 'User,DL';
        schema['SearchPrincipalSource'] = 15;
        schema['ResolvePrincipalSource'] = 15;
        schema['AllowMultipleValues'] = false;
        schema['MaximumEntitySuggestions'] = 50;

        schema['Width'] = '100%';

SPClientPeoplePicker_InitStandaloneControlWrapper('managementPeopleDiv', null, schema);

}

Call InitializePeoplePicker() function when all the controls are loaded in the page. So i have called this function on ngAfterViewInit()

Give the placeholder for people picker in HTML side.

<div id="managementPeopleDiv" class="peoplepicker"></div>

That's all build the app and place the JS filesin SharePoint library. 

Integrating angular app with SharePoint

We can able to integrate angular application with SharePoint. We can get data from SharePoint using REST API. Let's see the steps to integrate this.

Create An Angular APP

Here is the quick steps to create an angular application. Make the Production package using ng build in command prompt. We will get dist folder in project path.

Integrate with SP

We will get 5 js files within dist folder. Copy those files and paste that in any SharePoint library. Commonly we will use Site Assets for storing these kind of dll files. Create a folder in Site Assets to upload those files.

Then Create one page in Site Pages library. And open this page in SharePoint Designer.

Choose Advanced Mode option at top ribbon. Alter the form like below image.

Save the page. Open the page in browser. We will get an output of angular app. That's all.