Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

colorfield and datasource

Shaheena_Sheikh
Level 4
Level 4

I have a component whose dialog has 2 colorfield in it. These colorfield are showing the color options from a ACS generic list using datasource node.

I want to modify this with:

when I select a color in the first colorfield, I want to show some colors in the swatch of the 2nd colorfield based on the selection of the 1st one.

Example:

1st pink--2nd black, white, yellow etc

1st green--2nd red, blue, teal etc

1 Accepted Solution
Anudeep_Garnepudi
Correct answer by
Community Advisor
Community Advisor
19 Replies
Ankur_Khare
Community Advisor
Community Advisor

You need to call a servlet on selection of 1st dialog field and get the response from servlet to poulate list in second field-

 

https://aem4beginner.blogspot.com/call-any-servlet-in-touchui-dialog-aem

 

 

Shaheena_Sheikh
Level 4
Level 4
I thought of this, but my only concern is, wont the servlet call make the actions taken in a dialog slow?
Ankur_Khare
Community Advisor
Community Advisor
No it wont, rest i don't see any other option as far as i know.
Anudeep_Garnepudi
Correct answer by
Community Advisor
Community Advisor
Shaheena_Sheikh
Level 4
Level 4
I like this approach, I am trying to implement it in my colorfield. My first colorfield is using datasource from generic list while for the second one i will use your appraoch using json. That should work right?
Anudeep_Garnepudi
Community Advisor
Community Advisor
Yes, it should work. You can hardcode the JSON in your JavaScript file if the JSON will be updated only by developer.
Shaheena_Sheikh
Level 4
Level 4

let citiesField = $(".cq-dialog").find("#cities")[0]; In this line of your code, what is cq-dialog and cities? are these the properties "name" whose value we provide as ./valueHere?

Anudeep_Garnepudi
Community Advisor
Community Advisor
Hi @Shaheena_Sheikh, cities is id of the field (add granite:id property to your dropdown) and .cq-dialog is dialog selector which is common for all components dialogs which will come from dialog.jsp
Shaheena_Sheikh
Level 4
Level 4
I followed the complete solution but I am facinf a problem with the secod colorfield. Once I have selected a value in the first field, I am able to see the allowed values in the second field. But after i select a value in the second field and save the dialog box and then reopen it again, i am not able to see the options to my second field anymore. Though i am able to see the value i selected for the second field. The second field option is able to persist the data and also showing the selected data in the swatch, but all the other options are gone. What am i missing?
Anudeep_Garnepudi
Community Advisor
Community Advisor

@Shaheena_SheikhAre you calling that change function in dialog load as well?

$(".cq-dialog").find("#country").on("change", setCitiesOptions); // Onchane Event
setCitiesOptions(); // Call the set options function on dialog load 

If now calling setOptions function onload, try calling it. 

Shaheena_Sheikh
Level 4
Level 4

It may be cache issue, it started working now. There's another issue, if i select one country in first field, then check the second field, it shows the correct options. Then again if select another option in the country, then the new cities option show up along with previous cities option. Rather than showing only new options, its appending old + new options. Now If i dont select anything in the second option and just save the dialog then reopen the dialog. This time if i check the second field again, i will only the new option, old ones will be gone. How can i make sure that everytime i make a change to the country the new option show up in the city instead of showing old +new option?

Anudeep_Garnepudi
Community Advisor
Community Advisor
Should clear options before injecting, check optionItems.clear(); is added in your script.
Anudeep_Garnepudi
Community Advisor
Community Advisor
Try one thing, put a console.log in for loop and see what all options are injecting, only new or old + new
Shaheena_Sheikh
Level 4
Level 4
Can you please explain the part how on adding objects to optionItems, those items are getting added in the node level in AEM. I mean code from JS is directly going to AEM node how? I dont see you pushing it anywhere in the node path
Anudeep_Garnepudi
Community Advisor
Community Advisor
@Shaheena_Sheikh It is not like we are creating option nodes from Javascript. AEM will read the dialog nodes and will generate HTML markup from backend and also Javascript APIs provided to generate it from the frontend. You just need a parent node that should be coming from backend, we can inject options from frontend.