PeoplePicker using JSOM

Question

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

Answer 1

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>

Answer 2

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();

Answer 3

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