0

I am trying to use people picker to display Approver Manager and Requestor's manager on a custom form requestor will fill the form with the Requestors Manager and Approver Manager details but i am not able to retreive it using people picker.I am not sure what i am doing wrong can you please help??

<div class="row">
    <div class="col-md-6 col-sm-6">
        <div class="form-group">
            <label class="col-md-4 col-sm-4">Requestor's Manager: </label>
            <div class="col-md-8 col-sm-8">
                <div id="manager" spclientpeoplepicker="true"></div>
            </div>
        </div>
    </div>      
</div>
<div class="row">
    <div class="col-md-6 col-sm-6">
        <div class="form-group">
            <label class="col-md-4 col-sm-4">Approval Manager: </label>
            <div class="col-md-8 col-sm-8">
                <div id="amanager" spclientpeoplepicker="true"></div>
            </div>
        </div>
    </div>      
</div>

and here is the JS

var manager = [];
var amanager = [];
$(document).ready(function () {
LoadScripts();
initializePeoplePicker('manager', false, true, null, null);
initializePeoplePicker('amanager', false, true, null, null);
getSPOffset();
function initializePeoplePicker(peoplePickerElementId, allowMultipleValues, isPeopleOnly, GroupID, user) {
$.getScript("/TravelExpense/_layouts/15/clienttemplates.js", function() {
    $.getScript("/TravelExpense/_layouts/15/clientforms.js", function() {
        $.getScript("/TravelExpense/_layouts/15/clientpeoplepicker.js", function() {
            $.getScript("/TravelExpense/_layouts/15/autofill.js", function() {
                $.getScript("/TravelExpense/_layouts/15/sp.js", function() {
                    $.getScript("/TravelExpense/_layouts/15/sp.core.js", function() {
                        var schema = {};
                        if(isPeopleOnly) {
                            schema['PrincipalAccountType'] = 'User';
                        }
                        else {
                            schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
                        }
                        schema['SearchPrincipalSource'] = 15;
                        schema['ResolvePrincipalSource'] = 15;
                        schema['AllowMultipleValues'] = allowMultipleValues;
                        schema['MaximumEntitySuggestions'] = 50;
                        schema['Width'] = '280px';
                        if(GroupID != null) {
                            if (GroupID > 0) {  
                                schema['SharePointGroupID'] = GroupID  
                            }
                        }
                        SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, user, schema);
                    });
                });
            });
        });
    });
});
1

The following code for your reference:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<SharePoint:CssRegistration Name="default" runat="server"/>
<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/Themable/corev15.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<SharePoint:ScriptLink name="microsoftajax.js" runat="server" LoadAfterUI="true" Localizable="false" />  
<SharePoint:ScriptLink name="init.js" runat="server" LoadAfterUI="true" Localizable="false" />  
<SharePoint:ScriptLink name="sp.init.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="core.js" runat="server" LoadAfterUI="true" Localizable="false" />  
<SharePoint:ScriptLink name="clienttemplates.js" runat="server" LoadAfterUI="true" Localizable="false" />
<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" />
<SharePoint:ScriptLink name="sp.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="sp.runtime.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="sp.core.js" runat="server" LoadAfterUI="true" Localizable="false" />

<script type="text/javascript">
$(document).ready(function () {
initializePeoplePicker('manager', false, true, null, null);
initializePeoplePicker('amanager', false, true, null, null);
});
function initializePeoplePicker(peoplePickerElementId, allowMultipleValues, isPeopleOnly, GroupID, user) {
    var schema = {};
    if(isPeopleOnly) {
        schema['PrincipalAccountType'] = 'User';
    }
    else {
        schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
    }
    schema['SearchPrincipalSource'] = 15;
    schema['ResolvePrincipalSource'] = 15;
    schema['AllowMultipleValues'] = allowMultipleValues;
    schema['MaximumEntitySuggestions'] = 50;
    schema['Width'] = '280px';
    if(GroupID != null) {
        if (GroupID > 0) {  
            schema['SharePointGroupID'] = GroupID  
        }
    }
    this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, user, schema);
}
</script>
</head>

<body>
<form id="form1" runat="server">
<div class="row">
    <div class="col-md-6 col-sm-6">
        <div class="form-group">
            <label class="col-md-4 col-sm-4">Requestor's Manager: </label>
            <div class="col-md-8 col-sm-8">
                <div id="manager" spclientpeoplepicker="true"></div>
            </div>
        </div>
    </div>      
</div>
<div class="row">
    <div class="col-md-6 col-sm-6">
        <div class="form-group">
            <label class="col-md-4 col-sm-4">Approval Manager: </label>
            <div class="col-md-8 col-sm-8">
                <div id="amanager" spclientpeoplepicker="true"></div>
            </div>
        </div>
    </div>      
</div>
</form>
</body>
</html>

enter image description here

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.