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 Adobe 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’re 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’ll click into this folder, and I’ve already pre-created a two column template, we’ll 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’ve got a header and a footer component and we’re going to add a couple of layout containers so that content authors can populate the body of this page with content.
We’ll just drag this layout container onto the page, and the advantage of using layout containers over a parse is that it’s 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’ll grab another layout container to create our two columns. When working with multiple layout containers, sometimes it’s confusing if you accidentally embed the container inside of themselves. And so what’s really helpful is using the content tree, and that’ll 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’ll 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’ll unlock this container and notice that it says, “no layout components for the layout container”. So we’ll 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’ll reuse the WKND content policy and that’s already predefined several allowed components. You’ll 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’ll save our policy decision and you’ll 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’ll really limit the available components for this container, so we’ll just choose a text and image component.
Now we’ve 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’ll notice the orange indicator that says “draft”.
Once we enable it, it can now be used to create new pages.
We’ll navigate to our WKND site under English and we’ll create a new page.
Now we can select our two column template that we had just been editing and we’ll give it a title and a name, and now we can create a new page.
Now we have a content page that’s using our two column template, I’ve gone ahead and added some content to this page. Let’s look at some advanced features. We’ve 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’ll see all the allowed components for this layout container, and what we can do is configure the policies for each of these components.
We’ll click the policy icon next to the text component, and you’ll see on the right-hand side, all of the RTE plugins that are now easily enabled with just simple check boxes.
Since it’s 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’ve 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’ve 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’s 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): http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf
Additional Resources additional-resources
recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d