Modern Forms Issues And JavaScript with Dropdown Options.

asked on October 27 • Show version history

I've found some issues with Modern Form Designer and am having difficulties getting a custom drop-down to have the correct options using the LFForms object. So I thought I'd post here to see if anyone can figure out what's going on with this...

Process exported XML file renamed to .txt so it could be posted.

Issue1

Multipage Form is setup so that Page2 is only displayed when a checkbox is checked. When the Form is opened only the default page is shown so the Previous/Next Buttons aren't there and only the Submit button is shown. Clicking the checkbox adds the Tabs and moves the Submit button to Page2, however the Previous/Next Buttons never show up on the Default Page.

Issue 2
Page 2, I'm working on a Drop-down which should be populated with labels and values from a Collection on the page. ( This is for a Form where the collection is populated from a workflow with API calls which are not available from a Data Source so I can't use Lookup Rules to populate the drop-down. )


LFForm.onFieldChange( 
  function (event) {

	updateCustomDropdown();
    
  }, {fieldId: 7});
LFForm.onFieldChange( 
  function (event) {

	updateCustomDropdown();
    
  }, {fieldId: 8});

function updateCustomDropdown()
{
   var optionLabels = LFForm.getFieldValues({fieldId: 7});
   var optionValues = LFForm.getFieldValues({fieldId: 8});
   var customDropdownValue = LFForm.getFieldValues({fieldId: 10});
   var dropdownOptions = LFForm.findFieldsByFieldId(10)[0].options; 
   var index = 0; 
    
   console.log("Clearing Options  - dropdown value = "+customDropdownValue+".");

	dropdownOptions.forEach(function (existingOption) {

      console.log("Removing Option "+existingOption.label+".");
   	  LFForm.changeFieldOptions({fieldId: 10}, [{label: existingOption.label}], "remove" );
    });
  
   console.log("Populating Options.");

   while( index < optionLabels.length ) 
   {
     	var selected = customDropdownValue == optionValues[index];
     
        console.log(" Add - Option - {selected: "+selected+", label: '"+optionLabels[index]+"', value: '"+optionValues[index]+"'}");
     
        LFForm.changeFieldOptions({fieldId: 10}, [{label: optionLabels[index], value: optionValues[index]}], "add" );
                         
  		index++;
	}
  
   console.log("Finished Populating Options.");
}

updateCustomDropdown();

Function updateCustomDropdown should grab the current options in the CustomDropdown (fieldId: 10) and remove each of them before grabbing the labels and values from the collection and adding them to the drop-down leaving the current value selected... however the JavaScript seems to be doing what it's supposed to be doing as the Choice2 and Choice3 default options keep remaining despite the console log telling me everything I expect to see....

Anyone have any thoughts as to why the LFForms calls don't seem to be working?

On Prim; Laserfiche Forms Professional Version 12.0.2607.40137

Business Process Laserfiche Demo - Custom Drop-down Options.txt (112.22 KB)

| Download

0 0

SELECTED ANSWER

replied on October 28 • Show version history

I'm not sure on Issue 1, I've never tested that.

But on Issue 2, you can probably simplify your JavaScript. Instead of trying to remove the existing values, and then loop through each new value to add it, you should be able to just replace all of the values at once.

LFForm.changeFieldOptions({fieldId: 10}, [{label: optionLabels, value: optionValues}], "replace" );

**EDIT TO ADD**

On Issue 1, make sure you haven't accidentally disabled the previous/next buttons.

0 0

replied two days ago

Issue 1,
Weird but yeah, somehow that Include Previous/Next Buttons got unchecked.

Issue 2

Since I'm looping through an array and don't know for certain how many options exist, I can't "replace" unless... I could create a replacement array and push each item into it and do a single replace after the loop... Let me try that...

And that works... It doesn't answer the question of why the individual "Remove" and "Add" Statements didn't work, but using a single "Replace" statement works.

function updateCustomDropdown()
{
   var optionLabels = LFForm.getFieldValues({fieldId: 7});
   var optionValues = LFForm.getFieldValues({fieldId: 8});
   var customDropdownValue = LFForm.getFieldValues({fieldId: 10});
   var dropdownOptions = LFForm.findFieldsByFieldId(10)[0].options; 
   var index = 0; 
  
   console.log("Populating Options.");

   var replaceArray = [];
  
   while( index < optionLabels.length ) 
   {
     	var selected = customDropdownValue == optionValues[index];
     
        console.log(" Add - Option - {selected: "+selected+", label: '"+optionLabels[index]+"', value: '"+optionValues[index]+"'}");
                         
     	var arrayItem = {selected: selected, label: optionLabels[index], value: optionValues[index]};
     	replaceArray.push(arrayItem);
     
  		index++;
	}
  
   console.log("Finished Populating Options.");
  
   console.log("Replace Array length = "+replaceArray.length+".");
   LFForm.changeFieldOptions({fieldId: 10},replaceArray, "replace" );
  
  
}

2 0

Question

Question

Modern Forms Issues And JavaScript with Dropdown Options.

Answer

Replies

Sign in to reply to this post.