Tuesday, May 05, 2015

Get User Profile Properties and Update using JSOM

Since everyone of the Office 365 and SharePoint Community is in Microsoft ignite Conference to see the new launches of the products services, i would like to talk more specific to Office 365 Dev and API update that was launch some time ago with a nice article writed by Vesa Juvonen SharePoint user profile properties now writable with CSOM for the PnP community.

The good stuff about Office 365 is the constant updates and new releases of the API and new services to support the different Products inside Office 365 what turns a very strong Cloud Service and reliable for enterprises.
  
The solution created in SharePoint-Hosted get a specific user from the people picker control and return the associated properties from the User Profile, after update the Text you can use update the property if have Write permission, not all User profiles Properties has Write Permission, but all have Read Permissions.
this can be useful if you need to update specific Properties from User profile and avoid a loot of click to get the correct user and property.

There are some interesting links listed bellow in the article you can use to explore about this topic.

The solution was created using Napa and can be accessed in the following link http://aka.ms/Irhs4v.




Solution "Get User profile Properties and Update SharePoint App"


The Starting point was a creation of Napa App solution in my SharePoint Environment where i define the HTML and include the support API for this solution, since i user multiple controls i include the following support files:

  • Jquery
People Picker
  • clienttemplates.js
  • clientforms.js
  • clientpeoplepicker.js
  • autofill.js
SharePoint JSOM Objects
  • sp.runtime.js
  • sp.js
SharePoint User Profile Objects
  • sp.userprofiles.js





App Permission

You need to include in the App Write permissions from User Profile Service to be able update the properties associated with a user.




Social:

  • User Profiles - Write


The Solution picks a user from SharePoint return the Properties data associated where you can update, if has Write permissions.



If everything goes ok you should get a message with success message.





Here you have a Code Example to manage the User Profile properties and Update Property



var UserId = "";

$(document).ready(function () {
    initializePeoplePicker('peoplePickerDiv');
    //GetUser();
});
function changeFunc() {
    var selectBox = document.getElementById("mySelect");
    var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    document.getElementById('TextContent').value = selectedValue;
}
function GetUser() {

    var select = document.getElementById("mySelect");
    var length = select.options.length;
    for (i = length; i > -1; i--) {
        select.remove(i);
    }
    getProperties(UserId.replace("#""%23"));
}

function getPropertyValue(LoginName, selectedValue) {
    $.ajax({
        url: getQueryStringParameter('SPAppwebUrl') + "/_api/SP.UserProfiles.PeopleManager/GetUserProfilePropertyFor(accountName=@v,propertyName='" + selectedValue + "')?@v=" + "%27" + LoginName + "%27",
        type: "GET",
        headers: { "ACCEPT""application/json;odata=verbose" },
        success: function (data) {
            document.getElementById("mySelect").options[document.getElementById("mySelect").selectedIndex].value = data.d.GetUserProfilePropertyFor;
        },
        error: function () {
            alert("Failed to get customer");
        }
    });
}

function getProperties(LoginName) {
    $.ajax({
        url: getQueryStringParameter('SPAppWebUrl') + "/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v='" + LoginName + "'",
        type: "GET",
        headers: { "ACCEPT""application/json;odata=verbose" },
        success: function (data) {
            var x = document.getElementById("mySelect");
            var option;
            for (var i = 0; i < data.d.UserProfileProperties.results.length; i++) {
                option = document.createElement("option");
                option.text = data.d.UserProfileProperties.results[i].Key;
                option.value = data.d.UserProfileProperties.results[i].Value;
                x.add(option);
            }
        },
        error: function () {
            alert("Failed to get customer");
        }
    });
}

function SetCurrentUserProperties() {
    var clientContext = SP.ClientContext.get_current();
    var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);
    var selectBox = document.getElementById("mySelect");
    var selectedValue = selectBox.options[selectBox.selectedIndex].text;
    peopleManager.setSingleValueProfileProperty(UserId, selectedValue, document.getElementById('TextContent').value);

    clientContext.executeQueryAsync(function () {
        getPropertyValue(UserId.replace("#""%23"), selectedValue);
        SP.UI.Notify.addNotification("properties updated!"false);
    }, function (sender, args) {
        alert(args.get_message());
    });
}
function initializePeoplePicker(peoplePickerElementId) {

    var schema = {};
    schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
    schema['SearchPrincipalSource'] = 15;
    schema['ResolvePrincipalSource'] = 15;
    schema['AllowMultipleValues'] = false;
    schema['MaximumEntitySuggestions'] = 50;
    schema['Width'] = '280px';
    schema['Height'] = '55px';

    this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
}

function getUserInfo() {

    var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;

    var users = peoplePicker.GetAllUserInfo();
    var userInfo = '';
    for (var i = 0; i < users.length; i++) {
        var user = users[i];
        for (var userProperty in user) {
            userInfo += userProperty + ':  ' + user[userProperty] + '<br>';
        }
    }
    var keys = peoplePicker.GetAllUserKeys();
    UserId = users[0].Key;
    GetUser();
}
function getQueryStringParameter(param) {
    var params = document.URL.split("?")[1].split("&");
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == param)
            return decodeURIComponent(singleParam[1]);
    }
    return "";

}


The solution was created using Napa and can be accessed in the following Link
http://aka.ms/Irhs4v

Some useful articles for this topic. Read or update user profile properties sample app for SharePoint
https://msdn.microsoft.com/en-us/library/office/dn894690.aspx
SharePoint user profile properties now writable with CSOM
http://blogs.msdn.com/b/vesku/archive/2014/11/07/sharepoint-user-profile-properties-now-writable-with-csom.aspx
SharePoint 2013: Get UserProfile Properties with REST API- from Vardhaman Deshpande
http://www.vrdmn.com/2013/07/sharepoint-2013-get-userprofile.html
How to: Use the client-side People Picker control in SharePoint-hosted apps
https://msdn.microsoft.com/en-us/library/jj713593.aspx

Hope you enjoy this article,
André Lage
Post a Comment