Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.

Dynamically populate dropdown list from user-entered values in repeatable table row

Avatar

Level 2

I am trying to take the values entered by the user in a text field in a repeatable table row (between 1 and 10 rows depending on the user's need) and dynamically populate a dropdown list that is used throughout the rest of the form.  I'm thinking I probably need code in two separate places - at the table to force a unique ID on each table row as it's created, and at the dropdown list to pull a variable number of entries into the dropdown values.  Sending the table data out to a separate data file and then calling on the outside file to populate the list would be problematic for several reasons, so I'm hoping I can force all of this on the fly within the document.  I've been unable to find a code snippet online that would work in the way I intend.

Any help would be much appreciated!

Message was edited by: cyndilynnrose

6 Replies

Avatar

Level 9

Hi,

Let's here assume that we are adding a table row dynamically, inside the table row there is a cell whose value would be added dynamically to the DropDown List.

So in the exit evet of the dropdown put the following code.

form1.page1.DropDownList1.clearItems();// It will clear the existing list

var countRow = form1.page1.Table1.Row1.instanceManager.count; // count no.of rows

for( var i = 0; i < countRow; i++) {

var currentItemVal = xfa.resolveNode("form1.page1.Table1.Row1["+i+"].Cell1").rawValue;

if(currentItemVal != null) {

  form1.page1.DropDownList1.addItem(currentItemVal);// add the item in the dropdown.

} else {

}

}

 

Thanks,

Bibhu.

Avatar

Level 2

I very much appreciate your suggestion.

I've tried this in the exit event of the dropdown, the exit event of the table row, the initialize and click events of the dropdown and am still not having any luck.

I adapted the code as follows:

form1.VARAPage1.sfC2d-U.tableH1.Row1.ddSpecies.clearItems();// It will clear the existing list

var countRow = form1.VARAPage1.sfA2-C2c.tableA3.Row1.instanceManager.count; // count no.of rows

for( var i = 0; i &lt; countRow; i++) {

var currentItemVal = xfa.resolveNode("form1.VARAPage1.sfA2-C2c.tableA3.Row1["+i+"].tfA3species").rawValue;

if(currentItemVal != null) {

  form1.VARAPage1.sfC2d-U.tableH1.Row1.ddSpecies.addItem(currentItemVal);// add the item in the dropdown.

} else {

}

}

based on this hierarchy:

dd_hierarchy.jpg

Any suggestions on where I'm going wrong with it?

Thanks!

Cyndi

Avatar

Level 9

Hi Cyndi,

I guess there is reference mistake here. The form hierarchy shows that your page name is 'sVARAPage1' not VARAPage1. If you see, the 's' is missing in the pagename that you are referencing to.

Secondly I hope the second table tableH1 in which the Dropdown is there is a static one. Is not it? Id not, you have to tweak the code bit.

Thirdly, most imporart thing you have to put the script in the exit event of the TextField whose value you are adding in to the DropDown. Here tfA3species.

Thanks,

Bibhu.

Avatar

Level 2

I had to work with this a bit, and as far as I can tell a major issue was that one of my subforms was named sfA2-T and it didn't like the dash.  There was also the issue that the < converts to the HTML coding, but it seemed to work around that problem.

So I got the text entries to populate the 1st instance of the dropdown list using this coding:

<event activity="enter" name="event__enter">

     <script contentType="application/x-javascript">

          form1.sfVARAPage1.sfA2toT.tableH1.Row1.ddSpecies.clearItems();

          // It will clear the existing list

          var countRow = form1.sfVARAPage1.sfA2toT.tableA3.Row1.instanceManager.count;

          // count no.of rows

          for( var i = 0; i &lt; countRow; i++) {

          var currentItemVal =           xfa.resolveNode("form1.sfVARAPage1.sfA2toT.tableA3.Row1["+i+"].tfA3species").rawValue;

          if(currentItemVal != null) {

          form1.sfVARAPage1.sfA2toT.tableH1.Row1.ddSpecies.addItem(currentItemVal);

          // add the item in the dropdown.

} else {

}

}

</script>

                     </event>

                     <bind match="global"/>

As you mentioned, however, this is a repeated field throughout the document, so once it's set, it can't be static. The correct choices from the dropdown are going to be different for different questions, or even different lines in the same table.  I can't even set the dropdown to be unique for each instance because they are all in tables with a variable number of rows.

Avatar

Level 10

Just a comment but you should be doing your code editing in the Script Editor. It's not a good idea to do it in the XML source.

Avatar

Level 2

I've actually gotten a little further with things, and was able to create a function, then call the function to fill the dropdown list in multiple instances:

<variables>

         <script contentType="application/x-javascript" name="popSpecies">function populateddSpecies(){

// get the numbers of rows in both tables.

var srcRow = form1.sfVARAPage1.sfA2toT.tableA3.Row1;

var srcRowCount = srcRow.instanceManager.count;

var destRow = form1.sfVARAPage1.sfA2toT.tableH1.Row1;

var destRowCount = destRow.instanceManager.count;

// cycle through the dropdown in each of the destination rows and empty their list.

for (var j=0; j &lt; destRowCount; j++) {

xfa.resolveNode("form1.sfVARAPage1.sfA2toT.tableH1.Row1[ " + j + "].ddSpecies").clearItems();

// Now fill the drop down on the current destination row with each of the values in the source row.

for (var i=0; i &lt; srcRowCount; i++) {

var fieldValue = xfa.resolveNode("form1.sfVARAPage1.sfA2toT.tableA3.Row1[" + i + "].tfA3species").rawValue;

xfa.resolveNode("form1.sfVARAPage1.sfA2toT.tableH1.Row1[ " + j + "].ddSpecies").addItem(fieldValue);

}

}

}

</script>

</variables>

I still can't set it to be a global data object without destroying the function because the script is specific to one line in one table.  I've tried creating a separate variable to feed the data into, then calling up the second variable in all of the needed tables, but haven't hit the right coding yet.  At least I feel like I'm a little closer than I was two weeks ago (though that may not be an accurate assessment).  Suggestions on where I can go from here?