SmashedMonkey
Scholar

How to duplicate a repeating section row to a new row?

Jump to solution

Before I start, I have searched the forum and seen that this question, or a similar question has been asked before, but I have not seen any that have a solution that seems to provide what I am looking for.

I have a repeating section with 12 fields and their labels. The function is to allow entry of overtime working data - dates, times, purpose etc...

Below is a screenshot of the form I have built. It is pretty basic, but it does depend on using a repeating section, and that is where my problems lay.

SmashedMonkey_0-1638268916768.png

I have tried several layouts, but the above is the cleanest and most efficient. The filler will add the start and end dates and times, and then choose the Overtime Hours Type from the drop-down (7 options). Add the actual number of hours for that type and give and optional operation name. This means that for a given date range (selected in the top row of the repeater), there could be several Overtime Hours Types. In an attempt to try and remove the likely frustration and annoyance from the users, I want to provide them with a quick means of duplicating the previous row, so that they only have to add the type an hours for each variation, instead of adding most of the same data again.

 

So, I would like to have a button (which cannot be placed in the repeater), or maybe a checkbox, such as the one I have included, to create a new row, but to include the dates and times in the upper row, leaving the lower one empty for filling. [Note: I used drop-downs for the hours and minutes controls, because the date/time control only allows 5 minute increments, and we need the full 0-59 minute coverage].

I cannot see how I can discover what code is being run when the default Add new row link is used? Therefore, I was hoping that someone might be able to help me to find a way to achieve this. Unfortunately, this is one are of Nintex Forms that I am not that strong on.

Any help, gratefully received. Thank you.

0 Kudos
Reply
10 Replies
SmashedMonkey
Scholar

Re: How to duplicate a repeating section row to a new row?

Jump to solution

After some more searching on this forum, I came across some examples of JavaScript, which I have been able to modify and get to work (mostly). I basically need to duplicate the top part of the row that contains the start and end dates and times. I call the script with a button, outside of the repeater. I adds a new row and then copies the values from the StartDate and EndDate controls, but for the 4 drop-down choice controls (StartHours, StartMins, EndHours and EndMins), it doesn't work. The JavaScript I am using is below:

function UpdateRepeater() {
	//Find the last row in the repeating section
	NWF$(".OTRepeater .nf-repeater-row:last").each(function () {
		//find the current row
		var $row = NWF$(this);
		//find the current row values
		var $input1Val = $row.find(".dateClass1 input").val();
		var $input2Val = $row.find(".hourClass1 input").val();
		var $input3Val = $row.find(".minClass1 input").val();
		var $input4Val = $row.find(".dateClass2 input").val();
		var $input5Val = $row.find(".hourClass2 input").val();
		var $input6Val = $row.find(".minClass2 input").val();
		//add new row
		NWF$(".OTRepeater").find('a').click();
		//Find the new row (last) in the repeating section
		NWF$(".OTRepeater .nf-repeater-row:last").each(function () {
			//find the current row
			var $row = NWF$(this);
			//set the field value
			$row.find(".dateClass1 input").val($input1Val);
			//give field focus so calculated columns will work
			$row.find(".dateClass1 input").focus();
			//set the field value
			$row.find(".hourClass1 input").val($input2Val);
			//give field focus so calculated columns will work
			$row.find(".hourClass1 input").focus();
			//set the field value
			$row.find(".minClass1 input").val($input3Val);
			//give field focus so calculated columns will work
			$row.find(".minClass1 input").focus();
			//set the field value
			$row.find(".dateClass2 input").val($input4Val);
			//give field focus so calculated columns will work
			$row.find(".dateClass2 input").focus();
			//set the field value
			$row.find(".hourClass2 input").val($input5Val);
			//give field focus so calculated columns will work
			$row.find(".hourClass2 input").focus();
			//set the field value
			$row.find(".minClass2 input").val($input6Val);
			//give field focus so calculated columns will work
			$row.find(".minClass2 input").focus();
		});
	});
}

I added a CSS class to the repeater "OTRepeater" and added classes to the date and time fields like dateClass1, hourClass1, minClass1 ... representing the start date, hours and minutes controls and the same for the end controls ending in 2.

This works well for the two date controls, but not for the drop-down choice controls. How do I adapt the script to copy the 4 drop-down values and set the corresponding values in the drop-downs in the next repeater row, when it is created?

Also, I want to have the Copy to New Row button (a styled rich text control) with a CSS class of "form-copyrow" call the function in the script above, is that possible?

SmashedMonkey_0-1638485870268.png

Thanks in advance.

 

View solution in original post

0 Kudos
Reply
SmashedMonkey
Scholar

Re: How to duplicate a repeating section row to a new row?

Jump to solution
Managed to get the drop-downs populating properly, I had to change the $row.find(".hourClass1 input") to $row.find(".hourClass1 select"), and it all worked.
So just need some help with the fake button inside the repeater - if anyone can help, please?
0 Kudos
Reply
Aleximo
Contributor

Re: How to duplicate a repeating section row to a new row?

Jump to solution

Hey @SmashedMonkey,

 

here is a solution with a link:

 

<a onclick="UpdateRepeater();" href="#" class="form-copyrow">Copy Row</a>​​​​​

 

(FYI: it didnt work when i tried the "button" tag)

0 Kudos
Reply
SmashedMonkey
Scholar

Re: How to duplicate a repeating section row to a new row?

Jump to solution

@Aleximo Thanks for this. I added it to a label control and used this in the source view. When I click the link in the preview, it seems to get into a loop, and no new rows get produced. What control did you use for this - a choice control maybe?

Thanks.

0 Kudos
Reply
Aleximo
Contributor

Re: How to duplicate a repeating section row to a new row?

Jump to solution

@SmashedMonkey 

 

A label should work... I just took it from one of my forms and changed the function name... its hard to tell why its not working without the whole form.

 

is the function name correct? UpdateRepeater? ... because thats what the "onclick" will start

0 Kudos
Reply
SmashedMonkey
Scholar

Re: How to duplicate a repeating section row to a new row?

Jump to solution

@Aleximo this is what my test button (outside of the repeater) contains...

SmashedMonkey_0-1638889333976.png

I had an alert in the code of my function, and that just kept coming up, over and over. I had to kill the browser session to get out. I removed the alert, but clicking the link just sent the browser unresponsive. Maybe I am looking at this the wrong way. I don't mind the button outside of the repeater, so perhaps I can find a way to replace the Add new row default link (and hide that), and replace with a button, so that the form looks more consistent. Have you done this before?

Thanks.

0 Kudos
Reply
Aleximo
Contributor

Re: How to duplicate a repeating section row to a new row?

Jump to solution

@SmashedMonkey 

 

So the js functon gets started by clicking it?

 

I dont know why it loops itself... and why it doesnt loop if u use a button.

 

But if its working with the button, why dont u put it into the repeating section?

Reply
SmashedMonkey
Scholar

Re: How to duplicate a repeating section row to a new row?

Jump to solution

Repeating sections do not allow button controls within the repeater rows, so they have to stay outside.

I need to find the code that the default Add new row link uses, and then try to create another function for that to trigger. Unless there is a more elegant and simple way to hide and replace the default link?

0 Kudos
Reply
Aleximo
Contributor

Re: How to duplicate a repeating section row to a new row?

Jump to solution

"Repeating sections do not allow button controls within the repeater rows, so they have to stay outside." - I didnt even knew that.

 

Maybe this helps:

 

https://community.nintex.com/t5/Community-blogs/The-Big-Event-A-Closer-Look-At-Nintex-Form-Events/ba...

0 Kudos
Reply