Following on from this question Need to Copy a repeating section from a List-item to a repeating section to a different List-item? raised by Pam Lewis i thought i would blog my solution in case there were others with the same requirement.
Requirement:
ListA - Title column and repeating section.
ListB - Title column, lookup column and repeating section.
Create an item in ListA, update a repeating section with info as required. Save.
Create an item in ListB, from a lookup control, select the relevant item from ListA and the repeating section on ListB will be populated from the repeating section data from ListA.
Form from ListA:
The repeating section control is connected to a plain text multiline of text column.
The first text control in the repeating section has a name of dwgDimension.
The second text control in the repeating section has a name of ddOperation.
Form from ListB
The repeating section control is connected to a plain text multiline of text column with a name of rsdata and css class of rsdata.
The first text control in the repeating section has a name of dwgDimension.
The second text control int the repeating section has a name of ddOperation.
Under the Advanced section of the list lookup control set the Store Client ID in JavaScript variable to yes and add a variable name of varDropDown
Go to form settings and under Custom JavaScript add the following code:
NWF.FormFiller.Events.RegisterAfterReady(function () {
NWF$(document).ready(function () {
NWF$("#" + varDropdown).change(function () {
//clear repeating section
ClearRSData();
//get repeating section data
GetRSDataFromLookup();
});
});
});
function ClearRSData() {
//get the repeating section
var rsdata = NWF$('.rsdata');
//count number of fields to give number of rows
var labels = NWF$(rsdata).find('.dwgDimension');
//iterate through rows
NWF$.each(labels, function (index) {
//delete the last row
NWF$('.rsdata .nf-repeater-row:last').find('.nf-repeater-deleterow-image').click();
});
//for last row as index 0 row cannot be deleted
NWF$('.rsdata .nf-repeater-row:last').each(function () {
//get the row
var $row = NWF$(this);
//clear the field value
$row.find('.dwgDimension input').val('');
//clear the field value
$row.find('.ddOperation input').val('');
});
}
function GetRSDataFromLookup() {
//get the lookup value
var lookupId = NWF.RuntimeFunctions.parseLookup(NWF$('#' + varDropdown).val(), true);
//if lookup value is not null
if (lookupId != '') {
//clear jQuery error messages
NWF$('#errorMsg').empty();
//set the lookup list url to get repeating section xml data
var requestUri = _spPageContextInfo.webAbsoluteUrl + '/_api/Web/Lists/getByTitle('ListA')/items?$filter=Title eq '' + lookupId + ''';
try {
NWF$.ajax({
url: requestUri,
type: 'GET',
headers: { 'ACCEPT': 'application/json;odata=verbose' },
success: GetRSDataFromLookupSuccess,
error: GetRSDataFromLookupError
});
}
catch (err) {
//set error message
NWF$('#errorMsg').html('getListData Error: ' + err);
}
}
}
function GetRSDataFromLookupSuccess(data) {
//check the result set is not empty
if (data.d.results.length > 0) {
//get the xml data from the result
var rsdata = data.d.results[0].rsdata;
//intiate xml parser
parser = new DOMParser();
// populate the parser with the xml data
xmlDoc = parser.parseFromString(rsdata, 'text/xml');
//get the item tag from the xml
var items = xmlDoc.getElementsByTagName('Item');
//foreach item in the xml
for (var i = 0; i < items.length; i++) {
//get the repeating section last row
NWF$('.rsdata .nf-repeater-row:last').each(function () {
var $row = NWF$(this);
//set the field value
$row.find('.dwgDimension input').val(xmlDoc.getElementsByTagName('dwgDimension')[i].childNodes[0].nodeValue);
//set the field value
$row.find('.ddOperation input').val(xmlDoc.getElementsByTagName('ddOperation')[i].childNodes[0].nodeValue);
});
//add new row
NWF$('.rsdata').find('a').click();
}
//delete extra unnecessary row
NWF$('.rsdata .nf-repeater-row:last').find('.nf-repeater-deleterow-image').click();
}
} function GetRSDataFromLookupError() {
alert('Failed to load Lookup Items');
}
Fistly we register the function to the change event of the lookup field.
Then we clear any data from the repeating section (allows for changes in the lookup value)
Then we populate from the repeating section of the first List
Save and publish both forms.
Item 1 from ListA
Item 2 From ListA
New item from ListB
Change lookup value
Now you have a dynamically updating repeating section depending on the item selected in the lookup
Any questions, let me know.
Paul
nintex forms ; repeating sections javascript custom javascript
