How To Update SharePoint Online User Profile Properties Using SPFx And Rest API

https://<your_site_collection_url>/_api/SP.UserProfiles.PeopleManager/GetMyProperties

To get the user profile properties for specific user,

https://<your_site_collection_url>/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v='i:0%23.f|membership|[email protected]'

To get all the user profiles property for a single specific user,

https://<your_site_collection_url>/_api/SP.UserProfiles.PeopleManager/GetUserProfilePropertyFor(accountName=@v, propertyName='<property_name>')?@v='i:0%23.f|membership|[email protected]'

User profile properties are classified as single and multi-valued. For example, WorkEmail is a single valued property and the SPS-School is a multi-valued property. To update these kinds of values we are going to use the below API end points

https://<your_site_collection_url>/_api/SP.UserProfiles.PeopleManager/SetSingleValueProfileProperty

https://<your_site_collection_url>/_api/SP.UserProfiles.PeopleManager/SetMultiValuedProfileProperty

SPFX application to interact with User Profile properties

In our SPFx application, we are going to have a text box to get the property name input from the user. Then, a GET button to perform the Get operation which gets the current value from the User Profile. Then, an Update button which updates the value of the user profile property that we have chosen.

Below is the code snippet to get the user profile property which is chosen through the textbox.

private getValue() {  
    let pptName: any = this.domElement.querySelector('#txtPropertyName');  
    this.propertyName = pptName.value;  
    let apiUrl = this.context.pageContext.web.absoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetUserProfilePropertyFor(accountName=@v, propertyName='" + this.propertyName + "')?@v='" + encodeURIComponent("i:0#.f|membership|") + this.userdetails.loginName + "'";  
    let httpClient: SPHttpClient = this.context.spHttpClient;  
    httpClient.get(apiUrl, SPHttpClient.configurations.v1).then(response => {  
        response.json().then(responseJson => {  
            let newValue: any = this.domElement.querySelector('#txtPropertyValue');  
            newValue.value = responseJson.value;  
        });  
    });  
} 

Below is the code snippet to update the User Profile property value. I am differentiating the multi-value and single-valued properties using a separator “|”. So if you want to update a multivalued property using this below code, make sure that you have given “|” at the suffix like this “Engineering|”.

private updateValue() {  
    let newValue: any = this.domElement.querySelector('#txtPropertyValue');  
    this.value = newValue.value;  
    if (this.value.indexOf("|") !== -1) {  
        this.updateMultiUPValue();  
    } else {  
        this.updateSingleUPValue();  
    }  
}  
updateMultiUPValue() {  
    let apiUrl = this.context.pageContext.web.absoluteUrl + "/_api/SP.UserProfiles.PeopleManager/SetMultiValuedProfileProperty";  
    let userData = {  
        'accountName': "i:0#.f|membership|" + this.userdetails.loginName,  
        'propertyName': this.propertyName, //can also be used to set custom single value profile properties  
        'propertyValues': this.value.split("|")  
    }  
    let httpClient: SPHttpClient = this.context.spHttpClient;  
    let spOpts = {  
        headers: {  
            'Accept': 'application/json;odata=nometadata',  
            'Content-type': 'application/json;odata=verbose',  
            'odata-version': '',  
        },  
        body: JSON.stringify(userData)  
    };  
    httpClient.post(apiUrl, SPHttpClient.configurations.v1, spOpts).then(response => {  
        alert("Updated");  
    });  
}  
updateSingleUPValue() {  
    let apiUrl = this.context.pageContext.web.absoluteUrl + "/_api/SP.UserProfiles.PeopleManager/SetSingleValueProfileProperty";  
    let userData = {  
        'accountName': "i:0#.f|membership|" + this.userdetails.loginName,  
        'propertyName': this.propertyName, //can also be used to set custom single value profile properties  
        'propertyValue': this.value  
    }  
    let httpClient: SPHttpClient = this.context.spHttpClient;  
    let spOpts = {  
        headers: {  
            'Accept': 'application/json;odata=nometadata',  
            'Content-type': 'application/json;odata=verbose',  
            'odata-version': '',  
        },  
        body: JSON.stringify(userData)  
    };  
    httpClient.post(apiUrl, SPHttpClient.configurations.v1, spOpts).then(response => {  
        alert("Updated");  
    });  
} 

I hope you have understood how to update User Profile properties using SPFx and Rest API. Don’t hesitate to post your thoughts and doubts in the comment box below.

Happy SharePointing!!!