Insert a row in a repeating section?


Badge +1

I have a form with a repeating section on it, and would like to set up the ability to insert rows in that section, rather than add them on the bottom of the section like the default behavior for the "Add new row" link. 

I have the repeating section configured to include an "insert row" link for each one, but can't find a function that will insert a row above (or below, doesn't really matter) the row where the "insert row" link is clicked.  I am guessing there is some sort of JavaScript function built in that looks for the last child in the repeating section, and appends the new row.  I can get the index number of the "Insert Row" link that is clicked with .index() to figure out after/before which row the new one should be added, but just need the function that creates the row to pass that parameter to.

sample repeating section wiht insert row link

Thanks for any help/guidance anyone can provide!


13 replies

Badge +16

‌ I like what you are trying to achieve here - did you manage to get it working?

Badge +1

‌ I have not been able to get it working so far sad.png  We are using a work-around of having some hidden rows that people can "insert", but the solution is not optimal since the number of rows that one can insert is limited with this approach.

Badge +16

‌ any of your magic javascript that can achieve this?

Userlevel 2
Badge +11

Hi Yana,

See Marian Hatala‌'s answer in this post: ‌.

Badge +1

I was able to figure out a solution to this using JavaScript.  Instead of focusing on inserting a row, what I did was use the Nintex Forms action to add a new row on the bottom, and then shift the existing data down a row (depending on which row was clicked).

// add-repeat is the class for my "Insert Row" rich text

NWF$(".add-repeat").on("click", function() { // When the "Insert Row" element is clicked...
    NWF$(".ms-addnew").click();    // Activate the "add new row" that comes with the form
    var numRows = NWF$(".add-repeat").length - 1;
    var index = NWF$(".add-repeat").index(this); // Get number of row where "Insert Row" is clicked
    if (numRows >= 3) { // I only want this to run under this condition, but you can remove it
     for (var i=numRows; i>=index; i--) {
      var valueStore = NWF$(".nf-repeater-row").eq(i).find('input').val();
      NWF$(".nf-repeater-row").eq(i+1).find('input').val(valueStore);
     }
}
    NWF$(".nf-repeater-row").eq(index+1).find('input').val('');
})‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Badge +3

What event did you add behind the Insert row, was it something linke this??

<a id="myLink" href="#" onclick="MyFunction();">link text</a>
Badge +1

The Insert row is just a Rich Text control, it's not an actual link (I didn't want to mess with the 'edit source' in the rich text control).  The control has the CSS class add-repeat, and the event listener in my code waits for a click on an item with that class name, but it doesn't need to actually be a link.

Badge +3

Link to form

Please see above the link to form, i am trying to do exact same thing, it seems I maybe missing an event.

Badge +3

I was also hoping if you could share your form, so i could figure it out what I am doing wrong...

Badge +3

Some further update, I have got the issue sorted by using single line of text as data instead of using the people lookup field. Question is now how do I use the people data type instead of using the single line of text?

Badge +1

The people lookup field is trickier, but since we are also using our repeating field to insert approver names, I went ahead and wrote out the code for it.  Essentially, if you want to fill in the people field, you need to use the PeoplePickerApi.  Here's a link to the documentation https://community.nintex.com/docs/DOC-1222

And here is the code.  I can't get it working without having a brief pause on each loop iteration; I think the API needs a little bit of time to find the name.  Otherwise all the names get written to a single people field.

I set a CSS class for the repeating area called repeater.  The people picker itself has the CSS class ppl-picker.  The CSS classes ip-item and nf-peoplepicker exist natively, and do not need to be added.

NWF$(".add-repeat").on("click", function() { // When the "Insert Row" element is clicked...
  NWF$(".ms-addnew").click();    // Activate the "add new row" that comes with the form
    var numRows = NWF$(".add-repeat").length-1;
    var index = NWF$(".add-repeat").index(this); // Get number of row where "Insert Row" is clicked

     for (var i=numRows; i>index; i--) {
     
      (function(i){
        setTimeout(function(){
          var login = NWF$('.repeater').find('.ppl-picker').eq(i).find(".ip-item").attr("data-val"); // get data for the name currently in the field
          var objId = NWF$('.repeater').find('.ppl-picker').eq(i+1).find('.nf-peoplepicker'); // get the next field so we can move the name down
          var inputId = "#" + objId.attr("id"); // format the field to get the ID for the API
          var ins = new NF.PeoplePickerApi(inputId);  // create the people picker object

          ins.clear(); // clear whatever is currently in the field
              if (login != undefined) {
                  ins.search(login).done(function(data) {
                    ins.add(data[0]);
                  });
               }
              
               if (i==index+1) {
                clearCurrent(index); // when we are on the last item, clear the contents of the "inserted" row
              }
         }, 100);
    }(i));

  }
});

function clearCurrent(index) {
      var objIdBlank = NWF$('.repeater').find('.ppl-picker').eq(index+1).find('.nf-peoplepicker');
      var inputIdBlank = "#" + objIdBlank.attr("id");
      var insBlank = new NF.PeoplePickerApi(inputIdBlank);
      insBlank.clear();
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Badge +3

Thank you, that worked. Appreciate your help.

Badge

For responsive, you can use a Calculate control with a currentRowNumber() in its Formula property: 

Reply