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
