Hide and show AEM component using authoring | AEM Community Blog Seeding

Hide and show AEM component using authoring by Rashidjorvee

Abstract

Hi Friends, today in this article we are going to see an example of how we can hide and show the content of the AEM component using authoring.

First of all, we will add an isHide checkbox field in the component dialog so that an author can set it based on the requirement. Below is the code node structure of isHide node in the component dialog.

{
jcr:primaryType: "nt:unstructured",
uncheckedValue: "false",
name: "./ishide",
text: "Hide content",
value: "true",
sling:resourceType: "granite/ui/components/coral/foundation/form/checkbox",
fieldDescription: "Hide the content of this component on page."
}

Since we have completed the dialog part now move to the component HTL page where we will manage the rendition.

Some content here

</sly

Once you will check the isHide option then after it will be difficult to find the component on the page, hence add the below line of code in the HTL file so that it will show a copy text to configure the component always in edit mode.

Read Full Blog

Hide and show AEM component using authoring

Q&A

Please use this thread to ask the related questions.