3

When opening a SharePoint EDIT form, I'm trying to capture a people picker value using JavaScript. Unfortunately, the people picker isn't loaded with data when I call .GetAllUserInfo.

I'm using the following line inside $(document).ready(function()...

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', readyFunction);

When readyFunction() runs I get:

GetAllUserUserInfo: object is null or undefined

Basically it looks like I need to slow down the execution of my code until the people picker is fully loaded WITH the value. Waiting for sp.js to be loaded doesn't seem to be the answer. Any ideas? Using setTimeout to call the function works, but it's obviously not an ideal way to have to do it.

Here is the code I expected to work:

$(document).ready(function(){

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', theFunction);

theFunction(){
    var dispTitle = "myPpField";      
    var pickerDiv = $("[id$='ClientPeoplePicker'][title='" + dispTitle + "']");      
    var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv[0].id];
    var theUser = peoplePicker.GetAllUserInfo();
    var theUserId = theUser[0].EntityData.SPUserID;
    alert(theUserId);
}

});
  • The only thing that seems to work for me so far is: "setTimeout(myFunction, 500);". So basically I'm slowing down the function call by a half second. Obviously not an ideal solution, so looking for the 'right' way to do this. – Das Aug 24 '15 at 21:40
  • Can you provide a code sample as well as clarify how you are loading your JS? We might be able to help still. – Lance Aug 24 '15 at 21:46
  • Appreciate your tenacity. The code (as I want it work) has been added. I place the code directly on the Edit form within 'PlaceHolderMain' using Designer. As mentioned, I've only successfully gotten the peoplePicker object set when I use setTimeout to call theFunction(). setTimeout(theFunction, 500); – Das Aug 24 '15 at 22:53
  • Did you ever find a solution to this problem? I'm running into the same issue. – James11 Dec 19 '17 at 22:32
  • No I did not. I had to stick with the setTimeout workaround. :( – Das Dec 22 '17 at 18:36
2

Try wrapping your JavaScript inside the SharePoint 'ready' function:

<script>
function _spBodyOnLoad()
{
    var pickerPeople = SPClientPeoplePicker.SPClientPeoplePickerDict['<ID of my people picker>'].GetAllUserInfo();
    if (pickerPeople.length > 0) {
        alert("User: " + pickerPeople[0].DisplayText);
    }
}
</script>

Not sure how you are loading your JS. For my quick test, I put my script file on the edit form by clicking on the List tab, then Form Web Parts, then Default Edit Form. I then put a content editor web part on the page and linked it to my JS file in the documents library.

The code above is exactly what I have in my JS file, including the <script> tags.

EDIT Based on your code snippet and the extra information you've provided, I tried again. Here is what works for me:

I put this snippet at the bottom of PlaceHolderMain in the Edit form using SharePoint Designer:

<script>
function _spBodyOnLoad()
{
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {

        var dispTitle = "Users";      
        var pickerDiv = document.getElementById("Users_3a52bbd5-aac9-4ced-84d2-080f9fa5f59e_$ClientPeoplePicker");      
        var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv.id];
        var theUser = peoplePicker.GetAllUserInfo();
        var theUserId = theUser[0].EntityData.SPUserID;
        alert("SP User ID: " + theUserId);

    });
}
</script>

You should be able to take your code out of the jQuery ready function and use the SharePoint ready function instead.

The only other difference for me was not using jQuery but you should be able to adapt my snippet to match yours.

Hopefully this solves your problem.

  • No luck. Appreciate the suggestion though. – Das Aug 24 '15 at 21:43
  • Still no luck. var peoplePicker is undefined. Appreciate your suggestion though! – Das Aug 25 '15 at 16:59
1

try to enclose your code in

_spBodyOnLoadFunctions.push(function(){
// code to capture people picker value
});

Or use JSLink to add PostRender callback

ovverideCtx.OnPostRender = function(ctx){
   //code here
};
  • No luck on these. Appreciate the suggestions though. – Das Aug 24 '15 at 21:43
  • were you able to get the data using "WPQ2FormCtx.ListData['ColumnInternalNameHere']" in browser console? – sekhar Aug 24 '15 at 21:46
1

I have a template I use for all my scripts that I will post below. I believe it works when you delay the script because "sp.js" has finished loading by then. If you remove the delay you're not giving "sp.js" enough time to load. The script I use will not run until sp.js has finished loading, then it loads my functions and everything runs. I use a CEWP and point to the script file.

<SharePoint:ScriptLink Name="MicrosoftAjax.js" runat="server" Defer="False" Localizable="false"/>
<SharePoint:ScriptLink Name="SP.core.js" runat="server" Defer="False" Localizable="false"/>
<SharePoint:ScriptLink Name="SP.js" runat="server" Defer="True" Localizable="false"/>
<SharePoint:FormDigest ID="MyFormDigest" runat="server"/>
<script language="javascript" type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(OnLoad, "sp.js");
    function OnLoad()   
    {       

    }   // End OnLoad    
</script>

Place your code in the OnLoad wrapper function and you should be able to remove the delay. Hope this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.