cancel
Showing results for 
Search instead for 
Did you mean: 
Workflow Hero

Javascript to set value in lookup list control

Jump to solution

I have a lookup-list control on my form tied to a single line text field in SharePoint. In my javascript code, I get customer data from a database and set the default customer data on the form.  On the lookup list control (which is a drop-down list), I use jQuery to set the val() of the control.  This is reflected in the form and I thought it was OK.  When I save the form, nothing is saved to the field. Since this a complicated form, I thought I'd test it out on a regular list.

To replicate my environment, create a custom list in SharePoint.

Open the form in Nintex form editor and delete the Title text field.

Place a lookup list control on the form and configure it so that the value is tied to the Title field.

Test your form so that when you create a new item, you get a Drop down list. 

To test my javascript, I wrote the following code:

NWF$(document).ready(function(){

            var ddlShipVia = NWF$("#" + tbTitle);

            ddlShipVia.on("change", function(e){

                console.log("Executing ddlShipVia.onChange()");

                if(e.originalEvent == undefined) {

                    if(this.value==""){

                        ddlShipVia.val(286);

                    }

                }

            });

});

This code works and sets the DDL to the corresponding index value (69).

Click Save and I get an error saying that the field is required.  If I manually select a value, then it saves just fine. 

Does anyone know how to progamatically set a value in a Lookup List DDL?

Reply
15 Replies
Workflow Hero

Re: Javascript to set value in lookup list control

Jump to solution

After you set the value to 286 call the change event: ddlShipVia.change();

Reply
Workflow Hero

Re: Javascript to set value in lookup list control

Jump to solution

I've found that Nintex uses a hidden input element right after the select element (the lookup) to hold the value bound back to the list item. So while changing the val() of the list lookup changes the lookup on screen, Nintex does not seem to be aware of the change. Calling .change() as suggested above will in fact trigger other events, like other lookups that might filter on this lookup, but Nintex is still looking at the input element when saving to the list item.

So the solution to binding the lookup value back to the list item is to call .val() on the hidden input element in addition to the lookup's select element.

Your code above should be modified as follows. Note the additional line which sets the .next(‘input’).val to 286:

NWF$(document).ready(function () {
    var ddlShipVia = NWF$("#" + tbTitle);
    ddlShipVia.on("change", function (e) {
        console.log("Executing ddlShipVia.onChange()");
        if (e.originalEvent == undefined) {
            if (this.value == "") {
                ddlShipVia.val(286);
                ddlShipVia.next('input').val(286);
            }
        }
    });
});

After publishing this change you should be able to Save the edit form and the list item Title field will be updated as expected.

UPDATE: April 2, 2017 -- My code example above no longer works with Nintex Forms 2.10.0.0 released in March of 2017. The client ID given by Nintex in the control settings now refers to the hidden input control directly, and the select is still the previous element.

0 Kudos
Reply
Workflow Hero

Re: Javascript to set value in lookup list control

Jump to solution

‌  -- did the above answer help you out?

0 Kudos
Reply
Workflow Hero

Re: Javascript to set value in lookup list control

Jump to solution

On the project I was working on for this, the requirements for form automation became so complicated that I had to abandon Nintex Forms for this project.  I ended up hand-coding an HTML form.  I never was able to test the above solution.

0 Kudos
Reply
Workflow Hero

Re: Javascript to set value in lookup list control

Jump to solution

Thank you for letting us know, I am sorry that it didn't work out.

0 Kudos
Reply
Workflow Hero

Re: Javascript to set value in lookup list control

Jump to solution

thanks! that did it for me, after changing the value of the dropdown, you also need to trigger the .change() event manually

Reply
Workflow Hero

Re: Javascript to set value in lookup list control

Jump to solution

Since we  upgraded to Forms version 2.10 (from an older version like 2.5) we have had a lot of trouble with this. The following code works for me but it isn't as clean as I would like it to be so if anyone has a suggestion for improvement, JS is not my specialty! There are two issues in my opinion:

  1. I'm not able to catch the change event of the child control as I should be. I have to trigger the change from the parent manually
  2. When the change happens it is too fast so I have to put in a delay loop to wait for the DDL to load completely. Seems like there should be a better way.

As I said, it works, it is just a little ugly. Note  that if you are not dealing with the parent/child relationship you can hardcode  default value really easily:

NWF$(document).ready(function() {
 NWF$("#" + myddl).val('3');
});

Here is the parent/child one:

NWF$(document).ready(function() {
 NWF$("#" + ddlParent).change(function () {       
  NWF$("#" + ddlChild).change();        
 }); 
   
  
 NWF$("#" + ddlChild).change(function () { 
  var ddlChildId = ddlChild.substring(0, ddlChild.length -4); 
  var len= NWF$("#" + ddlChildId ).find("option").length;      
  if(len>=2) {

 return delay(1000).then(function() {
   NWF$("#"      + ddlChildId).prop('selectedIndex',1);
   NWF$("input#" + ddlChildId).val(NWF$("#" + ddlChildId).find("option")[1]); 

});
  }
  else {
       while(i<10 && len==1) {
       i++;        
          return delay(1000).then(function() {
           len= NWF$("#" + ddlChildId ).find("option").length;
           if(len>=2) {
            NWF$("#"      + ddlChildId).prop('selectedIndex',1);
            NWF$("input#" + ddlChildId).val(NWF$("#" + ddlChildId).find("option")[1]);      
           }
          });        
   }
  }            
 });

 function delay(t) {
  return new Promise(function(resolve) {
   setTimeout(resolve, t)
  });
 }
});

0 Kudos
Reply
Workflow Hero

Re: Javascript to set value in lookup list control

Jump to solution

My current code to set a lookup value in 2.10.0.0 boils down to this:

whenNintexFormIsReady(
    TekDogUtilities.prototype.whenLookupSelectIsDisplayed(listLookupClientId, value,
        function () { TekDogUtilities.prototype.setLookupControlByLookupId(listLookupClientId, value); }
    )
);

// ...with these supporting methods. I usually place TekDogUtilities.js in Site assets and register it with SP

function whenNintexFormIsReady(ready) {
    if (typeof NWF$ !== 'undefined') {
        NWF$(document).ready(function () {
            NWF$(window).load(function () {
                ready();
            });
        });
    }
}

function TekDogUtilities() {
}

// "How to wait until an element exists?", Etienne Tonnelier, answered Apr 20 '15 at 17:06, retrieved 3/25/2017
// http://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists
TekDogUtilities.prototype.waitForElementToDisplay = function (selector, time, ready) {
    if (document.querySelector(selector) != null) {
        console.log(selector + ' is displayed');
        console.log('ready: ' + ready);
        ready();
    }
    else {
        setTimeout(function () {
            TekDogUtilities.prototype.waitForElementToDisplay(selector, time, ready);
        }, time);
    }
}

TekDogUtilities.prototype.whenLookupSelectIsDisplayed = function (listLookupClientId, lookupId, ready) {
    var selectClientId = listLookupClientId.replace('_hid', '');
    var optionSelector = "#" + selectClientId + " option[value='" + lookupId + "']";
    TekDogUtilities.prototype.waitForElementToDisplay(optionSelector, 100, ready);
}

TekDogUtilities.prototype.setLookupControlByLookupId = function (clientId, lookupId) {
    // nintex version 2.10.0.0 uses the select previous to the clientid
    var selectClientId = $("#" + clientId).prev('select').attr('id');
    var $option = $("#" + selectClientId + " option[value='" + lookupId + "']");
    var txt = document.getElementById(selectClientId);
    if (typeof lookupId !== 'undefined' && txt != null) {
        txt.value = lookupId;
        $option.attr("selected", "selected");
        NWF$('#' + clientId).val(lookupId);
    }
    return lookupId;
}

TekDogUtilities.prototype.setLookupControlByText = function (clientId, text) {
    // nintex version 2.10.0.0 uses the select previous to the clientid
    var selectClientId = $("#" + clientId).prev('select').attr('id');
    var lookupId = null;
    var $option = $("#" + selectClientId + " option[title='" + text + "']");
    lookupId = $option.val();
    var txt = document.getElementById(selectClientId);
    if (typeof lookupId !== 'undefined' && txt != null) {
        txt.value = lookupId;
        $option.attr("selected", "selected");
        NWF$('#' + clientId).val(lookupId); // nintex stores bound data value in the input element
    }
    return lookupId;
}

Reply
Workflow Hero

Re: Javascript to set value in lookup list control

Jump to solution

Today I figured out a way to set a lookup dropdown list using JavaScript with only a few lines of code and working in NF 2013 2.10.0. As a base for the code below I created a form with 2 lookups to a Currency list. Goal is to set the selected dropdown value of the 2nd one with the selected value of the 1st:

// First Dropdown - has JavaScript Client ID jsCurrency

var currencyCtrl = NWF$("#" + jsCurrency);

var currencySelection = currencyCtrl.val();                                                                          // Result as lookup string, e.g.  : 1;#EUR

var selectedCurrency = NWF.RuntimeFunctions.parseLookup(currencySelection,true);    // Lookup value itself                : EUR

// Second dropdown - has JavaScript Client ID jsSecondCurrency

var secondCurrencyCtrl = NWF$("#" + jsSecondCurrency);                                                        // this returns the input element

var selectCtrl2Id = jsSecondCurrency.replace('_hid','');                                                               // determine id of select element

var selectElement = NWF$("#" + selectCtrl2Id); ;                                                                        // this returns the select element

NWF$("#" + selectCtrl2Id + " option:contains(" + selectedCurrency +")").attr("selected", true);  // set select to specific lookup value

secondCurrencyCtrl.val(currencySelection);                                                                                // also store lookup string in input element

As mentioned this works now in two different libraries. Hopefully it works for you as well as it does now for me.

Reply