So are you wanting the value of the lookup to be a text field in a repeating row?

This takes the options of a choice field and creates a repeating row then sets the value for a single line text box for each option:

testChoice is the Client ID JavaScript variable name for the choice

textbox is the client id JavaScript variable name for the single line text box in the repeating section

.myrepclass is the css class of the repeating section

I added a JavaScript button the runs the function test()

var choice = NWF$('#' + testChoice);
function test() {
var x = choice.children('option');

for(i=2; i <x.length; i++){
    
     NWF$(".myrepclass").find('a').click();
}
var j=0;
NWF$(".myrepclass .nf-repeater-row:not('.nf-repeater-row-hidden')").each(function(){
j++;
var $row = NWF$(this);
$row.find(".textBox input").val(x.text);
});
  }

Hi Parker,

Thanks for your reply, but it's not quite what I need so let me try to clarify with some images. I have the following SharePoint lists:

And I'm trying to design the following Nintex Form:

The main elements on the form are:

1. Select State: achieved via a List Lookup control, using the States list as the source.
2. Show Stores: this button, when clicked, will query the Stores list filtering on the selected State in step 1. The results of the query are then shown in...
3. Available Stores: a Repeating Section control that (initially) contains one Single Line Textbox control.

Essentially, I'd like to see if it's possible to query the SharePoint list via JavaScript and return each result as a row in the repeating section.

Cheers,

Michael

Ah, so will you need to be able to add a new row if you hit show stores again?  I don't think you will be able to dynamically add text boxes into the repeating section.  It could be a multiline text box, or you could try nested repeating sections.

Parker Petty wrote: Ah, so will you need to be able to add a new row if you hit show stores again?

Not quite. If the user wants to add a new row, they simply click on the "Add new row" link underneath the repeating section.

Pressing the button would only be used to populate the repeating section. Subsequent presses should reset all the values in the repeating section (in the event, say, they want to change the selected "State").

You mention that it can be done with a multi-line text box instead of a repeating section? Could you share the JavaScript that could achieve that?

//function ran on button click
function test() {

//set var as choice field

var choice = NWF$('#' + testChoice);

var x = choice.children('option');

var locations = x[1].text + "
";

for (i=2; i < x.length; i++) {
  //add newline after every option
  locations = locations + x.text + "
";
}
//set multiline textbox value
NWF$('#' + multiBox).val(locations);

}

Hi Parker,

I'm not sure my previous response was clear, but I don't want the button to grab the values of an existing lookup and display them elsewhere. I think this is what your examples are doing.

I actually want the button to perform the lookup, and then display the results for further manipulation. In any case, I think I have found a solution which I'll share shortly.

Cheers,

Mike

Here's the solution I came up with, borrowing some ideas from Parker's post in how to manipulate the repeating section control. The purpose of this was to use JavaScript to query a SharePoint list based on a selection made on the form, and then to present the results of the query in a repeating section control. The example I'm sharing below also populates a Multi Line textbox for good measure.

To recap, I have the following two SharePoint lists:

The form is as follows:

Form Configuration

I've configured the main elements on the form as follows:

1. Select State: I'm using a List Lookup control with the States SP list as the source, and the Client ID JavaScript variable name to selState.
2. Get Stores: Set the Button action to JavaScript, and under Advanced set Client click to retrieveListItems(). The actual JavaScript code is explained in the Form JavaScript section below.
3. Multi Line Text Box: Under the Advanced properties, set the Client ID JavaScript variable name to multiBox.
4. Repeating Section: Under the Formatting properties, set the CSS class to repStores.
   • For the Single Line Textbox control inside this section, set it's Formatting property CSS class to repStoreTitle.

Form JavaScript

Under the general form Settings, the following JavaScript code is used:

function retrieveListItems() {

    var clientContext = new SP.ClientContext();
    var oList = clientContext.get_web().get_lists().getByTitle('Stores');
       
    var camlQuery = new SP.CamlQuery();
    var strState = NWF$("#" + selState + " option:selected").text();
   
    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name='State'/>' +
        '<Value Type='Text'>' + strState +'</Value></Eq></Where>' +
        '<OrderBy><FieldRef Name='Title'/></OrderBy></Query></View>');
    this.collListItem = oList.getItems(camlQuery);
       
    clientContext.load(collListItem);
       
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed)
    );       
       
}

function onQuerySucceeded(sender, args) {

    var listItemInfo = '';

    var listItemEnumerator = collListItem.getEnumerator();
       
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        listItemInfo += oListItem.get_item('Title') + '
';
       
        NWF$(".repStores .nf-repeater-row:last").find('.repStoreTitle input').val(oListItem.get_item('Title'));
        NWF$(".repStores").find('a').click();

    }

    NWF$("#" + multiBox).val(listItemInfo);
   
}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '
' + args.get_stackTrace());
}

I won't go into the details behind the JS, but the key elements were constructing the CAML query to retrieve the list items, then iterating through the list collection while populating the target controls of the Multi Line text box and Repeating Section.

References

• How to: Retrieve List Items Using JavaScript (https://msdn.microsoft.com/en-us/library/office/hh185007(v=office.14).aspx)
• SP.ClientContext.web property (sp.js) (https://msdn.microsoft.com/en-us/library/office/jj246877.aspx)
• Collaborative Application Markup Language (CAML) schemas > Query Schema (https://msdn.microsoft.com/EN-US/library/ms467521.aspx)

Hope this helps!

very nice!...I see what you wanted now.  I should have said to add you lookup field and filter it by the control then set the css property of the lookup to display none.  However...i'm copying your JS and will probably use it in the future.

Thanks!

I suppose by having a "hidden" list lookup control, you remove the need to perform the query within JavaScript, and simply read off it's values. But I think the JavaScript approach allows you more flexibility in that you retrieve all fields from the query, whereas the "hidden" list lookup control is limited to a single field.

Still, good to know both approaches!

My original problem and solution above was in the context of Nintex Forms version 2.7.0.0 (SharePoint 2013). I'm now having to revisit this within a Nintex Forms version 4.2.2.0 (SharePoint 2016) environment, and finding that the custom Javascript isn't working correctly. Some quick debugging suggests that the selector for the dropdown list isn't functioning. That is, I'm unable to retrieve the text of the selected value from the dropdown with the following line:

var strState = NWF$("#" + selState + " option:selected").text();

Where selState is defined as the Client ID for the list lookup dropdown.

Can someone point out what may have changed between Nintex Forms versions that prevent this from now working? Thanks in advance!

Found a solution as suggested by Marian Hatala‌ in post How to get selected value from 'new' dropdown list in JavaScript. The solution is to change line 6 in my original JavaScript from:

var strState = NWF$("#" + selState + " option:selected").text();‍‍

to the following:

var strState = NWF.RuntimeFunctions.parseLookup(NWF$("#" + selState).val(), true);‍‍

Hope this helps anyone else with a similar migration problem.

Hi

I have an issue with this solution, it works all fine with your post. Thank you  But it always add the empty repeating section to(Picture). Is it  possible that we only generete this much fileds as the lookup contains? i have a calulated value field next to the Single Line text box and the value is only visible when i delete the empty repeating section. 

Thank you very much

cheers,

Florian

You can simply trigger the click() event on the delete row image of the last row after all your rows have been inserted. Referring to the original code above at line 31, add the following line after the closing brace of the while{} loop:

// Remove the last row
NWF$('.repStores .nf-repeater-row:last').find('.nf-repeater-deleterow-image').click();‍‍

Hope that helps!

‌

I tried something similar, but my code doesn't work.  

It works !! Thank you for your help.

cheers,