Highlighted

hide the container based on checkbox check/uncheck.

srikary71884977

20-02-2019

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

Replies