SharePoint Online (Office 365) - AutoResolve people picker with current user and detect change in people picker value

Hello,

I am trying to implement a solution in SharePoint Online by customizing the NewForm.aspx page of a out of the box Calendar List using javascript with the following requirements:

1. When page loads, a people picker field gets automatically populated with the current logged in user (and automatically resolved)
2. If a the user changes the value of the people picker, I want to be able to detect the value change event so that I can apply some custom logic

For the first requirement, I was able to populate the people picker field but not automatically resolve it.
For the second requirement, I was not able to detect the change on the poeple picker's value.

In the end you can find the code I am using and it contains several approaches on second requirement that I was still not able to put any of them to work.

The problem seems to be accessing the people picker object itself using the following code:

var peoplePickerDiv = jQuery("div[title='People Picker']");
var peoplePickerDivId = peoplePickerDiv.attr('id');
var peoplePickerObject = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDivId];

In runtime, the peoplePickerObject is always null. 

In the research I made on the Internet, any solution to address both requirements used the above code, i.e., getting a SPClientPeoplePicker object by acessing SPClientPeoplePickerDict supplying the people picker's Id. I confirmed that the id I am supplying is correct.

NOTE: I was able to sucessfully use the same approach against on-prem SharePoint 2013 but not with SharePoint Online. Not sure if HTML of the poeple picker changed or there is a different behavior of the javascript API to get SPClientPeoplePicker objects in SharePoint Online in comparison with on-prem SharePoint 2013.

Did someone found the same problem and was able to solve it?


Code I am using:

<script type="text/javascript" src="/DevSupport/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="/_layouts/15/clientforms.js"></script>
<script type="text/javascript" src="/_layouts/15/clientpeoplepicker.js"></script>
<script type="text/javascript" src="/_layouts/15/autofill.js"></script>
<script type="text/javascript">

var loginName;

jQuery(document).ready(function () {
//alert("page loaded");
SetPeoplePickerWithCurrentUser();
SetCurrentUserAvailableDays();

jQuery(".ms-inputuserfield").bind('input propertychange', function() { 
     alert("Onchange event" ); 
})

ExecuteOrDelayUntilScriptLoaded(function () {
        setTimeout(function () {
            attachPeoplePickerChange();
        }, 2000);
    }, 'clientpeoplepicker.js');

/*jQuery(".ms-inputuserfield textarea").change(function() {
 alert( "Handler for .change() called." );
});

jQuery(".ms-input").change(function() {
 alert( "Handler for input .change() called." );
});*/

//attachPeoplePickerChange();
}); /*End document ready*/

function SetPeoplePickerWithCurrentUser()
{
var userid = _spPageContextInfo.userId;

//alert("userid: " + userid);

var endpointUrl = _spPageContextInfo.webAbsoluteUrl
+ "/_api/web/getuserbyid(" + userid + ")";
var requestHeaders = { "accept" : "application/json;odata=verbose" };

jQuery.ajax({
   type: "GET",
   url: endpointUrl,
   contentType: "application/json; charset=utf-8",
   dataType: "json"
})
.done(function (data) {
   loginName = data.Title;
   //alert("loginName: " + loginName);
   //SetUserFieldValue("Colaborador",loginName);
   window.setTimeout(SetPeoplePicker, 500);
   //SetUserFieldValue("People Picker",loginName);
})
.fail(function (jqXHR, textStatus, errorThrown) {
   alert("Error: " + errorThrown);
   console.log(jqXHR.status + " : " + textStatus + " - " + errorThrown);
})
.always(function () {
}); 
}

function SetPeoplePicker()
{
SetUserFieldValue("People Picker", loginName);
}

function SetUserFieldValue(fieldName, userName) {
var peoplePickerDiv = jQuery("div[title='" + fieldName + "']");
var peoplePickerDivId = peoplePickerDiv.attr('id');
//var peoplePickerEditorInput = jQuery("input[title='" + fieldName + "']");
//var peoplePickerEditorInput = jQuery("textarea[title='" + fieldName + "']");
var peoplePickerEditorInput = peoplePickerDiv.find("[title='" + fieldName + "']");
    //alert(userName);
//peoplePickerEditorInput.val(userName);

jQuery("div[title='People Picker']").text(userName);

    //Find the Specific People picker field "Colaborador" and set its value
    /*jQuery().SPServices.SPFindPeoplePicker({
  peoplePickerDisplayName: "Colaborador",
  valueToSet: user,
  checkNames: true
});*/

//var peoplePickerEditorObject = SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;
//var peoplePickerEditorObject = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDivId];
//var peoplePickerEditorObject = SPClientPeoplePicker.SPClientPeoplePickerDict["ctl00_ctl40_g_a543006a_dd2e_46e0_93c8_deeb4d72af44_ctl00_ctl05_ctl06_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_downlevelTextBox"];
//peoplePickerEditorObject.AddUnresolvedUserFromEditor(true);
//_PeoplePickerEditor.attr("disabled", "disabled");
}

function SetCurrentUserAvailableDays()
{
var userid = _spPageContextInfo.userId;

//alert("userid: " + userid);

var endpointUrl = _spPageContextInfo.webAbsoluteUrl
+ "/_api/web/lists/getbytitle('Dias Férias 2016')/items?$filter=IniciaisId eq " + userid;
var requestHeaders = { "accept" : "application/json;odata=verbose" };

jQuery.ajax({
   type: "GET",
   url: endpointUrl,
   contentType: "application/json; charset=utf-8",
   dataType: "json"
})
.done(function (data) {
   var availableDays = data.value[0].Dias_x0020_dispon_x00ed_veis;
   jQuery("input[title='Dias úteis']").val(availableDays);
})
.fail(function (jqXHR, textStatus, errorThrown) {
   alert("Error: " + errorThrown);
   console.log(jqXHR.status + " : " + textStatus + " - " + errorThrown);
})
.always(function () {
}); 
}

function attachPeoplePickerChange() {
    //container needs to be an dom element containing the peoplepicker
    var peoplePickerDiv = jQuery("div[title='People Picker']");
    var peoplePickerDivId = peoplePickerDiv.attr('id');
    //helper function to ensure all elements are already created
    var addOnChanged = function (ctx) {
    //alert("addOnChanged");
        //is everything ready we need?
        if (SPClientPeoplePicker && SPClientPeoplePicker.SPClientPeoplePickerDict && SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDivId]) {
            //get picker instance (which has a lot of useful properties btw)
            alert("addOnChanged");
            var picker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDivId];
            //save old event (needs to stay in its context due to internal calls
            picker.oldChanged = picker.OnControlResolvedUserChanged;
            picker.OnControlResolvedUserChanged = function () {
                //do your code here
                console.log('OnControlResolvedUserChanged');
                //get current selected users
                console.log(picker.GetAllUserInfo());
                //let old event do its magic
                picker.oldChanged();
            };
        } else {
            //not everything was ready - wait a 10th of a sec
            setTimeout(function () { addOnChanged(ctx); }, 100);
        }
    };
    addOnChanged();
}

</script>

Thanks,
Miguel