Set default value to lookup field stopped working after Nintex Forms 2013 latest update

  • 28 November 2015
  • 21 replies
  • 166 views

Badge +2

I have set lookup default field value(from query string parameter) in my nintex forms as below and it was working fine.

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

    // here I was setting value "1" which is comes from query string

    // It was working fine before update

    NWF$("#" + ctrlID_ParentRequestDDL).val("1");

});

Now In my SP server I have installed latest Nintex Forms 2013 update i.e. 2.8.1.0, suddenly it's stopped working.

I have tried to find reason and I found that now in latest update, Nintex Forms uses Knockout JS to bind lookup field dropdown values e.g.,

<select title="" class="nf-lookup nf-ignore-getvalue nf-associated-control" id="ctl00_ctl39_g_c7140103_9f24_45a2_bf80_27a46acbea34_ctl00_ListForm2_formFiller_FormView_ctl118_lookupfa176a38_9bc4_4605_a0bc_2b9f7308ff55_Lookup" style="width: 100%;" formcontrolid="366ae762-ebb7-4480-baba-de982e7e361f" data-use-attribute-as-value="data-nfChoiceValue" data-bind="css: cssClass, options: lookupItems, optionsValue: 'id', optionsText: 'title', attr:{ title: helpText, id: id, disabled: !enabled(), formcontrolid: formcontrolid }, optionsAfterRender: setOptionTitle, value: selectedItem, event: { change: dropdownlistChanged }"><option title="Please select a value..." value="" data-nfChoiceValue="">Please select a value...</option><option title="1 - 1" value="1" data-nfChoiceValue="1;#1 - 1">1 - 1</option></select>

After update, it is loading dropdown value(by querying into lookup list) after document.ready function and till that time It is adding only one option into drop down i.e. "Loading..."

Currently in document ready function, I am only getting only one option that is "Loading...". and I have tried "NWF.FormFiller.Events.RegisterAfterReady" event but in that event also I am getting only one option i.e. "Loading".

So Now How can I achieve this functionality?

Any help is really appreciated.


21 replies

Badge +2

I found solution for it. Using following way you can set default value in lookup field dropdown in page load:

NWF.FormFiller.Events.RegisterAfterReady(function () {

setLookupFields();

});

function setLookupFields() {

         // Getting view model of my lookup field dropdown control

   vmForApplication = ko.dataFor(NWF$("#" + ctrlID_ApplicationID)[0]);

   // Setting value to drop down

      vmForApplication.initialValue  = "some value";

}

Hope it will help someone.

Badge +2

Hi Kapesh vaghela,

The above drop down default value loading is working for me. Thanks for that post and help.

Badge +8

Kalpesh Vaghela​ I'm seeing the same issue, but in my case I'm needing to update the default value for a number of lookup fields and was hoping to do so via a class instead of an ID.

Any idea why your previous logic is no longer working? I was hoping to find the logic to "wait until all form controls have loaded" but am not seeing a means of doing that currently.

Badge +2

Patrick Abel That means you will give different class to each lookup fields instead of control ID and you want to find lookup field control using class instead of  control id? if Yes then is there any specific need of it as you can also get control ID in javascript variable instead of class?

Badge +3

I can get the same ko.dataFor object returned on a Lookup Control when I use a class by doing the following;

vmForCity = ko.dataFor(NWF$('.city select')[0]);

Issue for me is, the code provided doesn't seem to actually set the value for the field or make it appear to be selected either. When I save the form and reload it, it is still not set.

Badge +2

I use below JS to set the select default option and the value can be saved succesfully.

NWF$(document).on('change', '#' + yourcontrolid, function () {

  var yourcontrolidLen = NWF$("#" + yourcontrolid).find("option").length;

  if (yourcontrolidLen === 2) {

   NWF$("#" + yourcontrolid).val(NWF$("#" + yourcontrolid).find("option")[1].value);

  NWF$("input#" + yourcontrolid).val(NWF$("#" + yourcontrolid).find("option")[1].value);

  }

});

Badge +3

Thanks Wayne!

Your code snippet worked for me. The one marked as answered didn't. I'm using Nintex Forms 2013 2.9.0.0. Nintex Support says the lookup control changed with 2.5.0.0 and up.

Badge +8

Steven/Wayne,

I've had success as well setting the default value of a lookup field on a "change" event but where I have struggled is setting that default on initial load of the form. You'll notice that when the form-filler, scripts, and DOM have all loaded, these lookup controls are still "loading..."

I was looking for what Nintex event I could wait for in order to set the default value once the controls have loaded on the page without having to use a timer or a button to trigger the event.

Badge +3

Wayne's code works for me in the following use case:

1) Add the code to the Form Settings > Custom JavaScript field

2) Customize the code to reference the Client ID JavaScript variable name of my control

3) Create a Single Line text box and set the default value to a query string parameter I'm passing in the URL

4) Filter the lookup list control using the value of the single text box (this allows for blank URL parameters if users go directly to the new form instead of using a custom link with parameters from another form).

5) Save the Nintex form.

6) When a new list item form is opened, the control filters down to the single option I've passed in the URL parameter and then the JavaScript selects that single option as the default instead of just showing "Please select a value...".

In all of our testing, the lookup list loads and populates with the single option as default. But make sure you're using Forms 2.5.0.0 or higher or the code may not work.

Badge +6

Hey Patrick,

Were you able to modify the Lookup control's value via jQuery after the form was loaded?

I tried setting both the value and the initialValue of ko.dataFor(NWF$("#" + ctrlID_ApplicationID)[0]) from within an ajax success() method but neither worked, i even tried calling NWF.FormFiller.Functions.ProcessOnChange on the control but still nothing...

Userlevel 6
Badge +15

Thank you for this - this worked beautifully for me.

Badge +1

Dear Steven,

Would you mind explaining steps 2 and especially 4 a bit deeper? I'm quite a newbie at javascript happy.png
I can't seems to get it to work... all I get is "Loading..." text hanging beneath/over Lookup field's default "Please select a value..."
Lookup field w "Loading..." & "Please select a value..." one over another

I am passing an URL value to a Textbox field, which I'm using as a variable in the script (instead "option" parameter).
Don't know where I'm missing the point...
My code:
NWF$(document).on('change', '#' + userID, function () {
  var userIDLen = NWF$("#" + userID).find(ID-osebna_stevilka).length;
  if (userIDLen === 2) {
   NWF$("#" + userID).val(NWF$("#" + userID).find(ID-osebna_stevilka)[1].value);
  NWF$("input#" + userID).val(NWF$("#" + userID).find(ID-osebna_stevilka)[1].value);
  }
});

Thanks in advance!

Badge +2

Hello ,

Instead of using "ID-osebna_stevilka",  you need to use "option".

Lookup filed markup is look like,

<select>

<option></option>

<option></option>

<option></option>

...

</select>

I modified your code as following:

NWF$(document).on('change', '#' + userID, function () {
  var userIDLen = NWF$("#" + userID).find('option').length;
  if (userIDLen === 2) {
   NWF$("#" + userID).val(NWF$("#" + userID).find('option')[1].value);
  NWF$("input#" + userID).val(NWF$("#" + userID).find('option')[1].value);
  }
});

This code will set the default value only if this lookup only have one value.

In your case it will not work, since you have lots of choices.

For any questions, you can directly contact me via Skype (we are in the same company).

Best Regards,

Shen, Wei

Userlevel 2
Badge +11

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.

Badge +3

We had a workaround in production until we recently updated to 2.10.1.0. The list lookup control started showing Loading again and you couldn't select a value. Our previous workaround involved adding a text box that held the value used to filter the lookup control. So two things appear to have been affected:

1) Whereas we could set those text boxes' appearance to be hidden in the past, we can no longer do that and have the lookup list controls filter correctly. If we toggle the text boxes to visible, the lookups start filtering correctly. 

2) Even when the list lookup controls are filtered correctly, our previous JavaScript to select the value after filter wasn't working. So the user still had to manually select the single, filtered option from the list lookup.

With the help of an office mate who dug into the Nintex documentation a bit, we found a solution that works with Nintex Forms 2.10.1.0.

Enable the legacy list lookup control:


1. On the Central Administration home page, click Nintex Forms Management.
2. On the Nintex Forms Management page, click Manage Form Controls.
3. Under the Form Control Types table, in the Import text box, enter the following text:
Nintex.Forms.SharePoint.FormControls.SharePointLookupFormControlV1, Nintex.Forms.SharePoint, Version=1.0.0.0, Culture=neutral, PublicKeyToken=c52d764dcf7ec883
4. Click Import.

Configure the list lookup control:

1. Filtering

      Filter available selections: By a specified value

      Where filed: ID

      Filtered by value: fn-GetQueryString(customID)

      Action when no filter applied: Show all values

2. Advanced

      Client ID JavaScript variable name: UniqueVariableName

Add custom JavaScript to form so filtered value is selected and saved:

1. Settings > Custom JavaScript

2. Customize the following JavaScript for your form

/* Sets value for list lookup*/
NWF.FormFiller.Events.RegisterAfterReady(
   function updateList() {
      /*use client ID JavaScript variable name specified in the
      list lookup control in place of UniqueVariableName below*/
      var myVariable = NWF$("#" + UniqueVariableName).closest("div").find("select.nf-client-control");
      if (myVariable) {
         if (myVariable.length > 0) {
            myVariable = myVariable[0];
         }
         var myVariable2 = NWF$(myVariable).find("option")[1].value;
         NWF$(myVariable).val(myVariable2);
         /*this ensures the hidden field associated with the list lookup is populated before save*/
         NWF$(myVariable).trigger("change");
         }
      }
);
Userlevel 2
Badge +11

In stead of looking for the <select> using its (calculated) ID (with _hid) a better alternative would be to use a more generic snippet:

var selectElement = NWF$("#" + jsSecondCurrency).parent().find('select');

Badge +2

Hi 

Wayne's script worked for me .Is there anyway I can remove the 'Please select ' altogether from the dropdown .I want only one value in the dropdown and not even a space (for please select)in the dropdown.

Appreciate any help here

Thanks

Badge +6

Hello Ta all,

Great topic... I have been looking for something like this, I have used the code to set a default value to my lookup field, this last coding works for my solution, however the behavior is weird. sometimes set the value automatically, sometimes the value is not set up, this is weird I dont know if this is sounds familiar to you ? Mi Nintex version is  2.10.0.0

211004_pastedImage_1.png

211007_pastedImage_3.png

Thanks in advance

Walfred

Badge +9

How can i set value of of multiple list lookup controls filtered with a single line text field to a single line of text field? All the lookups values are coming from one list. I am using different views on the lookup list. I am using panels to hide list lookup controls that are not filtered. Only some list lookup controls sets connected ids while others don’t.

Badge +6

Assuming having a querystring parameter location and a client-ID-Variable LocationField.

Here is complete code which works for me. 

NWF.FormFiller.Events.RegisterAfterReady(function () {
    assignLocation();
});

function assignLocation() {
   var loc = getParams("location");
   var lIndex = -1;
 
   if(loc != null) {
	    NWF$("#" + LocationField).parent().find("OPTION").each(function () {  
			if(NWF$(this).html() == loc) {
				lIndex = NWF$(this).val();	
				NWF$(this).attr("selected", true); 
				return false;
			}
	   });
	}
}

function getParams(key) {
	var result = null, tmp = [];
	var items = location.search.substr(1).split("&");
 
	for (var index = 0; index < items.length; index++) {
	  tmp = items[index].split("=");
	  if (tmp[0] === key) result = decodeURIComponent(tmp[1]);
	}
 
	return result;
}

Hope that helps others. I was struggeling around more than two hours.

Badge +6

call NWF$(this).change(); right after

NWF$(this).attr("selected", true);

Otherwise you get an error message regarding a required field when saving the form.

Reply