In this article, we will talk about Creating Custom Page using our Custom Template.
We will cover following steps:
1. Create folder structure.
2. Extend Page Component.
3. Creating Template.
4. Creating Page.
Creating folder structure:
Go to CRXDE Lite
1. Right click on apps folder and Create Folder as shown in the below image.
2. Enter name as “sample” in create folder dialog.
3. Similarly, create components and templates folders in “sample” folder.
Extending Page Component:
To create component :
1. Right click components folder.
2. Select Create
3. Select Create Component
4. Enter details in “Create Component” dialog as shown in below figure :
Label : customPageComponent
Title : Custom Page Component
Description : Custom Page Component, used by Sample Website
Super Type : foundation/components/page
Super Type defines the component which we want to extend or inherit from component package in libs->foundation.
The dialog will look as below:
5. Click Next till the final screen.
6. Save the changes.
7. New “customPageComponent” node will be created in the components folder.Expand the customPageComponent Node and open the customPageComponent.jsp file and review the default code as shown in the figure below.
8. Add following code after TODO section
<p>Sample web page created using custom templates in AEM (CQ5) </p>
9. Save your file.
Your final code will be as follows:
To create template :
1. Right click on templates folder.
2. Select Create
3. Select Create template
4. Enter details in “Create Template” dialog as below :
Label : customTemplate
Title : Custom Template
Description : Custom Template which will appear in templates list, when we create web pages.
Resource Type : sample/components/customPageComponent
The dialog will be as below:
5. Click Next
6. Click Next till final screen.
7. Save the changes.
1. Go to Websites
2. Select Websites folder.
3. Click New.
4. Select New Page.
5. Enter details in New Page Dialog as shown in below figure:
Title : sample
Name : SampleWebsite
6. Select Custom Sample Template, which we created.
7. Click Create.
8. New sample page will be created under Websites, double click sample page.
It will open in new tab as follows: