Summit 7 Blogs

Enhancing Nintex Forms with JavaScript

We use Nintex Forms jointly with Nintex Workflows for enabling many of our clients' internal processes. While Nintex Forms provide an intuitive interface for designers to quickly create form-enabled solutions, some scenarios require us to go beyond the out-of-the-box capabilities.

Recently, one of my clients had presented me with a more advanced requirement involving two lists and the need to read in rate information from a second list. The complexity was that if a specific date field changes, the form would have to refresh the rate information dynamically without closing the form.

As a reminder, a Nintex Form is bound to both a SharePoint list and an associated content type within that list. In order to read from a second list, this specific solution would require the use of JavaScript to address the client's need. I had seen the ability to extend Nintex Forms with JavaScript, but I really didn't have a starting point for using JavaScript until spending some time researching along with trial and error. And that is the purpose of this blog, to quickly introduce readers to the advanced JavaScript capabilities within Nintex Forms.

Embedding Custom JavaScript within a Nintex Form

One of the simplest ways to include JavaScript within a Nintex form is to simply embed the JavaScript within the form itself. Within Form Settings, you will find a Custom JavaScript header under which you can include JavaScript. While this is a completely acceptable approach within the design of a single form, you may wish to consider using custom JavaScript includes if the JavaScript is to be reused.

Custom JavaScript Includes

This setting is found under Form Settings within the Nintex Forms Designer and is used for including custom JavaScript files at runtime. These includes can use local includes from within SharePoint such as '/SiteAssets/example.js' or external includes by simply adding the URL to the desired JavaScript file.

Button Actions

With Nintex Forms Designer, you can drop a Button control onto the Form. By right-clicking on the button control and selecting Settings you can choose to set the Button action to JavaScript. Additionally, under the Advanced header of the control settings you can provide the JavaScript to execute when a user clicks the button under the Client click setting.

Storing Client ID in JavaScript Variables

This option creates a JavaScript variable that references the Client ID of the form control and is used for allowing data processing between the Nintex Form and JavaScript. These settings are found under the control settings. To allow this to happen you must set Store Client ID in JavaScript variable to Yes and you must set a corresponding JavaScript variable name beside Client ID JavaScript variable name.

Form Controls and Custom Validation Functions

Nintex Forms allows for custom validation of form controls based on JavaScript. Within the form control settings under the Validation header, set Use Custom Validation to Yes and provide the relevant JavaScript within the Custom Validation Function setting.

In closing, I'll be writing a series of follow-on blogs to introduce more detail about each of these topics and include example scenarios where you can use JavaScript to extend the capabilities of Nintex Forms.

[su_service title="Less paper. More workflow." icon="icon: gears" size="30"]Find out how Nintex can help save you paper, time, - and money.[/su_service][su_button url="/nintex-less-paper-more-workflow/" target="blank" style="flat" background="#d21321" size="5" center="yes" icon="icon: gears"]Improve your workflow[/su_button]


Subscribe Here!

Recent Posts