Code for Js

  1. (function($) {
  2. RegisterScriptFiles('clienttemplates.js');
  3. RegisterScriptFiles('clientforms.js');
  4. RegisterScriptFiles('clientpeoplepicker.js');
  5. RegisterScriptFiles('autofill.js');
  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. }
  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.

Comments

Join the conversation! Your thoughts help the community grow.