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 18.104.22.168 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.
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.
- 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.
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.
- 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.
- 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.
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.
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.
Click Save on this dialog and then publish the form