PeoplePicker not loading in a ASP.net page - SharePoint

Question

I am able to load the peoplepicker control in a page created within SharePoint using the code below but the same when i try to load in a .net application, integrated in SharePoint then i am unable to get the desired result.

After checking multiple blogs I finally ended up using the below references :

<script src= "../includes/js/modernizr-1.6.min.js" type="text/javascript"></script>
<script src= "../includes/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src= "../includes/js/jquery.ui.all.js" type="text/javascript"></script>
<script type="text/javascript" src="/_layouts/1033/init.js"></script>
<script type="text/javascript" src="../includes/js/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/sp.core.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/clientforms.js"></script>
<script type="text/javascript" src="/_layouts/15/clientpeoplepicker.js"></script>
<script type="text/javascript" src="/_layouts/15/autofill.js"></script>
<script type="text/javascript" src="/_layouts/15/1033/initstrings.js"></script>
<script type="text/javascript" src="/_layouts/15/clienttemplates.js"></script>
<script src="/_layouts/15/1033/strings.js" type="text/javascript"></script>

and the code i use is :

function initializePeoplePicker() {

    // Create a schema to store picker properties, and set the properties.
    var schema = {};
    schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
    schema['SearchPrincipalSource'] = 15;
    schema['ResolvePrincipalSource'] = 15;
    schema['AllowMultipleValues'] = true;
    schema['MaximumEntitySuggestions'] = 50;
    schema['Width'] = '220px';

   this.SPClientPeoplePicker_InitStandaloneControlWrapper('peoplePickerDiv', null, schema);
}

I am able to see the desired results in a SharePoint webpart page as shown below :

but the moment i try to do the same in a asp.net project which is deployed as an app in SharePoint server then the code stops working.

I believe the issue is with the references but i tried numerous combinations but nothing worked. Kindly help.

UPDATE

In the screenshot below, you can see that it is trying to reach in IIS path for the webservice call which will surely not work. Can you help me fix this? Is there anyway i can call the scripts with respect to current SharePoint context?

Answer 1

Try using the PnP PeoplePicker instead. More information can be found on https://github.com/SharePoint/PnP/tree/master/Components/Core.PeoplePicker

The component is created specifically for use inside provider hosted apps.

Answer 2

Below is our working solution for people picker on client side. See it might helpful to trace your problem.

<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/clienttemplates.js">  </script>
<script type="text/javascript" src="/_layouts/15/clientforms.js">  </script>
<script type="text/javascript" src="/_layouts/15/clientpeoplepicker.js"></script>
<script type="text/javascript" src="/_layouts/15/autofill.js"></script>

<div id="supervisorPeoplePicker" class="form-control-people"></div>

initializePeoplePicker function(controlId) {

        var schema = {};
        schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
        schema['SearchPrincipalSource'] = 15;
        schema['ResolvePrincipalSource'] = 15;
        schema['AllowMultipleValues'] = false;
        schema['MaximumEntitySuggestions'] = 50;
        schema['Width'] = '330px';

        SPClientPeoplePicker_InitStandaloneControlWrapper(controlId, null, schema);
    }
$(document).ready(function(){
    initializePeoplePicker("supervisorPeoplePicker");
});

Answer 3

I am able to get it working on a non-sharepoint page with the following references. (tested on SharePoint Server 2013)

<link rel="stylesheet" href="/_layouts/15/1033/styles/Themable/corev15.css" />

<!--Script files for Client People Picker-->
<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/1033/initstrings.js"></script>

<script type="text/javascript" src="/_layouts/15/1033/strings.debug.js"></script>
<script type="text/javascript" src="/_layouts/15/core.js"></script>

<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script src="/_layouts/15/clientforms.js" type="text/javascript"></script>
<script src="/_layouts/15/clientpeoplepicker.js" type="text/javascript"></script>
<script src="/_layouts/15/autofill.js" type="text/javascript"></script>
<script src="/_layouts/15/clienttemplates.js" type="text/javascript"></script>


<script src="/_layouts/15/sp.core.js" type="text/javascript"></script>
<script src="/_layouts/15/sp.runtime.js" type="text/javascript"></script>
<script src="/_layouts/15/sp.js" type="text/javascript"></script>

However, some of these references may not be needed. Remove the unnecessary ones and verify.

Answer 4

Everything seems correct in your code. You have added so many JavaScript references.

The references shown by @VenkatKonjeiti is correct.

As per my observation the only problem with your code seems, you have to use following code:

ExecuteOrDelayUntilScriptLoaded(function () {
            initializePeoplePicker('YourDivID');
        }, 'sp.core.js');

I have achieved this by adding ExecuteOrDelayUntilScriptLoaded to my code.

Edit

Please add the reference corev15app.css. I am not sure about the path because I have a physical file downloaded and uploaded in my app.

Expected path is:

<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/corev15app.css" />