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

Avatar

Avatar
Validate 1
Level 2
samsundar23
Level 2

Likes

4 likes

Total Posts

62 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile

Avatar
Validate 1
Level 2
samsundar23
Level 2

Likes

4 likes

Total Posts

62 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile
samsundar23
Level 2

28-01-2021

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
Anudeep_Garnepudi
MVP

28-01-2021

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

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

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

Answers (1)

Answers (1)

Avatar

Avatar
Boost 250
MVP
ChitraMadan
MVP

Likes

273 likes

Total Posts

165 posts

Correct reply

67 solutions
Top badges earned
Boost 250
Establish
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Boost 250
MVP
ChitraMadan
MVP

Likes

273 likes

Total Posts

165 posts

Correct reply

67 solutions
Top badges earned
Boost 250
Establish
Ignite 1
Give Back 5
Give Back 3
View profile
ChitraMadan
MVP

28-01-2021