SharePoint People Picker

Code for Js

  1. (function($) {  
  2.     RegisterScriptFiles('clienttemplates.js');  
  3.     RegisterScriptFiles('clientforms.js');  
  4.     RegisterScriptFiles('clientpeoplepicker.js');  
  5.     RegisterScriptFiles('autofill.js');  
  6.   
  7.     function RegisterScriptFiles(filename) {  
  8.         var scriptEle = document.createElement('script');  
  9.         scriptEle.setAttribute("type""text/javascript")  
  10.         scriptEle.setAttribute("src""/_layouts/15/" + filename);  
  11.         document.getElementsByTagName("head")[0].appendChild(scriptEle)  
  12.     }  
  13.     // Render and initialize the client-side People Picker.  
  14.     function initializePeoplePicker(eleId) {  
  15.         // Create a schema to store picker properties, and set the properties.  
  16.         var schema = {};  
  17.         schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';  
  18.         schema['SearchPrincipalSource'] = 15;  
  19.         schema['ResolvePrincipalSource'] = 15;  
  20.         schema['AllowMultipleValues'] = true;  
  21.         schema['MaximumEntitySuggestions'] = 50;  
  22.         schema['Width'] = '280px';  
  23.         // Render and initialize the picker.  
  24.         // Pass the ID of the DOM element that contains the picker, an array of initial  
  25.         // PickerEntity objects to set the picker value, and a schema that defines  
  26.         // picker properties.  
  27.         this.SPClientPeoplePicker_InitStandaloneControlWrapper(eleId, null, schema);  
  28.     }  
  29.   
  30.     function GetPeoplePickerValues(eleId) {  
  31.         var toSpanKey = eleId + "_TopSpan";  
  32.         var peoplePicker = null;  
  33.         // Get the people picker object from the page.  
  34.         //var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;  
  35.         var ClientPickerDict = this.SPClientPeoplePicker.SPClientPeoplePickerDict;  
  36.         // Get the people picker object from the page.  
  37.         for (var propertyName in ClientPickerDict) {  
  38.             if (propertyName == toSpanKey) {  
  39.                 peoplePicker = ClientPickerDict[propertyName];  
  40.                 break;  
  41.             }  
  42.         }  
  43.         if (peoplePicker != null) {  
  44.             // Get information about all users.  
  45.             var users = peoplePicker.GetAllUserInfo();  
  46.             var userInfo = '';  
  47.             for (var i = 0; i < users.length; i++) {  
  48.                 var user = users[i];  
  49.                 userInfo += user['DisplayText'] + ";#";  
  50.             }  
  51.             return userInfo;  
  52.         } else return '';  
  53.     }  
  54.     $.fn.spPeoplePicker = function() {  
  55.         var eleId = $(this).attr('id');  
  56.         ExecuteOrDelayUntilScriptLoaded(function() {  
  57.             initializePeoplePicker(eleId);  
  58.         }, 'sp.core.js');  
  59.     };  
  60.     // Query the picker for user information.  
  61.     $.fn.getUserInfo = function() {  
  62.         var eleId = $(this).attr('id');  
  63.         var spUsersInfo = GetPeoplePickerValues(eleId);  
  64.         return spUsersInfo.slice(0, -2);  
  65.     }  
  66. })(jQuery);  
Procedure

Step 1

Save Above code as JS file and refer to it in your Program

Step 2

Call it by using the below function
  1. $(function() {  
  2.     $('#ppDefault').spPeoplePicker();  
  3. });  
Step 3 

Create below div in your Html file
  1. <div id="ppDefault"></div>  

Step 4

Add schema ['SharePointGroupID'] = (Group No(eg 7)); in function initializePeoplePicker(eleId) to Filter Users from Invidual Group....//(this if For only Members in the Group hav loaded in People Picker..)

i.e. schema['SharePointGroupID'] = 7;

Step 5

Create the .txt File using the above procedure, and include the hyperlink of Js created in step 1 and add Min.jss and relevant CSS

Step 6

Call this Html in your  Sharepoint Page using Content Editor WebPart....

I hope I have helped someone. 
Ebook Download
View all
Learn
View all