0

I am trying to set a Person or Group field value only if it is null. I am checking this on document.ready() of EditForm.aspx of listItem, where If its null, then I want to set its value to currentUser ID.

However, I have written following code and it is working sometimes and sometimes not. I did check PeoplePickerdiv[0].innerText on ready function, sometimes I get actual user value(which is expected) and sometime 'Enter Name or Email'.

Also, I am trying to set this property readOnly , But its not working in Chrome. Please suggest.

$(document).ready(function(){
    var peoplePickerDiv = $("[id$='ClientPeoplePicker']");

    var peoplePickerEditor = peoplePickerDiv.find("input");
    //alert(peoplePickerEditor.val());

    var spPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];
    alert(spPeoplePicker);
    alert(peoplePickerDiv[0].innerText);

    if(peoplePickerEditor.val() == "") \\sometimes here I am getting null value in peoplePickerEditor.val() 
    {
        peoplePickerEditor.val("currentUserID");
        peoplePickerEditor.attr("contentEditable",false);
    }
    else
    {
        peoplePickerEditor.attr("contentEditable",false);
        return false;
    }

    spPeoplePicker.AddUnresolvedUserFromEditor(true);
});
  • 1
    Check this link. – Ganesh Sanap Dec 19 '18 at 13:52
  • @GaneshSanap this did the trick. by setting time interval of 1 sec it worked. Thank You for your help. part of task is still pending of Making it readOnly in Chrome. I tried all properties, its working in IE but not in Chrome. – Vishal_chorghe Dec 19 '18 at 14:59
1

The following code for your reference.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    SP.SOD.executeFunc('clientpeoplepicker.js', 'SPClientPeoplePicker', function(){
        var peoplePickerDiv = $("[id$='ClientPeoplePicker']");
        var peoplePickerEditor = peoplePickerDiv.find("input");
        var spPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];

        //check if people picker empty
        if(spPeoplePicker.IsEmpty()){
            var userName=GetCurrentUser();
            if(userName!=""){
                peoplePickerEditor.val(userName);
                spPeoplePicker.AddUnresolvedUserFromEditor(true);
            }
        }
        //disable the people picker
        spPeoplePicker.SetEnabledState(false);
        $('.sp-peoplepicker-delImage').hide();
    });  
});
function GetCurrentUser() {
    var userName="";
    var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/currentuser";
    $.ajax({
        url: requestUri,
        method: "GET",
        async:false,
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            userName = data.d.Title;
            if(userName=="System Account"){
                userName="administrator";
            }
        },
        error: function (data) {
        }
    });
    return userName;
}
</script>

enter image description here

Reference: SharePoint 2013: Client Side People Picker

  • spPeoplePicker.SetEnabledState(false); worked in Chrome too. Thank You @LZ_MSFT. Appreciated – Vishal_chorghe Dec 20 '18 at 6:53
1

Use something like below code to get the value in person or group field:

$(document).ready(function() {
    SP.SOD.executeFunc("/_layouts/15/clientpeoplepicker.js","SP.ClientContext",function(){
    setTimeout(function(){
        test();
    },2000);
});


function test() {
    var dispTitle = "People picker title";         
    var pickerDiv = $("[id^='PeoplePickerInternalName'][title='" + dispTitle + "']");
    var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv[0].id];
    peoplePicker.OnUserResolvedClientScript = function GetData(pickerDiv) {        
         $("input[id^='field1']").val(peoplePicker.GetAllUserInfo()[0].EntityData.Email);
         $("input[id^='field2']").val(peoplePicker.GetAllUserInfo()[0].DisplayText);

    }        
}

To make input field read only/disabled:

To make input field read only/disabled, you need to add below attributes to your input field:

// for disabled i.e. cannot highlight value or change
disabled="disabled"

// for readonly i.e. can highlight value but not change
readonly="readonly"

using jQuery to make the change to the element (substitute disabled for readonly in the following for setting readonly attribute).

$('#inputFieldName').attr("disabled","disabled");

or

$('#inputFieldName').attr("disabled", true);
  • I already tried this to disable UserField, but It was not working in Chrome. SetTimeOut worked to get PeoplePicker value on document.ready(). Thank you. for disabling UserField in Chrome, LZ_MSFT's answer worked for me. – Vishal_chorghe Dec 20 '18 at 6:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.