Create the first AEM template

In the last session, we have explored templates using CRXDE Lite. If you have not yet gone through the last session, go through it. In this session, we will create a sample template using CRXDE Lite. Let us first get into the shoes of authors to see where exactly authors use a template in their content creation workflow.

Open SiteAdmin. http://localhost:4502/siteadmin
Log in with admin/admin credentials.
In the left pane, go to Geometrixx Demo Site > English.
From the right pane, select New > New Page.
You see the Title and Name text boxes. (Title appears in the web page and Name becomes the URL.

What you see underneath, namely Geometrixx Content Page, Geometrixx Home Page, Geometrixx Form, are templates. They define the layout of your page.
In that sense, choosing the right template is a fundamental part of content creation.

Now log into CRXDE Lite.
Go to the Apps folder. We have seen earlier that apps is the folder where we create templates and components.
Inside apps, create a new folder.
Right-click apps and select Create Folder.
Type aem-company. (This is our sample company.)
After creating the company, click Save All to save the company. (Whenever you create a node, folder, or property, you need to save explicitly in CRXDE Lite.)
In the similar way, inside aem-company, create two more folders: components and templates.

Now log into CRXDE Lite and create the first template.
Now, right-click templates and select Create Template.
Enter the following details:
Label: homepage
Title: AEM Company Home Page
Description: AEM Company’s Home Page Template
Recourse Type: aem-company/components/homepage
This is the sling:resourseType property. We have seen that, it points to the rendering script. Right now, we have pointed it to a component that doesn’t exist. We will create that script shortly.
Ranking: You could leave it for the time being. It represents the order in which templates should appear.

Click Next and enter Allowed Paths as /content(/.*)?. Means the template will apear in the content folder where all pages exist.
Click Next till you see the Finish button.
(We will learn about these properties at a later stage.)

Now, let us create the rendering script. We create the rendering script as a part of the component. We have already seen that, a component displays a specific information in a specific format. In this case, the component that we are going create, provides the layout of the page. It’s not a component that you can drag and drop to a page. We will name the component as homepage, so that we can identify it as a page component – or a component provides the layout of a page.
Right-click the components folder and select Create > Create Component.
Enter the following details.

Label: homepage
Title: AEM Company Home Page Component
Description: AEM Company’s Home Page Component
ResourceSuperType: wcm/foundation/components/pageThis property decides the component from where you want to inherit properties that decide your page’s behavior.
You have seen that the pages authors create have a sidekick, assets tab, and so on. We have pointed this to a page component that exists.
Group: AEM Company

Note that, homepage component is created. It also adds a default rendering script: homepage.jsp. I have mentioned earlier that we used to create components using JSPs before. That’s the reason for the JSP extension. In this session, we will create the template using Sightly, because it’s HTML and easy to use.

Just rename the homepage.jsp to body.html. This is a very important step. The SuperType property points to wcm/foundation/components/page. Though we have not explicitly mentioned, this component exists in the libs folder. Let us locate it. Navigate to libs > wcm > foundation > components > page.

By providing this as the SuperType, we are inheriting the scripts the component has. Go to the page.html which is the rendering script. This script includes two pages: head.html and body.html. By renaming the homepage component’s rendering script’s name to body.html, we are overwriting the body.html. At the same time, we will inherit head.html. (I have explained in the simplest possible way. Let us have a detailed discussion about it later.)

Open the aem-company’s body.html and add some text. Now, go to siteadmin, create a new page. You will see the template you created. Create a page – AEM Company. Open the page and you will see the text you entered. We will modify the template further in the coming sessions.