Adaptive Template Rendering adaptive-template-rendering

Last update: Wed May 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Topics:
Developing

CREATED FOR:

Developer

CAUTION

AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

The adaptive template rendering provides a way to manage a page with variations. Originally useful to deliver various HTML output for mobile devices (e.g. feature phone vs. smart phone), this feature is useful when experiences have to be delivered to various devices that need different markup or HTML output.

Overview overview

Templates are generally built around a responsive grid, and pages created based on these templates are fully responsive, adjusting automatically to the viewport of the client device. Using the Emulator toolbar in the page editor, authors can target layouts to specific devices.

It is also possible to set up templates to support adaptive rendering. When device groups are properly configured, the page will be rendered with a different selector in the URL when selecting a device in the emulator mode. Using a selector a specific page rendering can be directly called via the URL.

Remember when setting up your device groups:

Every device must be in at least one device group.
A device can be in multiple device groups.
Because devices can be in multiple device groups, selectors can be combined.
The combination of selectors is evaluated top-to-bottom as they are persisted in the repository.

NOTE

The device group Responsive Devices will never have a selector because devices that are recognized as supporting responsive design are assumed to not need an adaptive layout

Configuration configuration

Adaptive rendering selectors can be configured for existing device groups or to groups that you have created yourself.

For this example, we are going to configure the existing device group Smart Phones to have an adaptive rendering selector as part of the Experience Page template within We.Retail.

Edit the device group that requires an adaptive selector in http://localhost:4502/miscadmin#/etc/mobile/groups

Set the option Disable Emulator and save.
The selector will be available for the Blackberry and iPhone 4 provided the device group Smart Phone is added to the template and page structures in the following steps.
Using CRX DE Lite, allow the device group to be used on your template by adding it to the multi-value string property cq:deviceGroups on the structure of your template.

/conf/<your-site>/settings/wcm/templates/<your-template>/structure/jcr:content

For example, if we wish to add the Smart Phone device group:

/conf/we-retail/settings/wcm/templates/experience-page/structure/jcr:content
Using CRX DE Lite, allow the device group to be used on your site by adding it to the multi-value string property cq:deviceGroups on the structure of your site.

/content/<your-site>/jcr:content

For example if we want to allow the Smart Phone device group:

/content/we-retail/jcr:content

Now when using the emulator in the page editor (such as when modifying the layout) and you choose a device of the configured device group, the page will be rendered with a selector as part of the URL.

In our example, when editing a page based on the Experience Page template, and choosing iPhone 4 in the emulator, the page is rendered including the selector as arctic-surfing-in-lofoten.smart.html instead of arctic-surfing-in-lofoten.html

The page can also be called directly using this selector.

chlimage_1-161

recommendation-more-help

2315f3f5-cb4a-4530-9999-30c8319c520e