Need to show and hide a field description based on the drop-down selection

[samsundar23]

I'm using AEM 6.5 and I want to show the field description only for "no-image" drop-down value.

I want to hide the field description for rest of all drop-down selection.

Kindly let me know an option to do this activity (i.e., show and hide the field description based on drop-down selection.).

Thanks

SHYAMSUNDAR TK

[Anudeep_Garnepudi · Accepted solution]

@samsundar23 

Use below dialog listener code snippet.

jQuery(document).on("dialog-ready", function() {
    $("[name='./banner-style']").on("change", function (e) { 
        if (e.target.selectedItem.value === "no-image") {
            $(e.target).closest(".coral-Form-fieldwrapper").find("coral-icon").show();
            $(e.target).closest(".coral-Form-fieldwrapper").find("coral-tooltip").show();
        } else {
            $(e.target).closest(".coral-Form-fieldwrapper").find("coral-icon").hide();
            $(e.target).closest(".coral-Form-fieldwrapper").find("coral-tooltip").hide();
        }
    });
});

[samsundar23]

Thanks a lot @Anudeep_Garnepudi !

Your recommendation worked wonders for me.

[samsundar23]

Hi @Anudeep_Garnepudi ,

I'm using the below clientlib script which hiding the field description from third tab (which is wrong).

I need to show/hide field description based on the drop-down selection which should be applicable only that particular tab.

Can you help me with the correct modification in the below code.

(function(document, $, ns) {
"use strict";
$(document).on("dialog-closed", function() {
window.location.reload();
});

// below method will be triggered during dialog load
$(document).on("dialog-loaded", function (event) {
$(".cq-dialog-dropdown-showhide").each(function () {
Coral.commons.ready($(this), function (element) {
var product = element.val();
if (product === "no-image") {
$(".coral-Form-fieldwrapper").find("coral-icon").show();
$(".coral-Form-fieldwrapper").find("coral-tooltip").show();
} else {
$(".coral-Form-fieldwrapper").find("coral-icon").hide();
$(".coral-Form-fieldwrapper").find("coral-tooltip").hide();
}
});
});

});

$(document).on("dialog-ready", function() {
$("[name='./variation']").on("change", function (e) {
var product = e.target.selectedItem.value;
if (e.target.selectedItem.value === "no-image") {
$(e.target).closest(".coral-Form-fieldwrapper").find("coral-icon").show();
$(e.target).closest(".coral-Form-fieldwrapper").find("coral-tooltip").show();
} else {
$(e.target).closest(".coral-Form-fieldwrapper").find("coral-icon").hide();
$(e.target).closest(".coral-Form-fieldwrapper").find("coral-tooltip").hide();
}
});
});
})(document,Granite.$, Granite.author);

Thanks

SHYAMSUNDAR TK

[Anudeep_Garnepudi]

@samsundar23, do you want to hide/show on dialog load as well?

[samsundar23]

yes @Anudeep_Garnepudi 

During dialog load it must retain the same behavior.

My code change impacted the other tab field description which should not be the case.

Thanks

SHYAMSUNDAR TK

[Anudeep_Garnepudi]

Use the below code.

(function(document, $, ns) {
    "use strict";
    $(document).on("dialog-closed", function() {
        window.location.reload();
    });
    const showHideFieldDescription = function (e) {
        var product = $("coral-select[name='./variation']");
        if (product[0].selectedItem.value === "no-image") {
            product.closest(".coral-Form-fieldwrapper").find("coral-icon").show();
            product.closest(".coral-Form-fieldwrapper").find("coral-tooltip").show();
        } else {
            product.closest(".coral-Form-fieldwrapper").find("coral-icon").hide();
            product.closest(".coral-Form-fieldwrapper").find("coral-tooltip").hide();
        }
    };
    $(document).on("dialog-ready", function() {
        $("[name='./variation']").on("change", showHideFieldDescription);
        showHideFieldDescription();
    });
})(document,Granite.$, Granite.author);

[samsundar23]

@Anudeep_Garnepudi bro,

It worked for me.

Thanks for your help.

I want to expertise myself in clientlibs. Suggest me good links to have a good learning.

Thanks

[samsundar23]

Hi @Anudeep_Garnepudi 

Thanks for all your inputs on this hide/show field description functionality.

There is a impact again !

• Please find the below screenshots - with drop-down selection other than no-image variation the drop-down icon image and RTE plugins are hidden.

• With no-image variation [both RTE plugins and drop-down icon working fine.]

The RTE Plugins or Drop-down icon should not be lost under any case.

Kindly help me to modify the below clientlib script which should not impact any other plugins or existing functionality in that component.

(function(document, $, ns) {
"use strict";
$(document).on("dialog-closed", function() {
window.location.reload();
});
const showHideFieldDescription = function (e) {
var product = $("coral-select[name='./variation']");
if (product[0].selectedItem.value === "no-image") {
product.closest(".coral-Form-fieldwrapper").find("coral-icon").show();
product.closest(".coral-Form-fieldwrapper").find("coral-tooltip").show();
} else {
product.closest(".coral-Form-fieldwrapper").find("coral-icon").hide();
product.closest(".coral-Form-fieldwrapper").find("coral-tooltip").hide();
}
};
$(document).on("dialog-ready", function() {
$("[name='./variation']").on("change", showHideFieldDescription);
showHideFieldDescription();
});
})(document,Granite.$, Granite.author);

Thanks
SHYAMSUNDAR TK

[Anudeep_Garnepudi]

@samsundar23

if (...) {
    product.closest(".coral-Form-fieldwrapper").find("coral-icon.coral-Form-fieldinfo").show();
} else {
    product.closest(".coral-Form-fieldwrapper").find("coral-icon.coral-Form-fieldinfo").hide();
}

 Update with above lines and try once. 

[ChitraMadan]

Hi @samsundar23 ,

Please refer to this very nice article by @theopendle - https://levelup.gitconnected.com/aem-conditionally-show-or-hide-fields-in-touchui-dialogs-with-coral...

[samsundar23]

Thanks again @Anudeep_Garnepudi  !