colorfield and datasource

Avatar

Avatar

Shaheena_Sheikh

Avatar

Shaheena_Sheikh

Shaheena_Sheikh

23-02-2021

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Anudeep_Garnepudi

MVP

Avatar

Anudeep_Garnepudi

MVP

Anudeep_Garnepudi
MVP

23-02-2021

Shaheena_Sheikh
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
Yes, it should work. You can hardcode the JSON in your JavaScript file if the JSON will be updated only by developer.
Shaheena_Sheikh

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
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
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

@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

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
Should clear options before injecting, check optionItems.clear(); is added in your script.
Shaheena_Sheikh
yes clear() is added.
Anudeep_Garnepudi
Try one thing, put a console.log in for loop and see what all options are injecting, only new or old + new
Shaheena_Sheikh
in console log the for look is showing only the new values.
Shaheena_Sheikh
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
@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.
Shaheena_Sheikh
You have been very helpful, Thanks!
Anudeep_Garnepudi
Welcome 🙂

Answers (1)

Answers (1)

Avatar

Avatar

Ankur_Khare

MVP

Avatar

Ankur_Khare

MVP

Ankur_Khare
MVP

23-02-2021

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