Populate dropdown field using java script

[vkeerthy]

I have an address field in AEM forms which is positioned in a panel as attached in the screenshot Field inside panel.png

I can add 3 address instances to the form.

My use case is to display the captured address (3) in a dropdown list in subsequent screen. For this I have a JS method which is being called in calculate expression for the dropdownlist filed (as per Dropdownlist configuration.png).

The code is as below. But for some reason, this method return object is not recognised as array Object. Can some shed light on this. Please see the attached output of the form (Form-output.png)

function addressSetter() { console.log("Logger from JS file"); var address1 = window.guideBridge.resolveNode("guide[0].guide1[0].guideRootPanel[0].panel14440455204641444045520610[0].addressCollections[0].panel1[0].address[0]"); var address2 = window.guideBridge.resolveNode("guide[0].guide1[0].guideRootPanel[0].panel14440455204641444045520610[0].addressCollections[0].panel1[1].address[0]"); var address3 = window.guideBridge.resolveNode("guide[0].guide1[0].guideRootPanel[0].panel14440455204641444045520610[0].addressCollections[0].panel1[2].address[0]"); /*items = [];*/ var items = []; if (address1.value){ console.log("The value for address 1 is ::"+address1.value); items.push("1="+address1.value); }   if (address2.value){ console.log("The value for address 2 is ::"+address2.value); items.push("2="+address2.value); } if (address3.value){ console.log("The value for address 2 is ::"+address3.value); items.push("3="+address3.value); } return items; }

[vkeerthy]

For some reason attachements are missing

[vkeerthy]

For some reason attachements are missing

[vkeerthy]

For some reason attachements are missing

[rishim22446870]

Hi, You should have used options expression [1] instead of calculate expression to dynamically populate drop down list. Calculate Expression is to calculate the value of drop down list and not the options.

[EDIT] Few more things,

GuideBridge acts as a "bridge" for external application to communicate to "adaptive form", In your case, the recommended approach is to pass a reference of the address panel to the address setter API, something like 

var addressSetter = function(addressPanel){ // use the instances property of instanceManager to get hold of instances, like addressPanel.instanceManager.instances as mentioned in [2] // Additionally you can make use of utility API under af namespace to walk through the instances list as mentioned in [3] }

Hope this helps.

[1] https://helpx.adobe.com/aem-forms/6/adaptive-form-expressions.html#main-pars_header_7

[2] https://helpx.adobe.com/aem-forms/6/javascript-api/InstanceManager.html

[3] https://helpx.adobe.com/aem-forms/6/javascript-api/af.html

[vkeerthy]

Thanks Rishi, could you please advise how to set the values back to dropdown list on this method. For some reason, I am unable to pass the retrieved value back to options expression. I tried using an array as per the code to push the values, but that doesn't reflect.

An example would help my situation here. Thanks!

[varundua]

Hi vkeerthy,

You can use the instances property of a Panel's InstanceManager to get hold of all the instances of your address panels, create an array of values and return that in the optionsExpression. So in your case the code would be something like

var myPanel = addressCollections.panel1, values = []; for (var i = 0; i < myPanel.instanceManager.instanceCount; i++) { var panelInstance = myPanel.instanceManager.instances[i]; values.push(panelInstance.address.value); } // this is important since we want to return the array. last statment of a // script/expression becomes the returned value values;

Also we have an API af.reduce that does the same thing with less code

af.reduce(addressCollections.panel1.instanceManager.instances, "address", function (returnValue, panelInstance, address) { returnValue.push(address.value); return returnValue; }, []);

[1] Instance Manager API : https://helpx.adobe.com/aem-forms/6/javascript-api/InstanceManager.html
[2] Panel API : https://helpx.adobe.com/aem-forms/6/javascript-api/Panel.html#instanceManager
[3] af.reduce API : https://helpx.adobe.com/aem-forms/6/javascript-api/af.html#reduce

[vkeerthy]

Thanks Rishi for the reply and sorry for not being precise on my questions.

I am able to construct the array and it is able to hold the values. However my struggle is how to invoke this method from options expression. The document [1] is talking about individual values though. When I try to call a method (which has values as return) inside in options expression field, it simply doesn't populate. 

In my options expression, I tried below and it didn't work

optionsPainter (The method that returns values)

Kindly advise on where I am making mistake.

[1] https://helpx.adobe.com/aem-forms/6/adaptive-form-expressions.html#main-pars_header_7