Solved

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

  • 30 November 2021
  • 10 replies
  • 241 views
SmashedMonkey

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.

20777iE6217314B1199B7F.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.

icon

Best answer by SmashedMonkey 2 December 2021, 23:58

View original

10 replies

SmashedMonkey

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?



Thanks in advance.


 

SmashedMonkey
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?
A
Badge +8

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)

SmashedMonkey

@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.

A
Badge +8

@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

SmashedMonkey

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



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.

A
Badge +8

@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?

SmashedMonkey

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?

A
Badge +8

"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-p/79521

SmashedMonkey

OK, so I have got the form working now. I went for two buttons below the repeater. It seems less problematic that way. So the copy row button works as I described in the earlier post and to use a button to generate a new row (blank), I added another button and set the client click code to:


NWF$(".OTRepeater").find('a').click();

...which works well. Then all I had to do was hide the default link, by adding the class override into the custom CSS in the form settings (remember that if you have more than one repeating section, this will suppress the links on all of them).


.nf-repeater-addrow
{
display: none;
}

So the final form looks like this - and works!



Thanks to everyone who contributed and helped on this.

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings