How to populate select options or dropdown in a Nintex Form 2010 using JQuery

Lot of times in Nintex SP projects there is requirement to populate select options from a non SharePoint data source. Nintex/SharePoint provide this functionality OOTB if the type of field in the list is a lookup field looking up data from another list. However, if the data source is external then it requires a bit of client side code to populate the select options. For example if a form requires Suburbs to be populated in a select option. Here is the sample code to make this working assuming that the suburb data is coming in JSON format from any data source. It can be a REST service.

There are couple of steps required to make this working.

1. In the Nintex Form designer for the given list add a choice form control on the form. In the control settings of the choice control select "Display Format" as "Drop down list". Set "Store Client ID in Javascript variable" to "Yes" and give name e.g. ddlSuburb as shown in below screenshot. This variable will hold the reference to the rendered control on the Nintex Form.

2. Include JQuery and custom script file in the Nintex Form by going to the Form settings -> Advanced -> Custom Javascript Includes section and include following files in the form, or set the actual location of the script files.

/SiteAssets/jquery-1.8.3.min.js

/SiteAssets/Form.js

Custom JQuery Code

Form.js

$(document).ready(function () {

try

{

var data = '[{"ID": "1","Name": "Test Suburb 1"},{"ID": "2","Name": "Test Suburb 2"},{"ID": "3","Name": "Test Suburb 3"},{"ID":"4","Name": "Test Suburb 4"},{"ID": "5","Name": "Test Suburb 5"}]';

var jsonData = JSON.parse(data);

var option = '<option value="">Select Suburb</option>';

$.each(jsonData, function (k, val){

option += '<option value="' + jsonData[k].ID + '">' + jsonData[k].Name + '</option>';

});

  $('#'+ddlSuburb).find('option').remove().end().append(option);

  $('#'+ddlSuburb).change(function() { 

  $('#' + txtSuburb).val($('#'+ddlSuburb + ' :selected').text());

  //alert("You selected: " + $('#' + txtSuburb).val());

 });

}

catch(err)

{

if (window.console) console.log(err);

}

finally

{

//do something

}

});

Output
Custom Jquery code result

In this scenario the suburb data is coming from external datasource in JSON format and is getting populated in a select option in a Nintex Form. When end user selects any option then it is populated in the hidden Textbox under the Dropdown control in the form. This selected value is then saved in the list upon submit.

To select the selected option when the Nintex Form is opened in the Edit mode a CalculateValue type control can be used to get the state of the form i.e. if it is edit mode, new mode or view mode and then option can be selected by writing couple of lines as follows

if($('#' + txtSuburb).val() !== "")

{

    $('#' + ddlSuburb + ' option').each(function() {

    this.selected = $(this).text() == $('#' + txtSuburb).val();

   });

}

In extension to this code we can set cascading select options using JQuery with Nintex to make forms more usable for end users.

Happy coding!