Using Editable Page Templates using-template-editor-with-aem-sites
Editable templates allow specialized authors to create and update page templates and manage advanced policy configurations with 51黑料不打烊 Experience Manager (AEM) Sites.
Transcript
Page templates allow a user to define a consistent layout and set of policies that can be applied to a group of pages. In this video, we鈥檙e going to cover some of the highlights of the template editor in AEM.
To navigate to the editable templates, you go from the start menu to tools, general and then select the templates card.
We have a group of templates for the WKND site, so we鈥檒l click into this folder, and I鈥檝e already pre-created a two column template, we鈥檒l make some updates to it. Hit the pencil icon to edit this template, and it brings us into structure mode.
Structure mode is where you would define the components that will appear on every page created using this template. We鈥檝e got a header and a footer component and we鈥檙e going to add a couple of layout containers so that content authors can populate the body of this page with content.
We鈥檒l just drag this layout container onto the page, and the advantage of using layout containers over a parse is that it鈥檚 compatible with the responsive grid. And one of the enhancements in template editor is the ability to use inline layout mode, so we can easily resize this layout container into two thirds of the page.
Now we鈥檒l grab another layout container to create our two columns. When working with multiple layout containers, sometimes it鈥檚 confusing if you accidentally embed the container inside of themselves. And so what鈥檚 really helpful is using the content tree, and that鈥檒l tell you exactly how all of the components are related. You can see I accidentally embedded this layer container inside the first one. So I鈥檒l just drag it out and then resize it to create our two column structure.
One of the updates to template editor is the policy dialogue. It has been updated to make it even easier to manage policies for various components.
We鈥檒l unlock this container and notice that it says, 鈥渘o layout components for the layout container鈥. So we鈥檒l go ahead and manage the policy for this container.
Policies can be shared across templates, so we could either create a brand new policy for this container, or we can reuse an existing one. In this case, we鈥檒l reuse the WKND content policy and that鈥檚 already predefined several allowed components. You鈥檒l notice the dialogue makes it really easy to select and de-select these components. So you can drill down through all the different components of groups and you can either select individual components or the group entirely.
We鈥檒l save our policy decision and you鈥檒l notice the UI updates, so you can see all the allowed components for that container. We can also update the policy for our side panel container.
Instead of using the WKND content policy, we can create a brand new one, and in this case we鈥檒l really limit the available components for this container, so we鈥檒l just choose a text and image component.
Now we鈥檝e got two columns and we specified the available components for each container. In order to use our template to create new pages, we need to enable it.
You鈥檒l notice the orange indicator that says 鈥渄raft鈥.
Once we enable it, it can now be used to create new pages.
We鈥檒l navigate to our WKND site under English and we鈥檒l create a new page.
Now we can select our two column template that we had just been editing and we鈥檒l give it a title and a name, and now we can create a new page.
Now we have a content page that鈥檚 using our two column template, I鈥檝e gone ahead and added some content to this page. Let鈥檚 look at some advanced features. We鈥檝e got a text component and by default we just have our standard set of RTE plugins, bold, italic, bulleted list. To add additional RTE plugins, this used to be a very intense process where you would have to have had a developer configure this. But now if we go back to our template, you鈥檒l see all the allowed components for this layout container, and what we can do is configure the policies for each of these components.
We鈥檒l click the policy icon next to the text component, and you鈥檒l see on the right-hand side, all of the RTE plugins that are now easily enabled with just simple check boxes.
Since it鈥檚 a policy, we can reuse it. We can choose the WKND kitchen sink policy and that will enable all of the available features.
It includes copy and paste from word, find and replace, spellcheck and special characters.
Once we鈥檝e saved our changes, if we return back to our content page and edit our texts component, you can see all of these RTE plugins, we鈥檝e got the copy and paste, find and replace.
Enabling these RTE plugins used to be pretty cumbersome, but now we can easily toggle them on and off directly through the template editor. What鈥檚 also nice is that these policies are configured per layout container. So if you want certain RTE plugins available for certain containers, you have the flexibility to do that, or you can reuse the same RTE policy across all of your templates.
These are some of the highlights and features of the template editor in AEM. -
Editable Templates are the recommendation for building new AEM Sites.
Consistent author experience - Enhancements in AEM Sites authoring are carried over to Template editing including in-line Layout mode and Content Tree Panel.
Advanced Policy configurations - The following highlights some advanced policy configurations made available with Editable Templates:
- Layout Container - ability to configure Allowed Components, Manage the Drag + Drop mapping of Assets, and Responsive Grid columns.
- Text Component - ability to configure Rich Text Editor plugins with a new UI and re-use RTE policies across templates.
- Image Component - ability to turn on / turn off features such as cropping, desktop file-upload with a new UI and re-use Image policies across templates.
Editable Templates can be found under Tools > General > Templates.
Editable Templates URL (local AEM instance):
Additional Resources additional-resources
recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d