Nintex Forms: Automatically populating the new people picker control

In this post I will be looking at Nintex Forms 2013 and automatically populating the new people picker control with information retrieved from the SharePoint user profile service. The new People Picker control was introduced in the recent 2.2.0.0 update and provides a number of benefits including auto complete on mobile devices and the ability to add the control to repeating sections.

Previously I have found it to be pretty straight forward to default the picker control to things like the current user just via the control settings. But what if you want to set this to another property, such as the current user’s manager? This is exactly what I wanted to do on a few of our internal forms during the process of moving from InfoPath to Nintex Forms.

I contacted Nintex support before spending hours looking into this (their response times are usually pretty good). They were able to provide me with a JavaScript library to interact with the new control – I have attached this in Step 1 below. These functions will apparently be included in the upcoming 2.3 release – at this stage they are provided as-is and are not officially supported. The following table was also included and provides a summary of each of the available methods. It is evident that these functions would allow you to interact with the control in a number of ways.

1 Available Methods

Leave Form Example

I will be assuming that you have a basic knowledge of how to design a form in Nintex Forms so I will be skipping the simple stuff. In my example I was creating a basic leave form that contained fields for the Employee Name, Leave Type, Start Date, End Date and Manager.

  1. Once you have the base list in place you will need to download the two JavaScript libraries mentioned below, these will be included in your Nintex Form. Save these to a safe location on your computer, we will upload these to SharePoint in later steps.
  2. Nintex Forms by default includes a version of jQuery that you can leverage in your forms. While possible, it is not necessary to include your own version of jQuery. Rather than referencing the library using the usual or jQuery, you instead make your calls using NWF$ e.g. NWF$(“.myClass”).hide(); 

    For SPServices to be compatible with this convention it is necessary to make a minor modification to the library. There is a good blog post that covers this off pretty well, written by Chris Kent (http://thechriskent.com/2013/08/08/use-spservices-in-nintex-forms-2010/).

    I would suggest following this or you can simply download the one I prepared earlier in the zip provided at the end of this post.

  3. Copy the code below into your own JavaScript file – I called mine FillPeoplePicker.js. This ties everything together and populates the people field, I have provided a few comments throughout but for the most part the code is relatively simple.
     
  4. Upload the three JavaScript files somewhere in SharePoint. I have placed mine in the Style Library but they could easily be placed elsewhere.

    Below is a screenshot of what my library looked like after uploading these files, yours should look similar. Note down the URL to each file, we will need to include these in our form.

    Style Library Javascript

     

  5. Return to your list, from the ribbon click the Nintex Forms button to open the Form Designer. As you can see below, Nintex Forms did a pretty good job with auto generating the initial form template.3 Nintex Forms Designer
  6. To interact with the people field it is easiest if we give it its own CSS class name. In my form I creatively called this ‘manager-control’ but this can be called whatever makes the most sense to you.
    To update the field, right click on the people picker control and select Settings.

    Under the Formatting section add the additional CSS class as shown in the dialog below.

    4 Specify CSS Class

    Note that this class name is referenced in the FillPeoplePicker.js. If you use a different CSS class it will be necessary to update this code.

  7. Open the form settings by clicking the Settings button on the Nintex Forms tab. Under the Advanced section add the URL’s for the JavaScript libraries that we copied down earlier – place each include on a separate line.

     

    The order that you specify the files here is likely to be important due to dependencies, I would suggest including the files in the order shown below.

    Add Custom JS Includes

    Click Save on this dialog and then publish the form

Result

The result should be a form that automatically populates the manager field without any user intervention. When the form loads, the JavaScript code queries the user profile service and retrieves the current user’s manager. The value returned is then used to trigger a search on the people picker control. The first search result (there should only be one) is then assigned to the manager field in the form.

I’ve bundled up all the JavaScript files in the zip file available below. Happy SharePoint-ing!

Resources

Leave a Reply

31 Comments

  1. Tim

    Tom, do you know if this works for the Nintex 2010 products?

    • Tom O'Connor

      Hi Tim, Not 100% sure, I can give it a shot though in my development environment and let you know how it goes.

    • Tom O'Connor

      Hi Tim, 

      Just tested this out and the exact same instructions are working on the SP2010 version of Nintex Forms.

      Cheers

  2. Mary

    Employee Name and Manger are both set as people picker? Employee Name set as current user? If so, it does not work.

    • Tom O'Connor

      Correct – where are you having troubles? Do you get any JavaScript errors on the form?

      • mary

        I don’t know why it is always “No Items Found” in the manager field.

        • mary

          Do I need to have to do the synchronization of the user profile services?

          • Tom O'Connor

            Hi Mary,

            The value is retrieved from the user profile in the user profile service. It would be worth checking that the manager field has been populated here.

            Cheers,
            Tom

  3. Hi Tom,
    I have the detail that I do not get my form is blank. not if my browser has javascript problems

    • Tom O'Connor

      It’s probably worth checking the developer tools (F12) console to see if any JavaScript errors are appearing

  4. Nigel

    HI there, thanks for article, does this only work with Forms 2013? I have tried it with Nintex Forms O365 version and get no joy.

    • Tom O'Connor

      Hi Nigel, I haven’t tested this myself. I imagine the people picker control is probably different on Office 365 in the way it functions which is probably why you are seeing issues.

      • no it doesn’t.
        Official response from the Nintex support:
        “We have finished in our investigation regarding NF.PeoplePickerAPI in O365.
        Unfortunately NF.PeoplePickerAPI is not supported yet in SP Online. This feature is available in OnPremise only. “

  5. Hi Tom,

    As you have said this works for the Nintex forms 2010. I am not able to get it working for nintex forms 2010.
    I am having site collection admin rights.

    It is giving me error in console for SPGetCurrentUser.

    SCRIPT5007: Unable to get value of the property ‘SPGetCurrentUser’: object is null or undefined

    Also the order of scripts is correct. Do i need to seperatly reference jqyery 1.10.1 min version to work your spuserservice.

    Also if this works i have to achieve selected employees manger. I have a form where in i have to select the employee from people picker and on blur of employee name the manager name should populate automatically,. What do i need to do different in my case.

    • Tom O'Connor

      Hi Sunil,

      You shouldn’t need to reference jQuery, you should be able to just use the built in Nintex Forms version. You will have to reference SPServices though.

      If you hard code the username does it return the users manager?

      Cheers,

      Tom

      • Hi Tom,

        Thanks! for the reply.
        It is now working as you have described. There was issue with the claims authentication mode it was appending claim token like i:0#.w| which might be one reason also the spservices were not working may be due to the file path name ,so nothing was getting loaded. Now everything is working fine as you had described in your article.

        Can you please help me to handle onblur event of the people picker since on blur of people picker(employee) i would like to populate the other people picker (manager name).

        • I was referring to other article of your and i found Added event should fix my issue. Instead of using onblur event we have added event which will help to poplulate the manager. but i am not able to get the value of the user from the people picker.

      • Hi Tom,

        Can you please provide detail on how to read the extended people pikers selected values from Added event.

        I tried doing the below but it’s not working.

        var employeePicker = new NF.PeoplePickerWrapper(‘.employee-control input’);
        var logedInEmployee = employeePicker.val();

        even i tried
        var logedInEmployee = employeePicker.value;

        Nothing works for me. Can you please provide how to access the selected person login id.

  6. Suolon Hu

    Hi Tom,

    I am following your direction , but still I can ‘t seem to get the form to populate it with the Manager’s name. I am using Nintex for O365. I don’t get any errors in the F12 Developer Tools either, so not sure what I am missing here.

    Can you please assist?

    • Suolon Hu

      Actually, I ran a debug, and I did get the following error:
      “Unable to get property ‘SPGetCurrentUser’ of undefined or null reference”

      • Tom O'Connor

        Hi Suolon, That sounds like an issue with SPServices not being included properly. Perhaps check that you have included this library with your form.

          • it doesn’t work in O365, response from the Nintex support:
            “We have finished in our investigation regarding NF.PeoplePickerAPI in O365.
            Unfortunately NF.PeoplePickerAPI is not supported yet in SP Online. This feature is available in OnPremise only. “

  7. Warwick

    Thanks for the guy Tom nice work, if only the new lookupUserProfile could populate a PP.

    One addition I would add in the filler would be to check if it contains any data already, and if so do nothing. This allows for instances when Editing a form rather than New, and as such it won’t add another manager in.

    • Tom O'Connor

      Thanks Warwick, and good point with the Edit Form.

  8. Ant Clegg

    Thanks for this as it worked exactly how I needed it to first time.

  9. Mohammed

    I get an error stating

    “Unable to get property ‘SPGetCurrentUser’ of undefined or null reference” in the FillPeoplePicker.js

    • Tom O'Connor

      This seems like a problem with the reference to SPServices, I’d suggest checking this. How were you linking this up currently?

  10. Terri W

    Tom – Thank you for this article. I’ve used it quite a bit in various forms. Question on Step 3, regarding the FillPeoplePicker script. How would I modify it to update the control only if the control was blank? I’ve come across a situation where my form also contains a couple cascading lookup fields. When any of the lookup fields are populated/set, the Nintex form refreshes. This causes the PeoplePicker field to add the manager-control value again. Thus I get “Smith, Joe” twice in the field, therefore getting the PeoplePicker message “You are only allowed to enter one item”. I’m sure the change to the script is rather simple, but I’m a novice at jQuery and especially how the syntax integrates with Nintex.

  11. Sreedhar

    I am getting the error in console as mentioned below

    jquery.js?rev=wUPlnhwFqtWad8lD53Aazg%3D%3D:551 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.

    • Tom O'Connor

      I don’t have access to Nintex Forms anymore to test this. This would be caused by the synchronous web service call. Try and see if the slightly amended code below works for you (sorry about the formatting!):

      // Query the User Profile Service for the current user’s manager
      NWF$(document).ready(function() {
      var ManagerAccount;

      NWF$().SPServices({
      operation: “GetUserProfileByName”,
      AccountName: NWF$().SPServices.SPGetCurrentUser(),
      completefunc: function (xData, Status) {
      ManagerAccount = getUPValue(xData.responseXML, “Manager”);
      // Initialise Manager People picker control
      var managerPicker = new NF.PeoplePickerWrapper(‘.manager-control input’);

      managerPicker.ready(function () {
      //search for Manager Name and add first search result
      managerPicker.search(ManagerAccount).done(function (data) {
      managerPicker.add(data[0]);
      });
      });
      }
      });
      });

      // ****************************************************
      // Function to retrieve User Properties
      // ****************************************************

      function getUPValue(x, p) {
      var thisValue = NWF$(x).SPFilterNode(“PropertyData”).filter(function() {
      return NWF$(this).find(“Name”).text() == p;
      }).find(“Values”).text();

      return thisValue;
      }

Next ArticleOpening links in new windows - why I hate not being able to do it