I like what you are trying to achieve here - did you manage to get it working?
I have not been able to get it working so far 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.
any of your magic javascript that can achieve this?
Hi Yana,
See Marian Hatala's answer in this post: .
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('');
})
What event did you add behind the Insert row, was it something linke this??
<a id="myLink" href="#" onclick="MyFunction();">link text</a>
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.
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.
I was also hoping if you could share your form, so i could figure it out what I am doing wrong...
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?
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(dataa0]);
});
}
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();
}
Thank you, that worked. Appreciate your help.
For responsive, you can use a Calculate control with a currentRowNumber() in its Formula property: