Create Template AEM

create template AEM AEM

Default Template:

+> ui.content\src\main\content\jcr_root\conf\<project name>\settings\wcm\template-types
> af-page
> nextjs-page
> page
> remote-page
> xf

Extend Template:

+> ui.content\src\main\content\jcr_root\conf\<project name>\settings\wcm\templates\letter-page
> initial
> policies
> structure
> thumbnail.png.dir
.content.xml
thumbnail.png

Details:

> thumbnail.png

> .content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Template">
    <jcr:content
        cq:templateType="/conf/flagtick/settings/wcm/template-types/page"
        jcr:primaryType="cq:PageContent"
        cq:lastModified="{Date}2021-12-01T16:16:00.132-03:00"
        cq:lastModifiedBy="admin"
        jcr:description="Using the page to generate PDF Letter"
        jcr:title="Letter Page"
        status="enabled"/>
</jcr:root>

Note: Please take a look jcr:templateType and jrc:title.

> thumbnail.png.dir

+ _jcr_content/_dam_thumbnails

_dam_thumbnail_48.png
_dam_thumbnail_300.png
_dam_thumbnail_319.png

+ .content.xml

> initial

jrc:content => sling:resourceType= <Loading Template from ui.app folder>

For example:

<?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" 
    jcr:primaryType="cq:Page">
    <jcr:content
        cq:allowedTemplates="[/conf/flagtick/settings/wcm/templates/landing-page]"
        cq:template="/conf/flagtick/settings/wcm/templates/root-page"
        jcr:primaryType="cq:PageContent" 
        jcr:title="Sample Letter"
        sling:resourceType="flagtick/components/page">

        <root jcr:primaryType="nt:unstructured" 
            sling:resourceType="flagtick/components/container">
            <container jcr:primaryType="nt:unstructured" 
                sling:resourceType="flagtick/components/container">

                <title jcr:primaryType="nt:unstructured" 
                    sling:resourceType="flagtick/components/title" />

                <container jcr:primaryType="nt:unstructured" 
                    sling:resourceType="flagtick/components/container"
                    layout="responsiveGrid" />
            </container>
        </root>

    </jcr:content>
</jcr:root>

If you want to add more properties, then able to custom into cq:dialog with sling:resourceType.

In some ways, if you want to custom page.html and then the structure looks like this:

Upon successful creating page from page template. We will have structure of container.

Before moving forward, you need to observe syntax as below:

sling:resourceType="flagtick/components/page"

We will need to custom page template base page default template in AEM. Thus, you can move to ui.app and custom new NODE = verification. Let use the Java Content Repository (JCR) by clicking the URL http://localhost:4502/crx/de/index.jsp. After using Package Manger to download package and override content in local AEM instance at ui.app folder.

In ui.app folder, the custom template page named verification and inherited from page template.

In .content.xml file, we will inherit from page default template.

<?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"
    jcr:primaryType="cq:Component"
    jcr:title="Contribution Verification Letter"
    sling:resourceSuperType="flagtick/components/structure/page"
    componentGroup=".hidden"/>

There are some concepts that can be skipped as customfooterlibs.html, customheaderlibs.html. In this cases, we can override page.html and modify following HTML templates as below:

<!DOCTYPE HTML>
<html lang="sv">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>Hello World</p>
</body>
</html>

To be continued...

> policies

+ .content.xml

> structure

+ .content.xml

See custom structure of page template in AEM.

You need to login to do this manipulation!