How to create page template with a custom field (or any sort of model), e.g. an ID or code?

Question

All the tutorials create page templates either via the UI or via crxde editor. This will create a template on a running instance, not our our source code, so wont get deployed to any of the environments. This is the first issue.

The second problem is that when you create a template via UI, there does not seem to be a way to add any fields to it.

for example, if we want to create a template for holiday destinations, we could do this via ui, and drag some components such as images or text blocks. But how would we add a fields, such as holiday ID, country ISO code etc, so that

a) we can search for holidays via code (e.g. in a servlet)

b) when the user clicks on a CTA in a holiday, we can some how get the pages holiday ID?

We see there are three types of template: static, editable, and template-type. Do any of these support custom attributes/model, and do either support creation of the template in code, so that it can be deployed to other environments, not just exist on the developers local running AEM server? There seem to be no tutorials on creating template-types, so we are guessing that creating a static template might be easier (if we can find a tutorial to do it in code, rather than UI on a running server)

This page has some partial how how to create a template in CRXDE, which presumably we can some how import into our code, but there is no info on how to add any attributes or custom fields to the template. We could of course create a component and add this to the template, as there is an easy way to create components in code and give them a model, but we have not found this feature for page templates.

Asutosh_Jena_ · Answer

Hi @tb3dock

When you create any template on a running instance (AEM) either using crx/de and UI (Template editor), all the code/nodes will be available in crx/de. You can sync those back to your code base using vlt plugin, or AEM sync plugin available for all IDE. In this way you code will be available in your code base and will be deployed to all the instances with deployment.

Now coming to your second issue, when you say you want to add fields, you will need to add those fields on the page component from which the template is being created.

Let's say you want to create multiple page for holiday with different id for each of the page, then you can create a text field in the page property. Now to add the text field to the page property you need to add a property on the page component and the same will be available in the page which is created using the template which is internally created using the page component.

Added the custom tab with custom property to the page component below:

Template type that is created using the page component:

Template created using the template type:

Resultant page which is created using the template which internally uses the same page component:

Now on the page property you can see the additional tab with additional fields that we have added:

All the pages those are created using the same template will now have the property and you can add the offer id and country code or other values to it.

a) Now the same property such as (offerId, countryId which is holding the value) can be used in the search servlet and can be fetched in response.

b) A single line of JS can do this. It can read the offer id or the holiday id from the page source and can populate upon the button click. We just need to keep the offer id and holiday id in the page as a hidden variable.

The below line of code will read the value from page property and will print as a hidden variable.

<div class="hide offerId" id="offerId">${pageProperties.offerId}</div>
<div class="hide countryId" id="countryId">${pageProperties.countryId}</div>

Using JS we can read the value upon button click:

$("#buttonId").click(function (e) {
    e.preventDefault();
    var offerId = $("#offerId").text();
    var countryId = $("#countryId").text();
});

Hope this helps!

Thanks

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded