Setting Up Nintex Forms Controls For Use in Javascript

We often find at TekDog that it is helpful to be able to provide just a little extra functionality on our clients’ Nintex Forms that might not be available out-of-the-box with SharePoint and Nintex. My preferred solution is to use JavaScript with Nintex to produce results for the client.

Nintex Forms gives us several simple opportunities to use JavaScript just for this purpose. Each form and control in Nintex has settings for accommodating a little bit of JavaScript.

SETTING A JAVASCRIPT VARIABLE FOR THE CONTROL

If you look at the settings for just about any control on a Nintex form, you will find “Store Client ID in JavaScript variable” under the “Advanced” tab. If you select “Yes”, a new setting will open, a “Client ID JavaScript variable name” text box. By placing a variable name in this text box, you can subsequently use the variable in JavaScript in a published form to access the control and its contents.

Note that the variable you name here will contain, as a value, the JavaScript Client ID for the control. This means that you will use the value as the Client ID to find and use the control with the JavaScript getElementById() method, a jQuery selector, or Nintex Forms’ equivalent NWF$ object selector.

For instance, if you provide a variable name for a Title single line text box and name is varTitleClientId, you will use the following JavaScript to instantiate an object variable for the control element:

var txtTitle = document.getElementById(varTitleClientId);

Or by using the NWF$ object:

var txtTitle = NWF$('#' + varTitleClientId);

Since the variable name specified in the Nintex control contains the actual client ID as a string rather than directly referring to the element, I recommend naming the variable as I did with the phrase “ClientID” in the variable name itself for clarity.

USING JAVASCRIPT WITH A BUTTON

Now that we have named a variable to refer to the control, we can manipulate the control elsewhere with JavaScript. For example, let’s set up a button to change the text of the Title text box.

The settings for a button on a Nintex form has a “Client click” setting under Advanced that can be used to run a small bit of JavaScript. In fact, you can also select “JavaScript” under “Button action” for the button and it will only run the JavaScript instead of submitting the form.

Learn more about our on-demand Nintex Training options

For example, put a button on a Form and set its Button label to “Change text”. Under Advanced, find the Client, click setting and open the Insert Reference dialog so that you can see more than one line of text. Here we can use two lines of JavaScript code to change the contents of a single line text box that has been given the variable name varTitleClientId as above:

var txtTitle = document.getElementById(varTitleClientId);

txtTitle.innerText = 'Hello, Earth!';

Note that for whatever reason the Nintex Forms Insert Reference dialog supports rich text even though JavaScript should be entered in plain text. I recommend that rather than copypasting code directly from this post or your favorite code editor, you first copy the lines of code into Notepad in order to ensure plain text is pasted into Nintex.

After publishing this form and clicking the new Change text button, the Title text box will display the value set in JavaScript.

There are many more opportunities to use JavaScript in Nintex Forms and this is just the beginning!  Return to this blog for additional tips and tricks and guides for providing some cool functionality for clients and solving some of the pitfalls I’ve encountered.

~Jason Sexton