Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

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

samsundar23
Level 4
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

6.5
1 Accepted Solution
Anudeep_Garnepudi
Correct answer by
Community Advisor
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
Anudeep_Garnepudi
Correct answer by
Community Advisor
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

samsundar23
Level 4
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

samsundar23
Level 4
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

Anudeep_Garnepudi
Community Advisor
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);
samsundar23
Level 4
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

samsundar23
Level 4
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

Anudeep_Garnepudi
Community Advisor
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.