Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

Linked Drop Down - drop down menu data from OLEDB database

Avatar

Former Community Member

Hi Experts,

                  I have a requirement of linked & drop down down menus - one for Country and other for City. For example I have 2 items in drop down for country say India & China - when user selects India from the drop down then the city drop down should only have cities in India i.e. Mumbai, Delhi. Similary when I select China from country drop down menu I should only have Shanghai & Beijing as the two values in the city drop down menu & Mumbai and Delhi (both of which belongs to India) will not be shown and will be unavailable to user for selection.

Now All the data for Country and Region comes from OLEDB database. Therefore the drop down menu items doesnt need to be hardcoded in the script itself. I have used dynamic properties for drop down menus. The problem is I have all the data from the database tables for country and region but they are not filtered according to country.

I have tried with the following script but no joy yet.

I have created a hidden table having 2 columns - Country and Region - this table is populated with all the country and region data from the database and its body row is taken as BodyRow.

//find out the no of records of country and region in the table

var

records = xfa.datasets.data.Table.resolveNodes("BodyRow[*]");

var

count = records.length;

for

(var i=0; i<=count; i++) {

var curr_val = xfa.resolveNode("Table.BodyRow["+i+"]").country.rawValue;

if (i>0) {

var prev_val = xfa.resolveNode("Table.BodyRow["+(i-1)+"]").country.rawValue;

if (curr_val == prev_val) {

region_num

++;

}

else {

region_array[

++country_num] = region_num;

region_num

= 0;

}

}

}

This is actually not required

//find the largest integer in the region_array.

var

temp;

var

count_region = region_array.length;

for

(var i=0; i<=count_region; i++) {

if(region_array[i]>region_array[i+1]) {

temp

= region_array[i];

}

else {

temp

= region_array[i+1];

}

}

//Now create the secondary dimension based on temp value

// The array contains the country and the corresponding states/provinces.

Need to have a technique to create Array Object based on Number of regions for respective countries - therefore the following line is not correct.

For example if we have 10 countries and country 1 has 4 regions, country 2 has 3, country 3 has 5 regions (all the countries are having variable no of regions) then how are we going to create the 2 D array. Also the number of countries is not fixed.

var myCountries = new Array(new Array(2), new Array(country_num), new Array(temp)); // Create a two-dimensional array.

// This script object controls the interaction between the country and state/province Drop-down lists.

// For each country, add a 'new Array(number of state/province +1)'.

// Define the country and the corresponding states/provinces.

// The array syntax is arrayName[index][index].

// The first index number represents the country,

// the second index number is the actual data value.

myCountries[0][0]

= " "; // The first items in the Drop-dowm Lists should be blank.

myCountries[0][1]

= " ";

//Populating 2 D array.

for

(var ind=0,i=0, j=0; ind<count; i++) {

var curr_val = xfa.resolveNode("Table.BodyRow["+ind+"]").country.rawValue;

var prev_val = xfa.resolveNode("Table.BodyRow["+(ind+1)+"]").country.rawValue;

var region_val = xfa.resolveNode("Table.BodyRow["+ind+"]").region.rawValue;

var country_val = xfa.resolveNode("Table1.Row1["+(ind+1)+"]").region.rawValue;

if (curr_val == prev_val) {

myCountries[i][j

+1] = region_val;

}

else {

myCountries[i

+1][0] = country_val;

}

}

// This function will populate the country Drop-down List.

// This function is called from the initialize event of the country Drop-down List.

function

getCountries(dropdownField)

{

dropdownField.clearItems();

for (var i=0; i < myCountries.length; i++)

dropdownField.addItem(myCountries[i][0]);

}

// This function will populate the state/province Drop-down List for any event EXCEPT the change event.

// This function is called by the initialize event of the state/province Drop-down List.

function

getStates(countryField, dropdownField)

{

dropdownField.clearItems();

// Clear the items of the Drop-down List.

for (var i=0; i < myCountries.length; i++) // Look through all the countries until we find the one that matches the country selected.

if(myCountries[i][0] == countryField.rawValue) // Check to see if they match.

{

for (var j=1; j < myCountries[i].length; j++) // When they match, add the states/provinces to the Drop-down List.

{

dropdownField.addItem(myCountries[i][j]);

}

}

}

// This function will populate the state/province Drop-down List for the change event.

// This function is called by the change event of the country Drop-down List.

// The first parameter is simply a pointer to the xfa object model.

function

getStatesOther(myXfa, dropdownField)

{

dropdownField.clearItems();

// Clear the items of the Drop-down list.

for (var i=0; i < myCountries.length; i++) // Look through all the countries until we find the one that matches the country selected.

if(myCountries[i][0] == myXfa.event.newText) // Check to see if they match. Note: we have to use the event.newText in this case because

{

// the change hasn't been committed yet.

for (var j=1; j < myCountries[i].length; j++) // When they match, add the states/provinces to the Drop-down List.

{

dropdownField.addItem(myCountries[i][j]);

}

}

}

Please let me know how I can modify the above script for my requirement or else please suggest any easier alternative.

Thanks

Rohit

0 Replies