update:
I found this post:
https://community.nintex.com/t5/Community-blogs/Using-Javascript-to-update-a-repeating-section/ba-p/82584
but he uses a lookup on another list and not a textbox on the same list as I do... i tried to change the code but my code does nothing EXECPT adding one empty row to the repeating section???
here are the variables I use:
rsdate = MULTIKostenstellen
varDropDown = varFOMAID
dwgDimensio = KostenstellenNr
ddOperation = KostenstellenWissenschaftler
and I added a few more fields
because I have a textfield and not a lookup I changed the code to this:
var lookupId = NWF$('#' + varFOMAID).val();
instead of:
var lookupId = NWF.RuntimeFunctions.parseLookup(NWF$('#' + varDropdown).val(), true);
here is the modified code:
NWF.FormFiller.Events.RegisterAfterReady(function () {
NWF$(document).ready(function () {
NWF$("#" + varFOMAID).change(function () {
ClearRSData();
GetRSDataFromLookup();
});
});
});
function ClearRSData() {
var MULTIKostenstellen = NWF$('.MULTIKostenstellen');
var labels = NWF$(MULTIKostenstellen).find('.KostenstellenNr');
NWF$.each(labels, function (index) {
NWF$('.MULTIKostenstellen .nf-repeater-row:last').find('.nf-repeater-deleterow-image').click();
});
NWF$('.MULTIKostenstellen .nf-repeater-row:last').each(function () {
var $row = NWF$(this);
$row.find('.KostenstellenNr input').val('');
$row.find('.KostenstellenWissenschaftler input').val('');
$row.find('.KostenstellenZusatz input').val('');
$row.find('.KostenstellenDatum input').val('');
$row.find('.KostenstellenStandderKS input').val('');
$row.find('.KostenstelleBemerkung input').val('');
});
}
function GetRSDataFromLookup() {
var lookupId = NWF$('#' + varFOMAID).val();
if (lookupId != '') {
NWF$('#errorMsg').empty();
var requestUri = _spPageContextInfo.webAbsoluteUrl + '/_api/Web/Lists/getByTitle('AG3 Programm')/items?$filter=Title eq '' + lookupId + ''';
try {
NWF$.ajax({
url: requestUri,
type: 'GET',
headers: {
'ACCEPT': 'application/json;odata=verbose'
},
success: GetRSDataFromLookupSuccess,
error: GetRSDataFromLookupError
});
}
catch (err) {
NWF$('#errorMsg').html('getListData Error: ' + err);
}
}
}
function GetRSDataFromLookupSuccess(data) {
if (data.d.results.length > 0) {
var MULTIKostenstellen = data.d.results[0].MULTIKostenstellen;
parser = new DOMParser();
xmlDoc = parser.parseFromString(MULTIKostenstellen, 'text/xml');
var items = xmlDoc.getElementsByTagName('Item');
for (var i = 0; i < items.length; i++) {
NWF$('.MULTIKostenstellen .nf-repeater-row:last').each(function () {
var $row = NWF$(this);
$row.find('.KostenstellenNr input').val(xmlDoc.getElementsByTagName('KostenstellenNr')[i].childNodes[0].nodeValue);
$row.find('.KostenstellenWissenschaftler input').val(xmlDoc.getElementsByTagName('KostenstellenWissenschaftler')[i].childNodes[0].nodeValue);
$row.find('.KostenstellenZusatz input').val(xmlDoc.getElementsByTagName('KostenstellenZusatz')[i].childNodes[0].nodeValue);
$row.find('.KostenstellenDatum input').val(xmlDoc.getElementsByTagName('KostenstellenDatum')[i].childNodes[0].nodeValue);
$row.find('.KostenstellenStandderKS input').val(xmlDoc.getElementsByTagName('KostenstellenStandderKS')[i].childNodes[0].nodeValue);
$row.find('.KostenstelleBemerkung input').val(xmlDoc.getElementsByTagName('KostenstelleBemerkung')[i].childNodes[0].nodeValue);
});
NWF$('.MULTIKostenstellen').find('a').click();
}
NWF$('.MULTIKostenstellen .nf-repeater-row:last').find('.nf-repeater-deleterow-image').click();
}
}
function GetRSDataFromLookupError() {
alert('Failed to load Lookup Items');
}
any ideas?
I've looked at this problem and it's pretty large. Frankly, it would take a lot of time to develop / test something like this, so instead of getting your hopes up, let me ask you another question:
What is the purpose of solving this problem in this way?
I ask this because the way you'd like to do this is very difficult, and if there is something preventing you from accomplishing the same outcome, but in a different way, perhaps we can solve the problems surrounding that instead of trying to 'reinvent the wheel' so to speak.
To expand:
What is the end goal of this method of data entry?
Is there a reason people couldn't just use the forms that exist elsewhere with the data already on them?
Could we just prevent them from changing *existing* data, instead of trying to move Repeating Rows around?
There are a few more Questions I have, but I think this is a good starting point as it will help to narrow stuff down.
I have already a few formulars that work like that.. but all of them never had repeating sections... so thats why I am here .
I want to have an overlay for the users, so they can just edit data .. start workflows...save it ... and continue... and that all from one formular on a wiki page. (imagine skipping through a list via a formular just by entering a ID and everything autofills in the formular so u have it nice and neat)
the new formular I have created is for the group who works with finances and they have to use repeating section (to calculated multiple values or to add multiple new colleagues with different informations).
I know that this is kind of a specific topic but I have to find a solution for that.
And the post from paul_crawford is (exept for the lookup and 2 lists) exactly what I need.
I thought it would be doable with just a few changes to the code.
Well that sounds interesting. I can't speak for the rest of their code, but if you just wanna target a Lookup Control inside of a Repeating Section (or any control for that matter), then you'll just need to NOT use the built in variable ID reference because it doesn't work. Instead I suggest relying on the Control Name, as it's straight forward to use.
Here is an example form with a RS section and Lookup Control called "control_Fruit":
If I Preview the Form and then look at the HTML in the Dev Console, you'll see that the outermost container of the control has an attribute on it called "data-controlname" with a value that is equal to the Control Name we gave it:
Using this, we can target the control using the following selector:
NWF$("[data-controlname='control_Fruit']");
But wait a second!
Doing this will return Two (or more!) Controls!
The reason for this is that when a Repeating Section is being generated, it first HIDES the original version with all of the controls / IDs, and then copies from that every time a new Row is needed. Even though there is only ONE visible Row on my form, there are TWO controls named "control_fruit" because one is hidden.
We can find only the "active" controls by changing our selector a bit to:
NWF$(".nf-repeater-row:not" + "(.nf-repeater-row-hidden) [data-controlname='control_Fruit']")
(note: why did I concatenate two strings at the "not"? because Nintex Forms will automatically check any code (that's not referenced as a file) and *replace* certain keywords that are immediately followed by an open parenthesis "(" into its internal custom function call instead. Because "not(" is one of those words, if I don't do something to break that apart, then it gets turned into something else and breaks the jquery!)
Now that returns only the controls from the visible rows, which in this case is 1.
But what if you have more than one row?
Well you can either directly target a specific row using the [index] or you can iterate through the RS Rows and do work to each control.
Let's say we wanna select only the Second Row's Fruit Lookup. We could do this:
NWF$(NWF$(".nf-repeater-row:not" + "(.nf-repeater-row-hidden) [data-controlname='control_Fruit']")[1])
Notice that to get the 2nd Row I'm using an Index of [1]. That's because the indexes start at 0, so row 1 is index[0]!
But if I wanted to do work to every Fruit control in every row, then we could just iterate through them like:
NWF$(".nf-repeater-row:not" + "(.nf-repeater-row-hidden)").each(function(index, row){
row = NWF$(row);
var fruitControl = row.find("[data-controlname='control_Fruit']");
console.log(fruitControl.find(".nf-associated-control").val());
});
let's say though that I want to actually change the value of the control. Well, targeting is much the same, except we'll be making sure to change the value of the internal <select> element instead of anything else. Because the visible client <select> element has the class of "nf-client-control", we can just target that. But <select> element values aren't set on that element as they are just really a "container" for <option> elements. The "selected" option will have a property named "selected" set to true if it is. So using that info, if we wanted to change the value of our Fruit Control in the second row, we could use the following formula:
NWF$(NWF$(".nf-repeater-row:not" + "(.nf-repeater-row-hidden) [data-controlname='control_Fruit']")[1]).find("select.nf-client-control option[value='1']").prop("selected", true).trigger('change');
If I wanted to iterate through all rows and change the Fruit Control's value to that of the Row Index + 1, then I could do just that using something like:
NWF$(".nf-repeater-row:not" + "(.nf-repeater-row-hidden)").each(function(index, row){
row = NWF$(row);
var fruitControl = row.find("[data-controlname='control_Fruit']");
var fruitSelect = fruitControl.find("select.nf-client-control");
fruitSelect.find("option[value='" + String(index+1) + "']").prop("selected", true).trigger("change");
console.log(fruitControl.find(".nf-associated-control").val());
});
So, as you can see, while it isn't as straight forward as changing the value of other controls, it's kinda similar enough that it shouldn't be too big of a challenge. Just remember that for Lookups, the value of the options are usually set to the ID of whatever it is the Lookup has been setup to point towards. You might have to press F12 and inspect the Control to get an idea of which values it's pulling, but the principle above apply regardless of their values (just make sure you're actually selecting real values!).
You also may have noticed that I'm adding a ".trigger("change")" bit at the end of my value change, and that's to make sure the form knows to update any related Controls / Rules that are relying on data from the Lookup in question.
This should at least get you started on the way to doing what it is you'd like to do.
Hope it helps.
I will look into it tomorrow (it is quite late in germany).
I'll let u know if it did the trick. 🙂
@MegaJerk Okay. I think there is a missunderstanding in our communication.
Lets just ignore that paul JS code stuff and look at following example:
So we have no JS and start from the beginning.
I try to explain it as good as possible so you could create the example by urself and test it in detail.
I have a List named:
Animal
It contains the following fields:
Number = required Textfield coloum (which will contain an unique number)
Multilinetextfield = a multilinetextfield (plain text) where the repeating section data will be stored
now to the formular:
Firstly the repeating section is connected to the Multilinetextfield and gets the name control_Multilinetextfield
THE REPEATING SECTION contains:
Name = name of the animal
Born on = data coloum to select a date (only date NO time)
Colour = dropdown coloum to select a colour (Red, Green, Blue)
and because you mentioned it in ur answer they all need a Control Name so they have:
Name = control_Name
Born on = control_Bornon
Colour = control_Colour
Thats it ... now we publish the formular and enter some entries and save them to the list:
Now the list looks like this:
Sooooo now it gets to the part where I have no clue (bcs the solution of paul doesnt work):
When I open a new formular again its empty (as it should be):
What I want is that when I enter the "1" into the "Number" field and focusout of it the repeating section should autofill itself with the values stored in the Multilinetextfield. (so we need a lookup formula on the field Multilinetextfield and get its value somehow ... I mentioned in my first post that I know how to do that with any other kind of field (date, text, dropdown, multiple choice) but NOT with repeating section :()
It looks a bit confusing but I tried to add a few colours so u know what belongs to which field.
Now if I would change the Numberfield to "2" (and focus out of it) it should clear the repeating section and autofills it with the values linked to the "2" in the list (the repeating section clears itself and then adds the 3 rows with Lion, Ape and Bird)
It got a bit confusing because I tried the JS from the post I mentioned... Let us focus on the List: Animal
@MegaJerk Update:
I am very close to solving it:
Do the following changes:
change the control name from the multilinefield to "Multilinetextfield" and give it the same as a css class.
Give all of the three controls a css class with the same name:
Give the numberfield a JS var: varAnimal
Add following code to the JS settings:
NWF.FormFiller.Events.RegisterAfterReady(function () {
NWF$(document).ready(function () {
NWF$("#" + varAnimal).change(function () {
ClearRSData();
GetRSDataFromLookup();
});
});
});function ClearRSData() {
var Multilinetextfield = NWF$('.Multilinetextfield');
var labels = NWF$(Multilinetextfield).find('.control_Name');
NWF$.each(labels, function (index) {
NWF$('.Multilinetextfield .nf-repeater-row:last').find('.nf-repeater-deleterow-image').click();
}); NWF$('.Multilinetextfield .nf-repeater-row:last').each(function () {
var $row = NWF$(this);
$row.find('.control_Name input').val('');
$row.find('.control_Bornon input').val('');
$row.find('.control_Colour input').val('');
});
}function GetRSDataFromLookup() {
var lookupId = NWF$('#' + varAnimal).val();
if (lookupId != '') {
NWF$('#errorMsg').empty();
var requestUri = _spPageContextInfo.webAbsoluteUrl + '/_api/Web/Lists/getByTitle('Animal')/items?$filter=Title eq '' + lookupId + ''';
try {
NWF$.ajax({
url: requestUri,
type: 'GET',
headers: {
'ACCEPT': 'application/json;odata=verbose'
},
success: GetRSDataFromLookupSuccess,
error: GetRSDataFromLookupError
});
}
catch (err) {
NWF$('#errorMsg').html('getListData Error: ' + err);
}
}
}function GetRSDataFromLookupSuccess(data) {
if (data.d.results.length > 0) {
var Multilinetextfield = data.d.results[0].Multilinetextfield;
parser = new DOMParser();
xmlDoc = parser.parseFromString(Multilinetextfield, 'text/xml');
var items = xmlDoc.getElementsByTagName('Item');
for (var i = 0; i < items.length; i++) {
NWF$('.Multilinetextfield .nf-repeater-row:last').each(function () {
var $row = NWF$(this);
$row.find('.control_Name input').val(xmlDoc.getElementsByTagName('control_Name')[i].childNodes[0].nodeValue);
$row.find('.control_Bornon input').val(xmlDoc.getElementsByTagName('control_Bornon')[i].childNodes[0].nodeValue);
$row.find('.control_Colour input').val(xmlDoc.getElementsByTagName('control_Colour')[i].childNodes[0].nodeValue);
});
NWF$('.Multilinetextfield').find('a').click();
}
NWF$('.Multilinetextfield .nf-repeater-row:last').find('.nf-repeater-deleterow-image').click();
}
}function GetRSDataFromLookupError() {
alert('Failed to load Lookup Items');
}
and now... it works... but it doesnt xD...
Only things left are the dropdowns and the right dateformat.
Example video:
for the dropdown:
$row.find('.control_Colour select').
instead of:
$row.find('.control_Colour input').
got it:
date:
var date = xmlDoc.getElementsByTagName...
var dateSplitted = date.split(' ')[0].split('/');
date = dateSplitted[1] + '.' + dateSplitted[0] + '.' + dateSplitted[2];
$row.find(...).val(date);