You are viewing limited content. For full access, please sign in.

Question

Question

Need LFForm Javascript to populate a dropdown based on values from 2 fields

asked two days ago

I have a form in the Classic Designer that uses Javascript to populate a dropdown with a number of credits for the student to select from.  The values in the dropdown are based on 2 hidden text fields called MIN_UNITS and MAX_UNITS (which are filled via a lookup).

The Classic Javascript:

const minUnits = parseInt($('.min-units input').val());
const maxUnits = parseInt($('.max-units input').val());
const startUnits = parseInt($('.start-units input').val());
    
newCourseUnits.empty();
for (let x = minUnits; x <= maxUnits; x++) {
    console.log('Value: ' + x);
    newCourseUnits.append($('<option></option>').val(x).html(x))
}

The hidden fields:

The dropdown looks like this:

I'm trying to replicate this functionality in the New Designer using LFForm, but I'm not having any luck.

My LFForm code is (Field 423 is MIN_UNITS and 422 is MAX_UNITS):
* "choice " is just in there for testing - I've tried removing it and just displaying x for the label and get a blank entry

for (let x = LFForm.getFieldValues({fieldId: 423}); x <= LFForm.getFieldValues({fieldId: 422}); x++) {
	LFForm.changeFieldOptions({fieldId: 438}, [{label: "Choice " + x}], "add")
}

I've also tried using variable assignments:

var minUnits = LFForm.getFieldValues({fieldId: 423});
var maxUnits = LFForm.getFieldValues({fieldId: 422});

for (let x = minUnits; x <= maxUnits; x++) {
	LFForm.changeFieldOptions({fieldId: 438}, [{label: "Choice " + x}], "add")
}

But I only get one option with "Choice ":

Any assistance would be greatly appreciated.

0 0

Answer

SELECTED ANSWER
replied two days ago Show version history

If fields 422 and 423 are populated by lookup, then I'm guessing your code is running before the lookups are complete.

I just tested this code on Version 11.0.2311.50556 and it worked for me (note that I believe the LFForm.changeFieldOptions functionality was introduced in that version, so it won't work in a lower version).

//Trigger the PopulateDropdowns function when the form loads
//or either of the trigger fields are updated.
PopulateDropdowns();
LFForm.onFieldChange(PopulateDropdowns, {fieldId: 423});
LFForm.onFieldChange(PopulateDropdowns, {fieldId: 422});

//Function that populates the drop down values based on a 
//range of values from two other fields.
function PopulateDropdowns() {
  let minUnits = parseInt(LFForm.getFieldValues({fieldId: 423}));
  let maxUnits = parseInt(LFForm.getFieldValues({fieldId: 422}));
  let newValues = [];
  for (let x = minUnits; x <= maxUnits; x++) {
    newValues.push({label: "Choice " + x});
  }
  LFForm.changeFieldOptions({fieldId: 438}, newValues, "replace");
}

 

I've wrapped everything in a single function, so it's easy to call three different ways (when the form loads, and whenever one of the two fields are changed).

I added parseInt functions to ensure that it properly handles the values from the lookups as integer values - just in case.

I moved the LFForm.changeFieldOptions out of the loop and did it as a replace instead of an add.  This is so that it can be run multiple times and always replace the full list instead of assuming we are starting with an empty list and only adding the select values (see above where there are multiple options to call the function).  This is facilitated by creating an array of values and then adding the array into the drop-down instead of doing one-off adds.  This also helps to ensure your list of values is in an expected order, since we're only doing one addition of the list instead of making a bunch of asynchronous calls adding items one at a time.

1 0
replied one day ago

Thanks Matt, worked like a charm!  It also works when the student changes the course dropdown and repopulates the hidden Unit fields since each has different min/max units and they might have ranges from 1-8 or 3-5 or whatever.

Appreciate your wizardry!

1 0
replied one day ago

Fantastic!

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.