0

Hi is there anyway to manipulate PeoplePicker using JSOM. How tho get or set value of PeoplePicker using JavaScript

3

This Code perfectly works on SharePoint 2013.

References To be added:

<SharePoint:ScriptLink name="clientforms.js" runat="server" LoadAfterUI="true" Localizable="false"/>
<SharePoint:ScriptLink name="clientpeoplepicker.js" runat="server" LoadAfterUI="true" Localizable="false"/>
<SharePoint:ScriptLink name="autofill.js" runat="server" LoadAfterUI="true" Localizable="false"/>

<script type="text/javascript" src="../SiteAssets/jquery-1.11.1.js"></script>
<script type="text/javascript" src="../SiteAssets/SPReferences/MicrosoftAjax.js"></script>
<script type="text/javascript" src="../SiteAssets/SPReferences/sp.runtime.js"></script>
<script type="text/javascript" src="../SiteAssets/SPReferences/sp.js"></script>

JSOM Code:

$(document).ready(function(){
         SetPeoplePicker_Multiselect("peoplePickerspanId",true);  
    });
    function SetPeoplePicker_Multiselect(peoplePickerElementId, allowMultiple){
        if (allowMultiple == null) {
            allowMultiple = true;
        }
        var schema = {};
        schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
        schema['SearchPrincipalSource'] = 15;
        schema['ResolvePrincipalSource'] = 15;
        schema['AllowMultipleValues'] = allowMultiple;
        schema['MaximumEntitySuggestions'] = 50;
        schema['Width'] = '';
        SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
    }

Design:

<span id="peoplePickerspanId"> </span>
  • Perfectly worked for me...thanks.!.. you saved my Day..:) – Pranav Bilurkar Mar 12 '15 at 9:29
0

You can use jQuery selectors to do this.

You need to locate the people picker using selectors and pass the values or get the values.

For example, My people picker control is placed inside a <td> with id "peoplePicker" then I could use the following code to locate and get or set values

get values

var people=$("#peoplePicker").find("div[role='TextBox']").text();

set value

var people="testUser";
$("#peoplePicker").find("div[role='TextBox']").text(people);

to verify if the username is exsist or not include the following code after passing the value

$("#peoplePicker").find("img").click();
  • this may work for now but what if there are tow users with same name there it wont be easy to determine which one did user intended to select – Akshay Randive Mar 4 '15 at 9:48
0

You can use SPServices to interact with people picker

$().SPServices.SPFindPeoplePicker({
  peoplePickerDisplayName: "",
  valueToSet: "",
  checkNames: true
});

Reference: http://spservices.codeplex.com/wikipage?title=%24().SPServices.SPFindPeoplePicker

  • Thanks @AnandKrishnan but for some purpose I dont want to use SPServices for now is there a way with JSOM only. – Akshay Randive Mar 4 '15 at 5:52

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.