cjwilson1009
Design Dabbler

Form Auto-Fill Based on Two Choice Fields

I have a Nintex Form on a list that has about 62 different options / templates...

 

The user is first directed to choose a department. Once they choose their department, the 'Template' field populates with any template associated with that specific department.... 

 

All of these 62 templates use the same exact form layout with the same fields. If the user selects "Funds Transfer" it wlil give them about 4 templates to choose from. If they then choose "JPMC" I want the other fields on the form (all of which are standard fields) to auto populate with the corresponding bank information associated with the selected department/template chosen in the first two fields.

 

Right now, I've got the department / template look up fields to work. But, when they choose the 'Template', none of the other fields populate with what they're supposed to...

 

Does this make sense to anyone, can anyone help!?!

0 Kudos
Reply
3 Replies
allan
Design Canvas Artiste

Re: Form Auto-Fill Based on Two Choice Fields

Well, I suppose your second field is some kind of cascading dropdown fields. (One list "Departments" and anothe one "Templates" with a lookup on Departments).
If you do not need to store values, you can use calculated values to display the bank information. If you want to autopopulate and save the values in your item, you need to use JS.
Reply
cjwilson1009
Design Dabbler

Re: Form Auto-Fill Based on Two Choice Fields

Do you know where I can find the JS to pull this off? I'm not too savvy in that area.
0 Kudos
Reply
allan
Design Canvas Artiste

Re: Form Auto-Fill Based on Two Choice Fields

Can be surely be optimized :

// JavaScript source code  
(function ($) {	
	//Inputs Dropdown ClientID, Textbox client ID, characters length to perform search  
	$.dropdownAutocomplete = function (dropDown1Id, textboxId, SearchTextLength, Multi) {
		NWF$("#" + textboxId).attr("placeholder", "Rechercher");
		//Declare Textbox    
		var textbox = $("#" + textboxId);
		//Declare Dropdown    
		var dropDown1 = $("#" + dropDown1Id.replace("_hid", ""));
		if (dropDown1.val() && dropDown1.val() !== "**SelectValue**") {
			textbox.val($(dropDown1).find("option:selected").text());
		} else if (!Multi){
			textbox.val("");
			//Get select object
			var objSelect = document.getElementById(dropDown1Id.replace("_hid", ""));

			var NoneId = $(dropDown1).find("option").filter(function () { return $(this).html() == ""; }).val();
			//Set selected
			$('#'+dropDown1Id).val(NoneId+";#Rechercher");
			$("#"+dropDown1Id).attr("value", NoneId+";#Rechercher");
			setSelectedValue(objSelect, "Rechercher");
			$(dropDown1).change();
		}
		var objSelect = document.getElementById(dropDown1Id.replace("_hid", ""));
		for (var i = 0; i < objSelect.length; i++) {
			if (objSelect.options[i].value == '**SelectValue**'){
				//objSelect.remove(i);
			}
		}
		//Enabling textbox with Autocomplete    
		textbox.autocomplete({
			//Source can be an Array, String or Function  
			//Here we are using function as the source type to fetch the values from the dropdown  
			source: function (request, response) {
				autocompleteVals = [];
				dropDown1 = $("#" + dropDown1Id.replace("_hid", ""));
				// Here data will be filtered based on the text coming through the re-quest  
				$(dropDown1).children().each(function () {
					if ($(this).text().toLowerCase().indexOf(request.term.toLowerCase()) >= 0) {
						autocompleteVals.push($(this).text());
					}
				});
				response(autocompleteVals);
			},
			//The minimum number of characters a user must type before a search is per-formed  
			minLength: SearchTextLength,

			//Triggered when an item is selected from the menu, now same item will be selected in the dropdown which is a connected field  
			select: function (event, ui) {
				var fieldOption = $("#" + dropDown1Id.replace("_hid", "") + " option").filter(function () {
					return $(this).html() == ui.item.value;
				});

				$("#" + dropDown1Id.replace("_hid", "") + " option").each(function () {
					$(this).attr("selected", false);
				});

				$(dropDown1Id).val($(fieldOption).val() + ";#" + $(fieldOption).text());
				$(fieldOption).attr("selected", true);
				$(dropDown1).change();
			}
		});
	}
})(NWF$);


function setSelectedValue(selectObj, valueToSet) {
	for (var i = 0; i < selectObj.options.length; i++) {
		if (selectObj.options[i].text == valueToSet) {
			selectObj.options[i].selected = true;
			return;
		}
	}
}

And use it that way :

NWF$.dropdownAutocomplete(JSVarLookup, JSVarText, 3, false);    

JSVarLookup is the name of the JS variable on the lookup.
JSVarText is the name of tje JS variable if the single line of text.
3 is the minimum number of characters before starting the auto completion.
false is because it is not a multivalue lookup.

Of course, do not use rules to hide controls but CSS with display:none.

0 Kudos
Reply