2

I have seen plenty of examples of how to use the Client Side People Picker in a SharePoint App, but can't find anything related to how to leverage it within a SharePoint Page on a SharePoint Site. I thought this AngularJS directive looked promising but it is asking for the App URL. Is it possible to leverage this with in a SharePoint Page (not App) or does anyone else have a recommendation?

https://github.com/jasonvenema/sharepoint-angular-peoplepicker

Improve this question

2 Answers 2

Reset to default
2

Yes its possible, this is what i use, you can take a div tag to the page

<div id="managerPeoplePicker" ></div>

and below script will initialize it to people picker

 function SetPeoplePicker_Multiselect(peoplePickerElementId, allowMultiple, groupId){// arg1:div id,arg2:bool value to allow selection of more than 1 user agr3:optional groupId you want to bind people picker with 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); $("#" + peoplePickerElementId + "_TopSpan_InitialHelpText").text('Enter Manager Name'); }

you need to add reference of following js Script references required for PeoplePicker 

<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.RequestExecutor.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" />
Improve this answer
2
  • How are you setting the values that you pass into the function? Is there another function that executes the allowMultiple and groupId? Commented May 28, 2015 at 15:26
  • 1
    allowMultiple is boolean you can pass true or false and groupId is optional you can remove code related to it if you don't want to use group id check here jeremythake.com/2014/01/… Commented May 28, 2015 at 15:50
1

You should register Microsoft.SharePoint.WebControls assembly on the page first:

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

and then you can just use standard SharePoint ClientPeoplePicker, something like this:

<SharePoint:ClientPeoplePicker PrincipalAccountType="User,DL,SecGroup,SPGroup" ID="cppUsers" ValidationEnabled="true" Required="True" VisibleSuggestions="3" Rows="3" AllowMultipleEntities="True" CssClass="ms-long ms-spellcheck-true" />
Improve this answer
2
  • My page is an HTML view loaded by AngularJS. The angular app itself is loaded within a modified .aspx page so loading the .NET won't work for me Commented May 28, 2015 at 15:21
  • 1
    In this case you should create <div> container and initialize it by the js. Also, you should link standard SharePoint js lib's (like sp.js, clientpeoplepicker.js and etc) to the page first. All of them is placed in "_layouts/15/" folder. Here is the pretty good description how to manipulate PeoplePicker's from the js: [link]sharepoint.stackexchange.com/questions/87176/…. Commented May 28, 2015 at 15:56

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.