Remember the first html project you created in your college days? We added all the content in html even if it was repetitive. Lets take an example of following page:
Here, to create this simple structure I had to copy paste same structure. This was okay during college days, however, things will become complex in real world and this approach will not work in real scenarios.
So, to increase the maintainability of the code and content and avoid duplicity, we have something called components in AEM. In simple words, component is the block of code which we can add to a page multiple times without duplicating the code.
Going back to the example, to create same structure in an AEM Page we will create a component with accepts a title and description and add it 3 times to the page.
Lets create an AEM component with same structure: 1. Go to your project in apps folder where you want to create a component in CRX.
2. Right click on the folder -> Create ->Create Component
3. Fill in following details
Label: This is the name that would appear here
Group: You can copy this value from any other component. Eg:
(We will try understand technicality about these fields in some other post😌)
4. Click on next and then Ok followed by Ctrl + S (to save the changes).
5. If you click on small + icon besides the component name, you will see .jsp file. Delete it and create html file with same name.
6. Open the the html and replace its content with following:
<section data-sly-use.templates="core/wcm/components/commons/v1/templates.html">
<h3 style = "background: black; color: white">${properties.title}</h3>
<p>${properties.description}</p>
</section>
<sly data-sly-call="${templates.placeholder @ isEmpty = !(properties.title && properties.description)}"></sly>Note: ${properties.title} and ${properties.description} are the variables that will return the value of the title and description
7. Next, we will create a dialog to accept title and description values. To make this step easier, you can import the changes in eclipse IDE (Follow this post incase you don't know: 🔗Link). Create a folder named "_cq_dialog" under "/components/title-and-description" and create ".content.xml" file under it. Paste following content inside it. Now, export the changes back to the AEM server.
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Title and Description"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<title
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Title"
name="./title"/>
<description
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Description"
name="./description"/>
</items>
</column>
</items>
</content>
</jcr:root>ELSE
Create same structure of nodes in AEM
8. Let's add our component to any page and check.
Feel free check my git project in case of confusion:
That's all for today! If you've found this blog post informative or helpful, I’d greatly appreciate it if you could give it a like. It keeps me motivated 💛
Enjoying my ad-free blog? Support by buying me a coffee! I've kept this space ad-free, sponsoring it myself to maintain its purity. Your contribution would help keep the site afloat and ensure quality content. Thanks for being part of this ad-free community.
Comments