Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

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

Avatar

Level 4

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

samsundar23_0-1611828205203.png

 

Thanks

SHYAMSUNDAR TK

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

6.5
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@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();
        }
    });
});

View solution in original post

11 Replies

Avatar

Correct answer by
Community Advisor

@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();
        }
    });
});

Avatar

Level 4

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

Avatar

Level 4

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

Avatar

Community Advisor

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

Avatar

Level 4

@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

Avatar

Level 4

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.

samsundar23_1-1616751059764.png

 

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

samsundar23_2-1616751925527.png

 

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

Avatar

Community Advisor

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