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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

hide the container based on checkbox check/uncheck.

srikary71884977
Level 1
Level 1

Hi Folks,

I am new to AEM and exploring it to the core to understand the core functionalities and implementations by adobe.

I love to share my ideas or learn new thing which i dont know.

I am stuck with hide conditions using a checkbox.

The Scenario is , I want to hide a container which has a type as  sling:resourceType="granite/ui/components/coral/foundation/well"> based on a checkbox value.

Can anyone help me in finding the best solution.

Instance: AEM 6.4

Templates: Editable templates

I am sharing you some of my code here:

cq:dialog.xml:-

<modalContainer

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/well">

                                                <items jcr:primaryType="nt:unstructured">

                                                    <addModal

                                                        granite:class="cmp-newTeaser--editor-modal"

                                                        jcr:primaryType="nt:unstructured"

                                                        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"

                                                        checked="${not empty cqDesign.addmodal? cqDesign.addmodal : false}"

                                                        fieldDescription="Check if there  no  Modal."

                                                        name="./addmodal"

                                                        text="Hide Modal"

                                                        uncheckedValue="false"

                                                        value="{Boolean}true"/>

                                                    <modal

                                                        jcr:primaryType="nt:unstructured"

                                                        sling:resourceType="granite/ui/components/coral/foundation/well"

                                                        name="./modalDetails"

                                                        wrapperClass="cmp-newTeaser--editor-modalDetails">

                                                        <items jcr:primaryType="nt:unstructured">

                                                            <heading

                                                                granite:class="coral-Heading coral-Heading--4"

                                                                jcr:primaryType="nt:unstructured"

                                                                sling:resourceType="granite/ui/components/coral/foundation/heading"

                                                                level="{Long}4"

                                                                text="Modal Details"/>

                                                            <help-root-tag1

                                                                jcr:primaryType="nt:unstructured"

                                                                sling:resourceType="granite/ui/components/coral/foundation/textlink"

                                                                name="./help-root-tag1"

                                                                text=""/>

                                                            <modalDetails

                                                                jcr:primaryType="nt:unstructured"

                                                                sling:resourceType="granite/ui/components/coral/foundation/well">

                                                                <items jcr:primaryType="nt:unstructured">

                                                                    <modalTitle

                                                                        jcr:primaryType="nt:unstructured"

                                                                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                                        fieldDescription="A title to display as the headline for the modal"

                                                                        fieldLabel="Title"

                                                                        name="./modaltitle"/>

                                                                    <modalSubTitle

                                                                        jcr:primaryType="nt:unstructured"

                                                                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                                        fieldDescription="A text to display as the sub title for the Modal"

                                                                        fieldLabel="Subtitle"

                                                                        name="./modalsubtitle"/>

                                                                    <modalLink

                                                                        jcr:primaryType="nt:unstructured"

                                                                        sling:resourceType="cq/gui/components/coral/common/form/pagefield"

                                                                        emptyText="Select A Form"

                                                                        fieldDescription="A link to choose for the Modal"

                                                                        fieldLabel="Source"

                                                                        name="./modalLink"

                                                                        rootPath="/content/www"/>

                                                                </items>

                                                            </modalDetails>

                                                            <heading2

                                                                granite:class="coral-Heading coral-Heading--4"

                                                                jcr:primaryType="nt:unstructured"

                                                                sling:resourceType="granite/ui/components/coral/foundation/heading"

                                                                level="{Long}4"

                                                                text="Modal Dimensions"/>

                                                            <help-root-tag2

                                                                jcr:primaryType="nt:unstructured"

                                                                sling:resourceType="granite/ui/components/coral/foundation/textlink"

                                                                name="./help-root-tag2"

                                                                text=""/>

                                                            <modalDimensions

                                                                jcr:primaryType="nt:unstructured"

                                                                sling:resourceType="granite/ui/components/coral/foundation/well">

                                                                <items jcr:primaryType="nt:unstructured">

                                                                    <modalHeight

                                                                        jcr:primaryType="nt:unstructured"

                                                                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                                        fieldDescription="A hieght  for the Modal"

                                                                        fieldLabel="Height"

                                                                        name="./modalheight"/>

                                                                    <modalWidth

                                                                        jcr:primaryType="nt:unstructured"

                                                                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                                        fieldDescription="A width for the Modal"

                                                                        fieldLabel="Width"

                                                                        name="./modalwidth"/>

                                                                </items>

                                                            </modalDimensions>

                                                        </items>

                                                    </modal>

                                                </items>

                                            </modalContainer>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Js:-

(function($) {

    "use strict";

    function toggleInputs(addmodal) {

        var modalDetails = $(".cmp-newTeaser--editor-modalDetails");

        if (addmodal.checked) {

            modalDetails.addClass("hide");

            modalDetails.find("input").attr("aria-required", "false");

        } else {

            modalDetails.removeClass("hide");

            modalDetails.find("input").attr("aria-required", "true");

        }

    }

    $(document).on("coral-component:attached", ".cmp-newTeaser--editor-modal", function(e) {

        toggleInputs(e.target);

    });

    $(document).on("change", ".cmp-newTeaser--editor-modal", function(e) {

        toggleInputs(e.target);

    });

})(jQuery);

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Please help me out in finding the best solution to hide the foundation/well container.

Many thanks in advance,

Srikar.Y

2 Replies