SharePoint

Storing Multiple SharePoint People Picker Values In The SharePoint List

CSS Part 
  1. <style>  
  2.     .ms-core-pageTitle {  
  3.         margin-top: 10px;  
  4.         margin-left: 400px;  
  5.     }  
  6.   
  7.     div#leavefrom {  
  8.         background: antiquewhite;  
  9.         width: 800px;  
  10.         margin-left: 100px;  
  11.         padding-top: 50px;  
  12.     }  
  13.   
  14.     table#leavefields {  
  15.         font-size: 15px;  
  16.         margin-left: 100px;  
  17.     }  
  18.   
  19.     input#id1 {  
  20.         margin-left: 230px;  
  21.         margin-bottom: 15px;  
  22.         font-size: large;  
  23.         background-color: #e0e2e4;  
  24.     }  
  25.   
  26.     input#btn {  
  27.         margin-bottom: 16px;  
  28.         background-color: #e0e2e4;  
  29.     }  
  30. </style>  
Js File 
  1. var user = [];  
  2.   
  3. function GetUserId() {  
  4.     if (validate()) {  
  5.         $("div[class*='sp-peoplepicker-topLevel']").each(function() {  
  6.             if ($(this).find("span[class='ms-entity-resolved']").text().length > 0) {  
  7.                 var endPointURLToGetUseID = _spPageContextInfo.webAbsoluteUrl + "/_api/web/siteusers?$select=Title,ID&$filter=Title eq '" + $(this).find("span[class='ms-entity-resolved']").text() + "'";  
  8.                 $.ajax({  
  9.                     url: endPointURLToGetUseID,  
  10.                     type: "GET",  
  11.                     dataType: "json",  
  12.                     async: false,  
  13.                     headers: {  
  14.                         "accept": "application/json;odata=verbose"  
  15.                     },  
  16.                     success: callSuccessMethod,  
  17.                     error: callFailureMethod  
  18.                 });  
  19.             }  
  20.         });  
  21.   
  22.         function callSuccessMethod(data, request) {  
  23.             $.each(data.d.results, function(key, val) {  
  24.                 var GetId = val.Id;  
  25.                 user.push([GetId]);  
  26.             });  
  27.         }  
  28.   
  29.         function callFailureMethod(data, errCode, errMessage) {  
  30.             alert("Error: " + errMessage);  
  31.         }  
  32.         CreateListItem();  
  33.     }  
  34. }  
  35.   
  36. function CreateListItem() {  
  37.     var clientContext = new SP.ClientContext('https://your site Url');  
  38.     var List = clientContext.get_web().get_lists().getByTitle('dynamiclist');  
  39.     var itemCreateInfo = new SP.ListItemCreationInformation();  
  40.     this.ListItem = List.addItem(itemCreateInfo);  
  41.     var Ename = document.getElementById("empname").value;  
  42.     var EmpID = document.getElementById("empid").value;  
  43.     var user1;  
  44.     ListItem.set_item('Employeename', Ename);  
  45.     ListItem.set_item('Empid', EmpID);  
  46.     if (user.length == 4) {  
  47.         ListItem.set_item('Approver1', user[1][0]);  
  48.         ListItem.set_item('Approver2', user[1][0]);  
  49.         ListItem.set_item('Approver3', user[2][0]);  
  50.         ListItem.set_item('Approver4', user[3][0]);  
  51.         ListItem.update();  
  52.     } else if (user.length == 3) {  
  53.         ListItem.set_item('Approver1', user[0][0]);  
  54.         ListItem.set_item('Approver2', user[1][0]);  
  55.         ListItem.set_item('Approver3', user[2][0]);  
  56.         ListItem.set_item('Approver4', user1)  
  57.         ListItem.update();  
  58.     } else if (user.length == 2) {  
  59.         ListItem.set_item('Approver1', user[0][0]);  
  60.         ListItem.set_item('Approver2', user[1][0]);  
  61.         ListItem.set_item('Approver3', user1);  
  62.         ListItem.set_item('Approver4', user1)  
  63.         ListItem.update();  
  64.     } else if (user.length == 1) {  
  65.         ListItem.set_item('Approver1', user[0][0]);  
  66.         ListItem.set_item('Approver2', user1);  
  67.         ListItem.set_item('Approver3', user1);  
  68.         ListItem.set_item('Approver4', user1)  
  69.         ListItem.update();  
  70.     } else if (user.length == 0) {  
  71.         ListItem.set_item('Approver1', user1);  
  72.         ListItem.set_item('Approver2', user1);  
  73.         ListItem.set_item('Approver3', user1);  
  74.         ListItem.set_item('Approver4', user1)  
  75.         ListItem.update();  
  76.     }  
  77.     clientContext.load(ListItem);  
  78.     clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));  
  79. }  
  80.   
  81. function onQuerySucceeded() {  
  82.     alert('Leave Applied Suceessfully');  
  83. }  
  84.   
  85. function onQueryFailed(sender, args) {  
  86.     alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());  
  87. }  
  88.   
  89. function validate() {  
  90.     var returnval = true;  
  91.     if (document.getElementById("empname").value == "") {  
  92.         alert("Please enter the Employee ID");  
  93.         returnval = false;  
  94.     } else if (document.getElementById("empid").value == "") {  
  95.         alert("Please enter the Department.");  
  96.         returnval = false;  
  97.     } else if (document.getElementById("txtlev").value == 0) {  
  98.         alert("Please Specify level of approval");  
  99.         returnval = false;  
  100.     } else if (document.getElementById("peoplePickerDiv1_TopSpan_HiddenInput").value == "" || document.getElementById("peoplePickerDiv1_TopSpan_HiddenInput").value == "[]") {  
  101.         alert("Please Specify Approver1");  
  102.         returnval = false;  
  103.     } else if (document.getElementById("txtlev").value == 2 && document.getElementById("peoplePickerDiv2_TopSpan_HiddenInput").value == "" || document.getElementById("peoplePickerDiv2_TopSpan_HiddenInput").value == "[]") {  
  104.         alert("Please Specify Approver2");  
  105.         returnval = false;  
  106.     } else if (document.getElementById("txtlev").value == 3 && document.getElementById("peoplePickerDiv3_TopSpan_HiddenInput").value == "" || document.getElementById("peoplePickerDiv3_TopSpan_HiddenInput").value == "[]") {  
  107.         alert("Please Specify Approver3");  
  108.         returnval = false;  
  109.     } else if (document.getElementById("txtlev").value == 4 && document.getElementById("peoplePickerDiv4_TopSpan_HiddenInput").value == "" || document.getElementById("peoplePickerDiv4_TopSpan_HiddenInput").value == "[]") {  
  110.         alert("Please Specify Approver4");  
  111.         returnval = false;  
  112.     }  
  113.     return returnval;  
  114. }  
Html File
  1. <html>  
  2.   
  3. <head>  
  4.     <script src="https://code.jquery.com/jquery-1.8.3.js"></script>  
  5.     <script src="https://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>  
  6.     <script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>  
  7.     <script type="text/javascript" src="_layouts/15/sp.js"></script>  
  8.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
  9.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js" type="text/javascript"></script>  
  10.     <script src='UR Url/SiteAssets/Holiday/moment.js'></script>  
  11.     <script src="UR url/sppeoplepicker.min.js"></script>  
  12.     <script src="Ur url/sppeoplepicker.js"></script>  
  13.     <script src="JS File Mentioned Above/dynamic.js"></script>  
  14.     <script type="text/javascript">  
  15.         $(document).ready(function() {  
  16.             $("#peoplePickerDiv1").spPeoplePicker();  
  17.             $("#peoplePickerDiv2").spPeoplePicker();  
  18.             $("#peoplePickerDiv3").spPeoplePicker();  
  19.             $("#peoplePickerDiv4").spPeoplePicker();  
  20.         });  
  21.     </script>  
  22.     <script type="text/javascript">  
  23.         function jsFunction(value) {  
  24.             var returnval = true;  
  25.             if (document.getElementById("txtlev").value == 0) {  
  26.                 $('tr[id="approver1"]').hide();  
  27.                 $('tr[id="approver2"]').hide();  
  28.                 $('tr[id="approver3"]').hide();  
  29.                 $('tr[id="approver4"]').hide();  
  30.                 returnval = false;  
  31.             } else if (document.getElementById("txtlev").value == 1) {  
  32.                 $('tr[id="approver1"]').show();  
  33.                 $('tr[id="approver2"]').hide();  
  34.                 $('tr[id="approver3"]').hide();  
  35.                 $('tr[id="approver4"]').hide();  
  36.                 returnval = false;  
  37.             } else if (document.getElementById("txtlev").value == 2) {  
  38.                 $('tr[id="approver2"]').show();  
  39.                 $('tr[id="approver1"]').show();  
  40.                 $('tr[id="approver3"]').hide();  
  41.                 $('tr[id="approver4"]').hide();  
  42.                 returnval = false;  
  43.             } else if (document.getElementById("txtlev").value == 3) {  
  44.                 $('tr[id="approver3"]').show();  
  45.                 $('tr[id="approver1"]').show();  
  46.                 $('tr[id="approver2"]').show();  
  47.                 $('tr[id="approver4"]').hide();  
  48.                 returnval = false;  
  49.             } else if (document.getElementById("txtlev").value == 4) {  
  50.                 $('tr[id="approver4"]').show();  
  51.                 $('tr[id="approver1"]').show();  
  52.                 $('tr[id="approver2"]').show();  
  53.                 $('tr[id="approver3"]').show();  
  54.                 returnval = false;  
  55.             }  
  56.             return returnval;  
  57.         }  
  58.     </script>  
  59.     <script type="text/javascript" src="JS File Mentioned above/dynamic.js"></script>  
  60. </head>  
  61.   
  62. <body>  
  63.     <div id="leavefrom">  
  64.         <table id="leavefields">  
  65.             <tr>  
  66.                 <td>Level of approval</td>  
  67.                 <td> <select id="txtlev" style="width: 99%; height: 90%" onmousedown="this.value='';" onchange="jsFunction(this.value);">  
  68. <option value=0>Select</option>  
  69. <option value=1>1</option>  
  70. <option value=2>2</option>  
  71. <option value=3>3</option>  
  72. <option value=4>4</option>  
  73. </select></td>  
  74.             </tr>  
  75.             <tr>  
  76.                 <td width="3" nowrap>Employee Name </td>  
  77.                 <td> <input type="text" id="empname"></td>  
  78.             </tr>  
  79.             <tr>  
  80.                 <td>Employee id</td>  
  81.                 <td><input type="text" id="empid"></td>  
  82.             </tr>  
  83.             <tr id="approver1" style="display:none">  
  84.                 <td>Approver1</td>  
  85.                 <td>  
  86.                     <div id="peoplePickerDiv1"></div>  
  87.                 </td>  
  88.             </tr>  
  89.             <tr id="approver2" style="display:none">  
  90.                 <td>Approver2</td>  
  91.                 <td>  
  92.                     <div id="peoplePickerDiv2"></div>  
  93.                 </td>  
  94.             </tr>  
  95.             <tr id="approver3" style="display:none">  
  96.                 <td>Approver3</td>  
  97.                 <td>  
  98.                     <div id="peoplePickerDiv3"></div>  
  99.                 </td>  
  100.             </tr>  
  101.             <tr id="approver4" style="display:none">  
  102.                 <td>Approver4</td>  
  103.                 <td>  
  104.                     <div id="peoplePickerDiv4"></div>  
  105.                 </td>  
  106.             </tr>  
  107.             <tr>  
  108.                 <td><input type='button' id='id1' value='Submit' onclick="GetUserId();" /></td>  
  109.                 <td><input type='button' value='Cancel' id='btn' onclick="cancel();" /></td>  
  110.             </tr>  
  111.         </table>  
  112.     </div>  
  113. </body>  
  114.   
  115. </html>  
Here, I am using Dynamic list as My list.
 
Employeename, Empid, Approver1, Approver2, Approver3, Approver4 are the field columns of that List.
 
Step 1
 
In HTML file. 
 
Include jquery-1.8.3.js,
 ui/1.10.0/jquery-ui.js,  
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js , 
moment.js , 
sppeoplepicker.min.js ,
sppeoplepicker.js
 
And also, store the above JS file as .js format and include in HTML.
 
Step 2
 
In Document.ready function, intialise all the people pickers. For example -
 
 $("#peoplePickerDiv1").spPeoplePicker();
 
Step 3
 
Based on the option values, I am hiding and showing textbox 
  1. if(document.getElementById("txtlev").value==0)   
  2. $('tr[id="approver1"]').hide();   
  3. $('tr[id="approver1"]').show();    
Create necessary Div tag and buttons to append people picker as shown in the above HTML file. 
 
Step 4

In JS part 
 
For Loop for all Divs
  1. $("div[class*='sp-peoplepicker-topLevel']").each(function()   
It checks whether the Div box is empty or not..
  1. if($(this).find("span[class='ms-entity-resolved']").text().length>0   
Step 5
 
Based on the div value, the below code retrieves the Id of Users(people picker) Eg : SpTestuser1, the id is 10
  1. var endPointURLToGetUseID =_spPageContextInfo.webAbsoluteUrl+"/_api/web/siteusers?$select=Title,ID&$filter=Title eq '"+$(this).find("span[class='ms-entity-resolved']").text()+"'";   
Step 6
  1. function callSuccessMethod(data, request) {  
  2.     $.each(data.d.results, function(key, val) {  
  3.         var GetId = val.Id;  
  4.         user.push([GetId]);  
  5.     });  
Based on results of Val.id,  we push the values of GetId into some variable user array I created (Push Function acts by using moment.js)
 
Step 7
 
Update the values in the List using below code.
  1. ListItem.set_item('Employeename', Ename);  
  2. ListItem.set_item('Empid', EmpID);  
  3. if (user.length == 4) {  
  4.     ListItem.set_item('Approver1', user[1][0]);  
  5.     ListItem.set_item('Approver2', user[1][0]);  
  6.     ListItem.set_item('Approver3', user[2][0]);  
  7.     ListItem.set_item('Approver4', user[3][0]);  
  8.     ListItem.update();  
  9. }  
Step 8
 
The below code is used for validation... 
  1. if (document.getElementById("txtlev").value == 2 && document.getElementById("peoplePickerDiv2_TopSpan_HiddenInput").value == "" || document.getElementById("peoplePickerDiv2_TopSpan_HiddenInput").value == "[]") {  
  2.     alert("Please Specify Approver2");  
  3.     returnval = false;  
  4. }  
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs