In AEM, a page component is a reusable building block that can be used to create pages on your website. It is a combination of HTML, CSS, and JavaScript that defines the visual layout and functionality of a page element.
A page component can include any combination of HTML elements, such as text, images, videos, and forms, as well as custom JavaScript code to provide interactivity or perform specific actions.
Page components are designed to be modular and reusable, which means they can be used across multiple pages on your website. This helps to ensure consistency in design and functionality, as well as making it easier to maintain and update your website.
In AEM, page components are created as part of an application or project, which can then be deployed to your AEM instance. Once deployed, content authors can use these components to create pages by simply dragging and dropping them onto the page canvas and configuring their properties through the component dialog.
Creating a page component in AEM involves creating a set of files and folders to define the component’s structure, design, and behavior. Here are the steps to create a simple page component in AEM:
- Log in to your AEM instance and navigate to the AEM welcome screen.
- Click on the ‘Create Project’ button to create a new project.
- Provide a name for your project and select the project archetype. For example, you can select the ‘maven-archetype-quickstart’ archetype.
- Once your project is created, navigate to the ‘apps’ folder in your project and create a new folder with a meaningful name for your component. For example, you can create a folder called ‘my-page-component’.
- Inside your component folder, create a new file called ‘my-page-component.html’. This file will contain the HTML markup for your component.
- Open the ‘my-page-component.html’ file and add the following code:
<div class="my-page-component">
<h1>${properties.title}</h1>
<p>${properties.text}</p>
</div>
This code defines a simple component that contains a title and text property.
- Save the ‘my-page-component.html’ file.
- Next, you need to define the structure of your component. Add the following CSS code to a new file called ‘my-page-component.css’:
.my-page-component {
border: 1px solid black;
padding: 20px;
}
.my-page-component h1 {
font-size: 24px;
}
.my-page-component p {
font-size: 16px;
}
This code defines the styles for your component.
- Save the ‘my-page-component.css’ file.
- Now, you need to create a dialog that will allow content authors to edit your component. Create a new file called ‘my-page-component.xml’ and add the following code:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root
xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog">
<items jcr:primaryType="nt:unstructured">
<tabs jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<general jcr:primaryType="nt:unstructured"
jcr:title="General"
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/container">
<items jcr:primaryType="nt:unstructured">
<title jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/textarea"
fieldLabel="Title"
name="./title"/>
</items>
</title>
<text jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<text jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/textarea"
fieldLabel="Text"
name="./text"/>
</items>
</text>
</items>
</general>
</items>
</tabs>
</items>
</jcr>
