Auto Populate a List Lookup Control in Nintex Forms

A recent client project involved building a Nintex Form with the requirement of auto populating a List Lookup control. After some investigation, it didn’t look like this was possible using the out of the box settings. The solution for this need required using a List Lookup control and custom JavaScript to automatically set the value of the control.

In this example scenario, a user fills out a list form to enter their name and pick their favorite SEC football team via a drop down list. The drop down list control pulls from a Teams list and is auto populated with a default team value (i.e. “Alabama Crimson Tide” in this case).

So here’s an example of how to accomplish this solution. This solution works with both Nintex Forms 2010 and 2013.

  1. Create a list called Teams and add the team names. Add the ID field to the default view (this will be referenced later). Also note the Title field display name was changed to “Team Name”.
  2. Create a new custom list called “Favorite Teams” and add a new “Single line of text” column called “Favorite Team”. Also note the Title field display name was changed to “Your Name”.
  3. Create a Nintex Form in the Favorite Teams list (List Tools > List > Nintex Forms > Customize the Item Form).
  4. Delete the default Single Line Textbox control for the Favorite Team field.
  5. Add a List Lookup control to your form in place of the Favorite Team control you just deleted.
  6. Open the Control Settings for the new List Lookup field and configure it with the following settings.
    1. Name = FavoriteTeam
    2. Text connected to = Favorite Team
    3. Source SharePoint site = (Insert the address of your site).
    4. Click the Refresh button to the right of the Source List option.
    5. Source List = Teams
    6. List column name = Team Name
  7. Click the Save button the save your changes to the Control Settings.
  8. You can now use the form Preview to make sure the Teams are populated in the List Lookup control properly.
  9. Next open up the form Settings configuration.
  10. Expand the Custom JavaScript section and add the following code. This code allows you to set the default value (the item with ID = 1 from the Teams list in this case) for the Favorite Team list lookup field on the form and click the Save button. Note the value be changed as needed.
    NWF$(document).ready(function() {
    var defaultTeam = NWF$("#" + ddlFavTeam).val();
    if (defaultTeam == '') {
    NWF$("#" + ddlFavTeam).val('1');
    }
    });

    Note: You may have to delete and re-enter the quotation marks and/or the single quotes if you copy the above code directly off the page. Sometimes the formatting does not copy over correctly.

    NintexForm_AutoPopulate4

  11. Go back to the FavoriteTeam List Lookup control and open the Control Settings.
  12. Expand the Advanced section at the bottom of the Control Settings and enter the following values.
    1. Store Client ID in JavaScript variable = Yes
    2. Client ID JavaScript variable name = ddlFavTeam (this the variable name used in Step 10 above).
    3. Click the Save button.

  13. You can now use the form Preview to make sure the Favorite Team field is now auto populated properly.
  14. Publish the form to add items. You should be good to go!

6 responses

  1. Note that if you just copy and paste your sample code, the quotes around the # sign throw an error. I had to retype them and then the code snippet worked. Thanks for this great tutorial.

    1. Thanks for alerting me to this. I added a note in the blog post right below the code.

  2. Using this solution, if I allow the default to occur, and using your example the dropdown would be set to Alabama Crimson Tide. I can change it to anything, say Florida Gators, and save. When I then leave and come back into the form in edit mode, it resets my saved selection back to Alabama Crimson Tide – effectively paving over my persisted original selection of Florida Gators. I think there needs to be a check in the JavaScript that the defaulting should only occur if it has never been set.

    1. Great catch! I updated and tested the code so that it takes care of the issue you pointed out. The form should now default to the choice in the code or keep the choice that was selected and saved.

  3. Awesome! sometimes you just need a little thing to get it working.

  4. Thanks for this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: