AEM Editable Template

Editable Template

Theory:

Provide templates that retain a dynamic connection to any pages created from them. This ensures that any changes to the template are reflected in the pages themselves.

Ability to configure Responsive Grid columns in Layout Container

Ability to configure Rich Text Editor plugins in Text Component

Ability to turn on / turn off features such as cropping, desktop file-upload in Image Component

Ability on how the component display on different devices should, or even hide it on small screens

Changes made to the structure will be reflected in any pages created with the template

If content is added to a component in structure mode and that component is subsequently unlocked, then this content is used as initial content.

Any existing pages will not be updated if the initial content is changed after creation.

As initial content defines the initial content that a new page will have upon creation.

In order to show the mobile emulator in toolbar and use the Layout mode, make sure your page     resource type is added to com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-<app-name>.xml.

.............................................................................

Practical:

1) From crxde, create sling:OrderedFolder under /conf with name as <project-name>

2) Under that create sling:Folder with name as "settings"

3) Copy wcm node from /conf/we-retail/settings/wcm to /conf/<project-name>/settings/

4) Keep required template and template-types and delete others. Whichever is used check each property of those and rename specific to project.

   Eg: Keep templates/content-page & template-types/empty-page

5) From Dashboard, go to Tools -> General -> Templates -> <project-name> folder and click on CREATE button

6) Select newly copied template type -> Click Next -> Give Template Title and Click on CREATE & then Done

    Now new draft template is created with selected template type

7) Click on Edit icon to Edit template

8) In Structure Mode, drag and drop header footer related to your project which will be same in all pages and author it.

  Between then Drag and Drop Layout container to put other components eg: text component

  Now unlock this structure component (Eg: Text) so that it can be Edited in Initial content mode

9) Now in Layout Mode, component can be resized or realigned, Also from Emulator we can configure different view in different devices 

    In any view we can hide any component, and it will be visible in other devices

10) Again, from Dashboard, to templates, select newly created template and Enable it.

11) From Crxde Create cq:Page node under /content with name as <project-name>

12) Copy jcr:content node from /content/we-retail/jcr:content to /content/<project-name>/ and update all required properties including template references

13) Now from Sites.html go to created parent page of project and create new page with newly created template.

Note: Component related policy will be specific to that component in that page, and Page related policies will be applied to all pages created using that template

..............................................................................
Modes:
1) Structure - In this mode we can include components which will be reflected in all pages created using this template. Also here we can define policies (+ design dialog values) for template and components. Also using layout container component we can define layout (modify container size etc)
3) Initial - Here we can define initial component pre baked content for pages, which can be modifed later if required.
4) Edit - This is normal page edition where author can edit component dialog and auhtor the content.
................................................................................

Convert Static Template Pages to Editable Template Pages

Install the modernizer tool package from the below url:

https://github.com/adobe/aem-modernize-tools/releases/

Configure OSGI config "Page Rewrite Rule"

Navigate to the "Page Template/Structure Conversion Tool" and perform task accordingly