cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Not applicable

JavaScript events in Nintex Forms

Jump to solution

Since the release of Nintex Forms (NF 2013 v2.3.1 and NF 2010 v1.5.1) there is the ability to hook up to a series of events on the filler. The following article is relevant to both Nintex Forms for SharePoint and Nintex Forms for Office 365.

Note: Update to the latest version Product Downloads‌ (Submit a Support ticket if you don't have access to this page)

Form designers with JavaScript knowledge can now leverage these events and are assured that their code runs safely as expected when these events occur during runtime. The following table summarizes the available events.

Event Type

How to add a handler to this event

Filler Before Ready

  1. NWF.FormFiller.Events.RegisterBeforeReady(function ()

{ // your custom code goes here });

Filler After Ready

  1. NWF.FormFiller.Events.RegisterAfterReady(function ()

{ // your custom code goes here });

Repeater Row Adding

  1. NWF.FormFiller.Events.RegisterRepeaterRowAdding (function ()

{ // your custom code goes here });

Repeater Row Added

  1. NWF.FormFiller.Events.RegisterRepeaterRowAdded (function ()

{ // your custom code goes here });

Repeater Row Deleting

  1. NWF.FormFiller.Events.RegisterRepeaterRowDeleting (function ()

{ // your custom code goes here });

Repeater Row Deleted

  1. NWF.FormFiller.Events.RegisterRepeaterRowDeleted (function ()

{ // your custom code goes here });

Control Resizing

  1. NWF.FormFiller.Events.RegisterControlProcessing (function ()

{ // your custom code goes here });

Control Resized

  1. NWF.FormFiller.Events.RegisterControlProcessed (function ()

{ // your custom code goes here });

Filler After Ready

By default, a Nintex form will focus on the first enabled input control on the form. However, now you can switch the focus to a specific control using JavaScript. We have demonstrated with the examples below:

Set initial mouse cursor focus in the Single Line Text Control

  1. Open the Nintex Forms designer and drag a Single Line Text control onto the canvas.
  2. Click on the control and locate the CSS class field in the Ribbon. Type ‘singlelineFocus’.
    singletext.png
  3. Click on the Nintex Forms tab, and click on the Settings button in the Ribbon.
    settings.png
  4. Expand the Custom JavaScript section, and enter the following code:

NWF.FormFiller.Events.RegisterAfterReady(function ()

{

NWF$('.singlelineFocus input.nf-associated-control').focus();

});

Click Save and then publish the form. When you add a new item, you should notice that the initial focus of the form has changed, and it is now occurring in the Single Line of text control.

Set initial mouse cursor focus in the Date/ Time Control

  1. Open the Nintex Forms designer and drag a Date/Time control onto the canvas.
  2. Click on the control and locate the CSS class field in the Ribbon. Type ‘datetimeFocus’.
  3. Click on the Nintex Forms tab, and click on the Settings button in the Ribbon.
  4. Expand the Custom JavaScript section, and enter the following code:

NWF.FormFiller.Events.RegisterAfterReady(function ()

{

NWF$('. datetimeFocus input.nf-date-picker').focus();

});

Click Save and then publish the form. When you add a new item, you should notice that the initial focus of the form has changed, and it is now occurring in the Date/Time control.

Set initial mouse cursor focus in the People Control

  1. Open the Nintex Forms Designer and drag a People control onto the canvas.
  2. Click on the control and locate the CSS class field in the Ribbon. Type ‘peopleFocus’.
  3. Click on the Nintex Forms tab, and click on the Settings button in the Ribbon.
  4. Expand the Custom JavaScript section, and enter the following code:

NWF.FormFiller.Events.RegisterAfterReady(function ()

{

NWF$('.peopleFocus textarea’).focus();

});

Click Save and then publish the form. When you add a new item, you should notice that the initial focus of the form has changed, and it is now occurring in the People control.

Repeating Section Control


Repeater Row Adding

You can trigger this event when you want to inform the user that they are about to add a new row to the repeating section.

  1. Open the designer and drag a Repeating Section control onto the canvas.
  2. Click on the control and locate the CSS class field in the Ribbon. Type ‘expensesRepeater’.
  3. Click on the Nintex Forms tab, and click on the Settings button in the Ribbon.
  4. Expand the Custom JavaScript section, and enter the following code:

NWF.FormFiller.Events.RegisterRepeaterRowAdding(function () {

    var repeaterControl = NWF$(arguments[0][0]);

    if (repeaterControl.hasClass('expensesRepeater')) {

alert('You are about to add a new entry for expenses');

    }

});

Click Save and then publish the form. Add a new item, and click on Add New Row to add another row to the repeating section. A message should appear at the top of the form informing you that you are about to add a new entry. When you click OK on the message, the new row should will be added.

Repeater Row Added

You can trigger this event when you want to inform the user that a new row has been added to the repeating section.

  1. Open the designer and drag a Repeating Section control onto the canvas.
  2. Click on the control and locate the CSS class field in the Ribbon. Type ‘expensesRepeater’.
  3. Click on the Nintex Forms tab, and click on the Settings button in the Ribbon.
  4. Expand the Custom JavaScript section, and enter the following code:

NWF.FormFiller.Events.RegisterRepeaterRowAdded(function ()

{

     var repeaterRow = NWF$(arguments[0][0]);

if(NWF$(repeaterRow.parents('.nf-repeater')[0]).hasClass('expensesRepeater'))

{

alert('new row has been added to the expenses1 repeater');

}});

Click Save and then publish the form. Add a new item, and click on Add New Row to add another row to the repeating section. A new row will be added to the repeating section and then a message box will appear.

Repeater Row Deleting

You can trigger this event with you want to inform the user they are deleting a row from the repeating section.

  1. Open the designer and drag a Repeating Section control onto the canvas.
  2. Click on the control and locate the CSS class field in the Ribbon. Type ‘expensesRepeater’.
  3. Click on the Nintex Forms tab, and click on the Settings button in the Ribbon.
  4. Expand the Custom JavaScript section, and enter the following code:

NWF.FormFiller.Events.RegisterRepeaterRowDeleting(function ()

{

    var repeaterRow = NWF$(arguments[0][0]);

  if(NWF$(repeaterRow.parents('.nf-repeater')[0]).hasClass('expensesRepeater'))

{                                                                                                                                             

alert('you are about to delete a row from the expenses1 repeater');

}});

Click Save and then publish the form. Add a new item, and click on Add New Row to add another row to the repeating section. Next, click on the delete icon to delete a row. A message will telling you that the row is about to be deleted. When you click OK, the row will be deleted.

Repeater Row Deleted

You can trigger this event when you want to inform the user that a row from the repeating section has been deleted.

  1. Open the designer and drag a Repeating Section control onto the canvas.
  2. Click on the control and locate the CSS class field in the Ribbon. Type ‘expensesRepeater’.
  3. Click on the Nintex Forms tab, and click on the Settings button in the Ribbon.
  4. Expand the Custom JavaScript section, and enter the following code:

NWF.FormFiller.Events.RegisterRepeaterRowDeleted(function ()

{

   var repeaterControl = NWF$(arguments[0][0]);

  if(repeaterControl.hasClass('expensesRepeater'))

{

alert('you have just deleted a row from the expenses1 repeater');

  }

});

Click Save and then publish the form. Add a new item, and click on Add New Row to add another row to the repeating section. Next, click on the delete icon to delete a row. The row will be deleted, and a message will appear telling you that the row has been deleted.

Labels: (1)
Reply
12 Replies
mmatsako
Nintex Newbie

Re: JavaScript events in Nintex Forms

Jump to solution

This is great stuff. I've done a lot with JavaScript and utilizing the built in JQuery capabilities of Nintex Forms and it can be extremely useful and powerful.  Please post more on this type of stuff as it becomes available!

Thanks and keep up the great work!

Reply
ehealthsk
Nintex Newbie

Re: JavaScript events in Nintex Forms

Jump to solution

Is there event handlers like "click" on a yes/no field? also can we change the controls via javascript such as if I have a date field that is blank can I get the date in javascript and then use that to populate the date field? are there code examples?

0 Kudos
Reply
Not applicable

Re: JavaScript events in Nintex Forms

Jump to solution

Is there an event when closing the form?

I need to add a JS confirm alert when the user close the form clicking on the window upper right "close" button. I'm trying to achieve this using javascript but I haven't found an event to add the confrimation window, also I tried adding an event handler to that close image button but it didn't work.

I was able to add the confirm alert on the "Cancel" button, but the user wants the alert when clicking the window upper right "close" button.

Is there any other way that I'm missing?

0 Kudos
Reply
Not applicable

Re: JavaScript events in Nintex Forms

Jump to solution

I am using Nintex Forms 2013 Version: 2.2.1.0

Is there any workaround to hook Repeater Row Added and Repeater Row Deleted events ?

Thanks in advance.

0 Kudos
Reply
nedhumphreys
Nintex Newbie

Re: JavaScript events in Nintex Forms

Jump to solution

Trevor, you can add a click event handler to any form control by simply defining a css class and function in your javascript and adding that class to the control.  For instance, I needed to set the time on a textbox control on my form whenever the user clicked on it and I didn't want the form to have to go through a postback.  To do this, I defined a setTime class in my form's javascript and added this class to the control.  Here's the code in my javascript:

// set time function for setTime CSS class

$('.setTime').click(function(event) {

  var nullText = 'Click here to record time!';

  var d = new Date();

  if (!Date.now) {

    d.now = function() { return new Date().getTime(); }

  }

  var varTime = NWF$('#' + event.target.id);

  if (varTime.val() == nullText || !varTime.val()) {

    varTime.val(d);

  }

});

Don't forget to add the CSS class (in my case, setTime) to the control itself under the Formatting properties.  Hope this helps.  Good luck!

Reply
Not applicable

Re: JavaScript events in Nintex Forms

Jump to solution

Figured out the solution:

Add the below code in form control providing css class for repeating control "varPartRepeatingSection" and "varRowCount" for label which will display the the row count.

NWF$(document).ready(function () {

  repeatingSection = NWF$('.varPartRepeatingSection');

         NWF$(".nf-repeater-addrow").click(function(){

  window.setTimeout( fnNumberRows, 500 );  

            });

  NWF$('.nf-repeater-deleterow-image').click(function(){

  window.setTimeout( fnNumberRows, 500 );

  });

  function fnNumberRows() {

      var ID = 0;

      var labels = NWF$(repeatingSection ).find('.varRowCount');

      NWF$.each(labels, function (index) {

        if (index == 0) NWF$(this).text(labels.length);

        else NWF$(this).text(ID);

        ID++;

      });

    }

    });

Reply
kenglover
Nintex Newbie

Re: JavaScript events in Nintex Forms

Jump to solution

Has this been depreciated?

In testing out a fix to NWF$(document).ready() where the code was running before a select field (option) values had been loaded from another list, I tried the RegisterAfterReady event and it was firing before NWF$(document).ready() was.

In the end, I had to use setTimeout to delay my function by 10 seconds to ensure that the form was really completely loaded.

The potential change of behaviour happened between version 2.5 and 2.8.1.

0 Kudos
Reply
ganesh_lathi
Nintex Newbie

Re: JavaScript events in Nintex Forms

Jump to solution

Hey Ken, I was facing the same situation, need to do following even though i have used RegisterAfterReady

  1. Replace NWF$(document).ready() with NWF.FormFiller.Events.RegisterAfterReady(function () {  }
  2. your onchange function should look like,

<fieldName>.change(function (e) {

if(<lookupvalue>!= "")

{

if (e.originalEvent != undefined) {

<<write your code>>

}

}

0 Kudos
Reply
pdavis
Nintex Newbie

Re: JavaScript events in Nintex Forms

Jump to solution

Quick question, I am trying to assign focus to a number field using this method and it doesn't seem to be working.  Is the syntax for a number field and a single line text field different?

0 Kudos
Reply