Mr Sharepoint: Auto populate Nintex form fields with a check box

Tuesday, June 21, 2016

Auto populate Nintex form fields with a check box

So I was asked to improve the user experience for users filling in a Nintex Form for travel request. The improvement centred on having the return journey or inbound fields auto populate with a tick of a check box with the data entered in the outbound fields. This is not easily done with out-of-the-box Nintex forms features. I had to write a script in JavaScript to achieve this functionality. Firstly, you’ll have to create the following fields.

Create form, adding the following fields to the “Title”;

Outbound Departure – a single line text
Outbound Arrival – a single line text
Same as Inbound – a tick box (Yes/No)
Inbound Arrival – a single line text
Inbound Departure – a single line text

I left the Save and Cancel buttons as default.

Figure 1: Simplified Travel form

For each form field control settings;

For Outbound Departure, Click the “Advanced” setting, Select Yes from the dropdown for Store Client ID in JavaScript variable. In the Client ID JavaScript variable name, I entered and assigned “varOutboundDeparture” as the variable name. Leave everything else the same.

Figure 2: Control Settings for Outbound Departure

For Outbound Departure, Click the “Advanced” setting, Select Yes from the dropdown for Store Client ID in JavaScript variable. In the Client ID JavaScript variable name, I entered and assigned “varOutboundArrival” as the variable name. Leave everything else the same.

Figure 3: Control Settings for Outbound Arrival

For Outbound Departure, Click the “Advanced” setting, Select Yes from the dropdown for Store Client ID in JavaScript variable. In the Client ID JavaScript variable name, I entered and assigned “varSame” as the variable name. Leave everything else the same.

Figure 4: Control Settings for Outbound Arrival

For Inbound Departure, Click the “Advanced” setting, Select Yes from the dropdown for Store Client ID in JavaScript variable. In the Client ID JavaScript variable name, I entered and assigned “varInboundArrival” as the variable name. Make sure the “Not connected” dropdown option is selected for the “Connected to” setting. Leave everything else the same.

Figure 5: Control Settings for Inbound Arrival

Figure 6: Control Settings for Inbound Departure

Now, in the form settings add the following JavaScript;

To add JavaScript to Nintex Forms, from the Form editor click the Settings button in the Ribbon and then expand the Custom JavaScript section at the bottom.

NWF$('#' + Same).click(function(){

var checkBox = NWF$('#' + varSame);

if (checkBox.is(':checked') == true){

var OutboundDeparture = NWF$('#' + varOutboundDeparture).val();

var OutboundArrival = NWF$('#' + varOutboundArrival).val();

NWF$('#' + varinboundArrival).val(outboundDeparture);

NWF$('#' + varinboundDeparture).val(outboundArrival);

}

else

{

var nullValue = '';

NWF$('#' + varInboundArrival).val(nullValue);

NWF$('#' + varInboundDeparture).val(nullValue);

}

});

Figure 7: Control Settings for Inbound Departure

Nintex Forms uses a copy of the jQuery library that you can access through NWF$. So just adding SPServices to your form’s page won’t work, but since jQuery is already there it’s fairly simple to get it all hooked up through NWF$.

Finally, it’s time for testing. Testing is as follows;

Enter data for Outbound Departure and Outbound Arrival fields
Check the Tick box, the result should be;
- Inbound Arrival populate with Outbound Departure
- Inbound Departure populate with Outbound Arrival
Uncheck the Tick box, the result should be;
- Inbound Arrival field is blank
- Inbound Departure field is blank

Outbound Departure Airport and Outbound Arrival Airport with “Same as Inbound”: Unchecked

Figure 8: The form with Same as Inbound Uncheck

Inbound Departure Airport and Inbound Arrival Airport with “Same As Inbound”: Checked

Figure 9: The form with Same As “Inbound” Checked

by Larry Saytee via Everyone's Blog Posts - SharePoint Community

Mr Sharepoint