Scenario:
Environment: SharePoint Online
Approach: Populating Current logged in user in People Picker. Also populating user's Manager automatically using REST API and SP Services.
Environment: SharePoint Online
Approach: Populating Current logged in user in People Picker. Also populating user's Manager automatically using REST API and SP Services.
Solution:
1. Create an SharePoint custom list "Learning" (in my case).
2. Create two columns with the following names and data types shown below:
Internal Name Title Type
CurrentLoggedinUser Current Logged in User Person or Group (People Only)
Manager Manager Person or Group (People Only
3. When you try adding a new item in the list, it should look like:
Here the two people pickers are SP 2013 people picker type where it will show the matching users while typing few words automatically.
4. Now open the list in SharePoint Designer, Create a New Custom Form and make it as default as shown below in the screenshots:
Open the new custom form in Advanced Mode, where you can edit the List Form. Try viewing the page by clicking F5 or Preview in Browser icon in top left corner in the designer.
5. You can see the difference in People Picker. When you create a custom list form, the default forms are automatically changed to SharePoint old type. (for more details read this blog).
6. Now add the ID for both fields as shown below. Also, add the reference the JQuery in the form
7. Now add the ID's for the two people picker values so that it will be useful for querying the SharePoint controls as shown below.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| $(document).ready(function() {
var userAccountName= $().SPServices.SPGetCurrentUser();
//Set current logged in user and manager name in people picker
LoadPeoplePickerDetails();
//Show the form fields on document.ready()
$("#onetIDListForm").show();
});
/****************** All function defintions starts here********************************/
//Function to set people picker values
function LoadPeoplePickerDetails()
{
var url=_spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties"
getReqData(url,function(data){
try
{
//Get properties from user profile Json response
var userDisplayName = data.d.DisplayName;
var AccountName = data.d.AccountName;
$("#tdCurrentUser [id$='upLevelDiv']").html(AccountName);
$("#tdCurrentUser [id$='checkNames']").click();
var Manager = data.d.ExtendedManagers.results;
$("#tdManager [id$='upLevelDiv']").html(Manager[Manager.length-1]);
$("#tdManager [id$='checkNames']").click();
}
catch(err){
}
},
function(data){
//alert("some error occured in getting current User info");
});
}
function getReqData(reqUrl,success, failure) {
$.ajax({
url: reqUrl,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
success(data);
},
error: function (data) {
failure(data);
}
});
}
|
10. Now, try adding a new item. The current logged in user and the current logged in user's manager name will be automatically set in the people picker as shown below.
Note:
1. The people picker for Manager field is loaded after getting the value from current logged in user field. Hence if you have to change the user, the manager value is set during document.ready(). If you want to change the user and set the manager field, then write a method for setting value of manger and call it on value set in first people picker
2. I have implemented only in Custom New Form only.
For ease of use, I have shared the js and the List Template. Please use this link to download.
In the above tutorial, you have learned how to create a Custom Form in SharePoint Online, make REST API calls and also set the values to the People Picker in the list form.
Please share your valuable comments which will make me write more and also share this post using the below social buttons to others. Happy Share(ing)Point!
