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

hide the container based on checkbox check/uncheck.

Avatar

Avatar
Level 1
srikary71884977
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
srikary71884977
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile
srikary71884977
Level 1

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

Avatar

Avatar
Give back 300
MVP
Gaurav-Behl
MVP

Likes

243 likes

Total Posts

1,145 posts

Correct Reply

281 solutions
Top badges earned
Give back 300
Give Back 50
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Give back 300
MVP
Gaurav-Behl
MVP

Likes

243 likes

Total Posts

1,145 posts

Correct Reply

281 solutions
Top badges earned
Give back 300
Give Back 50
Give Back 5
Give Back 3
Give Back 25
View profile
Gaurav-Behl
MVP

20-02-2019

check if this helps --  coral-checkbox issue in Carousel

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

20-02-2019