none
People Picker RRS feed

  • Question

  • Hi,

    I'm trying to achieve the following for new list item.  I'm very new to jquery.  Any advice on how I should go about doing this

    Upon clicking ths [Save] button, program to check the People Picker field.  If the no. of names is less than 6 or more than 10, an alert will be triggered, focus will be set at the People Picker field and form will not be saved.


    Monday, May 18, 2020 7:40 AM

Answers

  • Below query help for your requirement:

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script language="javascript" type="text/javascript">
            function PreSaveAction() {
                var check = false;
                var controlName = 'MultiUsers';
                // Get the people picker object from the page.
                var peoplePickerDiv = $("[id$='ClientPeoplePicker'][title='" + controlName + "']");
                var peoplePickerEditor = peoplePickerDiv.find("[title='" + controlName + "']");
                var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];
                if (!peoplePicker.IsEmpty()) {
                    if (peoplePicker.HasInputError) return false; // if any error
                    else if (!peoplePicker.HasResolvedUsers()) return false; // if any invalid users
                    else if (peoplePicker.TotalUserCount > 0) {
                        // Get information about all users.
                        if (peoplePicker.TotalUserCount < 6 || peoplePicker.TotalUserCount > 10) {
                            alert('fail');
                            //to do
                        }
                        var users = peoplePicker.GetAllUserInfo();
                        for (var i = 0; i < users.length; i++) {
                            console.log(users[i].Key);
                        }
                    }
                } else {
                    alert('No user');
                }
                return check;
            }
    </script>

    Thanks & Regards,


    sharath aluri

    • Marked as answer by piyo27 Tuesday, June 2, 2020 8:30 AM
    Monday, May 18, 2020 1:11 PM
  • Hi Baker and Sharath,

    Thanks and really appreciate both Sharath and your help.  Managed to run the code without the error msg "SharePoint is not responding due to a long-running script". Problem is due to an additional '}' in the code.

    Thanks...

    • Marked as answer by piyo27 Tuesday, June 2, 2020 8:30 AM
    Tuesday, June 2, 2020 8:29 AM

All replies

  • Below query help for your requirement:

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script language="javascript" type="text/javascript">
            function PreSaveAction() {
                var check = false;
                var controlName = 'MultiUsers';
                // Get the people picker object from the page.
                var peoplePickerDiv = $("[id$='ClientPeoplePicker'][title='" + controlName + "']");
                var peoplePickerEditor = peoplePickerDiv.find("[title='" + controlName + "']");
                var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];
                if (!peoplePicker.IsEmpty()) {
                    if (peoplePicker.HasInputError) return false; // if any error
                    else if (!peoplePicker.HasResolvedUsers()) return false; // if any invalid users
                    else if (peoplePicker.TotalUserCount > 0) {
                        // Get information about all users.
                        if (peoplePicker.TotalUserCount < 6 || peoplePicker.TotalUserCount > 10) {
                            alert('fail');
                            //to do
                        }
                        var users = peoplePicker.GetAllUserInfo();
                        for (var i = 0; i < users.length; i++) {
                            console.log(users[i].Key);
                        }
                    }
                } else {
                    alert('No user');
                }
                return check;
            }
    </script>

    Thanks & Regards,


    sharath aluri

    • Marked as answer by piyo27 Tuesday, June 2, 2020 8:30 AM
    Monday, May 18, 2020 1:11 PM
  • Hi piyo27,

    We can put the validation code in PreSaveAction function, it will be triggered when you click Save button. Below is a blog about PreSaveAction.

    @Sharath Aluri (MCP, MCSE, MCSA) has provided a good demo. 

    peoplePickerDiv is the container of client side people picker. Ex. Below is a test form on my SP 2013 environemnt:

    The field name is "MultipleUsers", then the related container is :

    You can directly print it in the browser console :

    To get the count of all the filled users, we can use below function:

    Best Regards,

    Baker Kong


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click  here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, May 19, 2020 1:42 AM
  • Hi Baker,

    Thanks so much for your reply and valuable advice.  Allow me some time to test it out as I'm currently away from office.

    Thanks...

    Tuesday, May 19, 2020 9:18 AM
  • Hi Sharath,

    Thanks and really appreciate the solutioning.  Allow me some time to test out the code as I'm cuurently away from office.

    Thanks... 

    Tuesday, May 19, 2020 9:22 AM
  • Hi piyo27,

    Regarding this issue, may i know how's going? Does it get resolved? 

    Please feel free to talk with us if you have further question.

    Thanks 

    Baker Kong


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click  here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, May 27, 2020 2:27 AM
  • Hi Baker,

    Apologies for the late reply.  Will be able to get back by tomorrow.

    Thursday, May 28, 2020 4:55 AM
  • Hi,

    I have a few People Picker fields in the form and checks are required for all.Will also need to retrieve the email and put in another field.

    Tried the below code but don't seems to work. Any advice pls. Thanks.

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script language="javascript" type="text/javascript">
            function PreSaveAction() {
                var controlAppr = 'Approver';
                // Get the people picker object from the page.
                var peoplePickerDivAppr = $("[id$='ClientPeoplePicker'][title='" + controlAppr + "']");
                var peoplePickerEditorAppr = peoplePickerDivAppr.find("[title='" + controlAppr + "']");
                var peoplePickerAppr = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDivAppr[0].id];
                if (!peoplePickerAppr.IsEmpty()) {
                    if (peoplePickerAppr.HasInputError) return false; // if any error
                    else if (!peoplePickerAppr.HasResolvedUsers()) return false; // if any invalid users
                    else if (peoplePickerAppr.TotalUserCount > 0) {
                        // Get information about all users.
                        if (peoplePickerAppr.TotalUserCount < 6 || peoplePickerAppr.TotalUserCount > 10) {
                            alert('fail');
    return false;
                        }
        else {
    userEmailAppr="";
                        var userAppr = peoplePickerAppr.GetAllUserInfo();
                        for (var iAppr = 0; iAppr < userAppr.length; iAppr++) {
         userEmailAppr += userAppr[iAppr].EntityData.Email + ";";
                        }
        $("input[title='ApprEmail']").val(userEmailAppr);
    return true;
        }
                    }
                } else {
                    alert('No user');
    return false;
                }
                
                var controlReq = 'Requestor';
                // Get the people picker object from the page.
                var peoplePickerDivReq = $("[id$='ClientPeoplePicker'][title='" + controlReq + "']");
                var peoplePickerEditorReq = peoplePickerDivReq.find("[title='" + controlReq + "']");
                var peoplePickerReq = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDivReq[0].id];
                if (!peoplePickerReq.IsEmpty()) {
                    if (peoplePickerReq.HasInputError) return false; // if any error
                    else if (!peoplePickerReq.HasResolvedUsers()) return false; // if any invalid users
                    else if (peoplePickerReq.TotalUserCount > 0) {
                        // Get information about all users.
                        if (peoplePickerReq.TotalUserCount < 5 || peoplePickerReq.TotalUserCount > 10) {
                            alert('fail');
    return false;
                        }
        else {
    userEmailReq="";
                        var userReq = peoplePickerReq.GetAllUserInfo();
                        for (var iReq = 0; iReq < userReq.length; iReq++) {
         userEmailReq += userReq[iReq].EntityData.Email + ";";
                        }
        $("input[title='ReqEmail']").val(userEmailReq);
    return true;
        }
                    }
                } 
        else {
                    alert('No user');
    return false;
                }
            }
    </script>

    Thursday, May 28, 2020 1:27 PM
  • Hi piyo27,

    May i know the error msg? Can you debug then print the message? And the your SP version is 2013, right?

    Meanwhile, if you want to auto populate the email box with the value gathered from people picker, you could attach a callback to the change event of people picker :

    Best Regards,

    Baker Kong


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click  here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Friday, May 29, 2020 8:14 AM
  • Hi Baker,

    I managed to get the code working but the script seems a bit too long and I received msg "SharePoint is not responding due to a long-running script".  As the code is kind of repetitive thus I tried to put all the repetitive portion as a function.  Call the function with PreSaveAction (not sure if there is feasible) but function does not invoke.  Any advice how could this be resolved?

    Thanks...

    Saturday, May 30, 2020 8:09 AM
  • Hi piyo27,

    I created following fields in my SP 2013 and tested following code:

    function PreSaveAction() {
        let controlAppr = 'Approver';
        let controlReq = 'Requestor';
    
        let p1div_id = $("div[title='" + controlAppr + "'][spclientpeoplepicker='true'][id^='" + controlAppr + "']").attr('id');
        let peoplePickerAppr = SPClientPeoplePicker.SPClientPeoplePickerDict[p1div_id];
    
        let p2div_id = $("div[title='" + controlReq + "'][spclientpeoplepicker='true'][id^='" + controlReq + "']").attr('id');
        let peoplePickerReq = SPClientPeoplePicker.SPClientPeoplePickerDict[p2div_id];
    
        if (!peoplePickerAppr || !peoplePickerReq) {
            alert("peoplepeicker initialization fail!");
            return false;
        }
    
        if (!peoplePickerAppr.HasResolvedUsers() || !peoplePickerReq.HasResolvedUsers()) {
            alert("peoplepeicker has no users!");
            return false;
        }
    
        // check Approver people picker users
        if (peoplePickerAppr.TotalUserCount < 6 || peoplePickerAppr.TotalUserCount > 10) {
            alert(controlAppr + " user count not in vaild rang!");
            return false;
        }
    
        // Get controlAppr email address
        let userEmailAppr = peoplePickerAppr.GetAllUserInfo().map(x => x.EntityData.Email);
    
        //copy to approval email box
        $("input[title='ApprEmail']").val(userEmailAppr);
    
    
        // check Requestor people picker users
        if (peoplePickerReq.TotalUserCount < 6 || peoplePickerReq.TotalUserCount > 10) {
            alert(controlReq + " user count not in vaild rang!");
            return false;
        }
    
        // Get controlReq email address
        let userEmailReq = peoplePickerReq.GetAllUserInfo().map(x => x.EntityData.Email);
    
        //copy to approval email box
        $("input[title='ReqEmail']").val(userEmailReq);
    
        return true;
    }
    

    It works well here, you may have a try. 

    Thanks 

    Baker Kong


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click  here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, June 1, 2020 9:44 AM
  • Hi Baker and Sharath,

    Thanks and really appreciate both Sharath and your help.  Managed to run the code without the error msg "SharePoint is not responding due to a long-running script". Problem is due to an additional '}' in the code.

    Thanks...

    • Marked as answer by piyo27 Tuesday, June 2, 2020 8:30 AM
    Tuesday, June 2, 2020 8:29 AM
  • Hi Baker and Sharath,

    Thanks and really appreciate both Sharath and your help.  Managed to run the code without the error msg "SharePoint is not responding due to a long-running script". Problem is due to an additional '}' in the code.

    Thanks...

    Hi piyo27,

    That's really good. Glad to hear this has been resolved. Hope you're delighted with our community, feel free to communicate with us in the future if you have other sp dev questions.

    Best Regards,

    Baker Kong


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click  here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, June 2, 2020 8:53 AM