JavaScript events in Nintex Forms

Document created by Emily Billing Employee on Jul 13, 2014Last modified by Emily Billing Employee on Oct 2, 2014
Version 6Show Document
  • View in full screen mode

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.

2 people found this helpful

Attachments

    Outcomes