Vadim Tabakman

Jump to bottom

Nintex Forms - Numbering a Repeating Section

A Repeating Section in a Nintex Form can be used in a number of different scenarios.  The first once that always comes to mind, is an Expense Claim form.  These types of forms will have any number of rows of data.  The number of rows is not defined at design time, but rather is dynamically added at run time, when a user is filling in an instance of the form.

VIDEO

One of the nice things to have, is the ability to number each of the rows.  This can actually be done with a little bit of JavaScript.

As you can see from the screenshot above, we have 7 rows, and we can add more by simply clicking on the "Add new row" link at the bottom.

Firstly, I want you take a look at this page on the Nintex Community Site - JavaScript Events in Nintex Forms

This is what I used to get this form to do what I wanted it to do.  Not only does it set the numbering when you add a row, but also if you delete rows.  I've actually included the form example in the downloads section at the bottom of this post.  It's for Nintex Forms 2013 and you can import it into any List as it doesn't have controls that are connected to fields.

var rs = null;
    NWF$(document).ready(function () {
      rs = NWF$('.vtMyRepeatingSection');

      window.setTimeout(doWork, 1000); // 1 seconds
    });
    function doWork() {
      NWF$(rs).find('.cssFirstField').find('input').val('wombat');
      NWF$(rs).find('.cssSecondField').find('input').val('koala');

      fnAddNRows(5);
      fnNumberRows();
    }
    function fnAddNRows(numRows) {
      for (i = 0; i < numRows; i++) {
        NWF$(rs).find('.ms-addnew').click();
      }
    }
    function fnNumberRows() {
      var iID = 0;
      var labels = NWF$(rs).find('.vtLabel');
      NWF$.each(labels, function (index) {
        if (index == 0) NWF$(this).text(labels.length);
        else NWF$(this).text(iID);
        iID++;
      });
    }
    NWF.FormFiller.Events.RegisterRepeaterRowAdded(function () {
      var repeaterRow = NWF$(arguments[0][0]);
      if (NWF$(repeaterRow.parents('.nf-repeater')[0]).hasClass('vtMyRepeatingSection')) {
        fnNumberRows();
        NWF$(repeaterRow).find('.cssFirstField').find('input').val('wombat');
        NWF$(repeaterRow).find('.cssSecondField').find('input').val('koala');
      }
    });
    NWF.FormFiller.Events.RegisterRepeaterRowDeleted(function () {
      var repeaterControl = NWF$(arguments[0][0]);
      if (repeaterControl.hasClass('vtMyRepeatingSection')) {
        fnNumberRows();
      }
    });

 

The example JavaScript above shows you a few things.  Firstly, the numbering which I find important in repeating section rows.  It helps to uniquely identify each row.  The JavaScript also sets some values into controls in the rows.

The aim here is not really to do what I did with setting the values, because that can easily be done with default values for controls.  This is more to show that if you had some JavaScript that needed to make some complex call, like a complex web service call or REST call and you wanted to parse a bunch of data that was coming back and populate a repeating section, you can actually do that.

There are some requirements for this form to work.  The Repeating Section needs to have a css class associated with it.  The class doesn't need to exist, because we are just using the class name to find the object.

Once that is done, we also need a class name for the label, since that is what is going to be doing the numbering and also for the other controls, since we need to find them to set the values.

What we end up with, is a repeating section that looks like this.

 

Downloads

Nintex Forms 2013

Download the Nintex Form :   Download and import into the Nintex Form Designer page

Posted by Vadim Tabakman Saturday, August 8, 2015 11:06:00 AM Categories: Javascript Nintex Forms Nintex Forms 2013 Repeating Section
Copyright Vadim Tabakman
Rate this Content 1 Votes

Comments

Friday, August 14, 2015 5:34:41 AM
Manfred Lauer
Gravatar

re: Nintex Forms - Numbering a Repeating Section

Hi Vadim,

 

great post to handle repeating section using javascript and Forms event.

Only for numbering a repeating section I am using a Calculated Value Control in repeating section with formula currentRowNumber(ctrl_of_rep_sect) setting recalculate formula for all modes.

 

Kind regards

Manfred

Friday, August 14, 2015 7:30:09 AM

re: Nintex Forms - Numbering a Repeating Section

Hi Manfred

Wow, I scanned through the functions in a Calculated Value control and completely missed that.

Thanks for pointing that out.  That's a lot easier :)

cheers,

Vadim

Sunday, September 6, 2015 5:52:07 AM
Clark
Gravatar

re: Nintex Forms - Numbering a Repeating Section

nice description of GUI info .... but I also liked the detailed info on the coding shit .... that a lot of people wont get!
By the way Dim.... Your presentations are much better than the chick on your company's website! Goood on ya man!!!!

Friday, May 6, 2016 8:05:11 AM
Brad
Gravatar

re: Nintex Forms - Numbering a Repeating Section

How to I set the value of a multi text field?   Using the same code above doesn't seem to work.    Also a choice field? 

Thanks,

Brad

Friday, May 6, 2016 9:00:36 AM
Brad
Gravatar

re: Nintex Forms - Numbering a Repeating Section

Ok, I figured out you have to use the Control CSS class of the multiline text field instead of the css class.    I still need to modify the choices of the choice field based on what's chosen in the previous row.  Any help is appreciated.

Thanks,

Brad

Friday, August 19, 2016 9:43:16 AM

re: Nintex Forms - Numbering a Repeating Section

Vadim,

Thank you so much for this! It works beautifully!

I have scenario where I would like to use this functionality with 3 different repeating section controls on the same form. I tried to copy and paste the JavaScript and simply change the CSS names to point to my second repeating  section controls. When I did that, it stopped working on the first repeating section and started working on the second section.

My questions is, is there a way to modify the JavaScript so that it will work with 3 different repeating section controls on the same form?

Friday, August 19, 2016 9:57:42 AM

re: Nintex Forms - Numbering a Repeating Section

ha, sorry. disregard my previous question. I just saw the post about the calculated value. that works too :)

Friday, August 19, 2016 12:04:59 PM

re: Nintex Forms - Numbering a Repeating Section

Awesome. Glad you have a solution. Vadim
Sunday, August 28, 2016 10:26:59 PM

re: Nintex Forms - Numbering a Repeating Section

Hi Vadim

I'm guessing this doesn't work with the mobile app form? I've tried it and keep getting a negative 1 back as the count for each row. (-1). 

Joanne

You must sign in to this site to post comments.
Already Registered?
Sign In
Not Yet Registered?
Register
  • RSS





 

Statistics

  • Entries (239)
  • Comments (1722)

Categories