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
Download the Nintex Form : Download and import into the Nintex Form Designer page
