colorfield and datasource

[#1]

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

[Shaheena_Sheikh · Accepted solution]

@Shaheena_Sheikh 

Check my post, might help.

https://adapttoaem.blogspot.com/2021/02/setting-dynamic-dropdownselect-value-in.html

[Shaheena_Sheikh · Accepted solution]

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 · Accepted solution]

Yes, it should work. You can hardcode the JSON in your JavaScript file if the JSON will be updated only by developer.

[Shaheena_Sheikh · Accepted solution]

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 · Accepted solution]

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 · Accepted solution]

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 · Accepted solution]

@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 · Accepted solution]

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 · Accepted solution]

Should clear options before injecting, check optionItems.clear(); is added in your script.

[Shaheena_Sheikh · Accepted solution]

yes clear() is added.

[Anudeep_Garnepudi · Accepted solution]

Try one thing, put a console.log in for loop and see what all options are injecting, only new or old + new

[Shaheena_Sheikh · Accepted solution]

in console log the for look is showing only the new values.

[Shaheena_Sheikh · Accepted solution]

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 · Accepted solution]

@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 · Accepted solution]

You have been very helpful, Thanks!

[Anudeep_Garnepudi · Accepted solution]

Welcome 🙂