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

Question

Question

How to create a dynamic list without API or DB lookup

Forms Version 11
Updated January 15
asked on January 10

Hi everyone,

I'm coding with the modem for for the first time. The customer has a basic forms license and would like to have a tiered drop-down ie: Drop-down A shows a list of categories, and drop-down B shows al list of items for the selected category. My plan was to hard-code the list and adapt this code but I need some help. 

I found a sample solution on this page but am unable to adapt it. https://stackoverflow.com/questions/71217155/populating-drop-down-list-from-selection-to-label-value

 

Basically...

1. populate a an array (this sample is for three-levels but I only need two):

let data = [{"id":1,"name":"Infimos","parentid":0, "urgency": "low"},
{"id":2,"name":"Computer servicing","parentid":0, "urgency": "medium"},
{"id":3,"name":"Software installation","parentid":0, "urgency": "urgent"},
{"id":4,"name":"Fix errors","parentid":1, "urgency": "low"},
{"id":5,"name":"New feature","parentid":1, "urgency": "medium"}]

2. Then append the values to a drop down and using an onchange trigger, populate the second level as required.

 

Can this complexity even be achieved in the modern designer, or is classic required?

0 0

Answer

SELECTED ANSWER
replied on January 10 • Show version history

I have this code working on Modern Designer Version 11.0.2311.50556.

//Create data map for field options.
let data = [
  {value:"HR",label:"Human Resources",parent:""},
  {value:"Purchasing",label:"Purchasing",parent:""},
  {value:"Sales",label:"Sales",parent:""},
  {value:"Admin",label:"Administration",parent:"HR"},
  {value:"Admin",label:"Administration",parent:"Purchasing"},
  {value:"Admin",label:"Administration",parent:"Sales"},
  {value:"East",label:"East Office",parent:"Purchasing"},
  {value:"North",label:"North Office",parent:"Sales"},
  {value:"East",label:"East Office",parent:"Sales"},
  {value:"South",label:"South Office",parent:"Sales"},
  {value:"West",label:"West Office",parent:"Sales"}
];

//When the form is loaded, and when either Field1 or Field2 
//changes - call the function to update their values.
UpdateDropdowns();
LFForm.onFieldChange( function() { UpdateDropdowns(); }, {fieldId: 1});
LFForm.onFieldChange( function() { UpdateDropdowns(); }, {fieldId: 2});
function UpdateDropdowns() {
  let field1Choice = LFForm.getFieldValues({fieldId: 1});
  let field2Choice = LFForm.getFieldValues({fieldId: 2});
  const filterField1 = data.filter((value) => value.parent == "");
  const filterField2 = data.filter((value) => value.parent == field1Choice && value.parent != "");
  LFForm.changeFieldOptions( {fieldId: 1}, filterField1, "replace");
  LFForm.changeFieldOptions( {fieldId: 2}, filterField2, "replace");
}

 

The options in the first field are only the three that have a blank parent value:

 

The options in the second field are dependant upon what is selected for the first field:

 

7 0
replied on January 15

Thanks that works perfectly in my test kit. The customer has an older version of 11.

1 0
replied on January 15

Yeah, I beleive the changeFieldOptions functionality wasn't added until Forms 11 Update 5 (version 11.0.2311) so anything prior to that would not work.

3 0

Replies

replied on January 10

Pretty sure this is now possible with modern forms designer and the LFFORM object (at least in Self-Hosted Forms Version 11 Update 5). 

I would take a look at the documentation on changeFieldOptions and see if that helps.  Note: I don't believe Cloud has the changeFieldOption at this time. 

Here are a couple [1, 2] of answers posts that appear to have similar requests to yours with some viable solutions.

0 0
replied on January 10

I tried using 

  • LFForm.changeFieldOptions( { fieldId: 10 }, ["Choice 4", "Choice 4", "Choice 4"], "add" );

on a drop-down but it didn't work. SO I guess there must be another way. I'd lkove some actuial code if you have any.

 

0 0
replied on January 10 • Show version history

Unfortunately I don't have any tested working code to provide other than what would mirror the code in the links previously provided.  I would double check what version of Forms you are running since I think this was only added recently in Forms 11 Update 5, prior versions may not support the changeFieldOptions verbage

0 0
replied on January 10
0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...