How can I delete stored information when my user selects another option in a dropdown of the authoring dialog of a component?

[Aaron_Dempwolff]

Hello, what happens is that I have a custom component that is a slider, this component has a dropdown in the part of the component configuration in authoring (cq:dialog) that allows the user to select 1 of the 3 variations of the slider.

But what happens is that if the user selects for example the variation 2, add the configuration (image, text, etc) and saves it the component show the configuration that the user add, but if the user returns to the authoring mode of the component and selects the variation 1 can enter the information again but the information of the variation 2 remains saved in the cq:dialog although it's not used.

Is there any way that when my user selects another dropdown option the settings of the other variations are removed?

[ManviSharma · Accepted solution]

Hi,

In the dialog of your component, you can use JavaScript to clear settings when the user changes the variation. Attach a listener to the variation dropdown field and clear the settings of the previously selected variation whenever the value changes. Here's an example using jQuery:

$(document).ready(function() {
// Assuming 'variationDropdown' is the ID of your variation dropdown field
$('#variationDropdown').change(function() {
clearPreviousSettings();
});
});

function clearPreviousSettings() {
// Logic to clear the settings of the previous variation goes here
// You can reset the values of the fields or remove the values from the DOM
}