Content Policies Used in Templates

The Template Editor helps create Content Policies for a template and components in the Structure
mode. The content policies help define design properties of components used in the Structure mode.
For example, you can define the components available in the minimum/maximum dimensions. This
helps preconfigure a component's behavior on the resultant page. You can also define the number of
columns in the template. The Content Policies are applicable to the template and the pages created with
the template.

AEM offers two types of Content Policies:

• Allowed: Helps select entire groups of components by AEM capability or component types

ADOBE COPYRIGHT PROTECTED

individually. For example, asset editor components.
• Default: Helps set the media types for components that are dragged onto the layout container. For
example, Content Fragment text.

Style System Used in Templates

Template authors can enable Style System in AEM to define the appearance for a component. For
example, they can define colors, background color, size, and font for a component.

Style System: User Roles

Styles Systems can be edited by developers, template authors, and page authors.

The following table describes the user rights:

Developer Creates styles in CSS or LESS to provide several visual variations of
a component

Template Author Defines and enables a content policy on an editable template and
determines which styles are available
Page Author Selects a style for a component using a paintbrush icon on a
component toolbar.

DIG60014 Web Development and Personalisation Module 9 Editable Templates and Template Management 1
Exercise 3: Apply styles to an editable
template by using Content Policies

Scenario: As a template author, you need to enable content authors to select appropriate styles for
components. You need to configure the style system for components by using Contents Policies.

ADOBE COPYRIGHT PROTECTED

In this exercise, you will define custom styles that page authors can apply to the list component.

Add and configure the Dark and Large styles in the editable template.
1. To edit the your first name/User Editable Template, click the Adobe Experience Manager
from the header bar and click Tools. Navigate to General > Templates > We.Retail.
2. Change the view to Card View, if it is not already in Card View.
3. Hover over the your first name/User Editable Template and click the Open icon from the
quick actions toolbar that appears, as shown:

DIG60014 Web Development and Personalisation Module 9 Editable Templates and Template Management 2
 The template opens in the template editor.

4. From the page toolbar, click the Initial Content drop-down arrow and select Structure, as
shown:

ADOBE COPYRIGHT PROTECTED

5. In the Layout Container, click the Policy icon next to the List component, as shown:

The List page opens with two sections, Policy and Properties.

DIG60014 Web Development and Personalisation Module 9 Editable Templates and Template Management 3
 6. From the Select Policy drop-down menu, select We.Retail Default and click the
Duplicate icon, as shown. You must duplicate the policy to affect only the template you created
and not all the policies for the list components in the instance.

ADOBE COPYRIGHT PROTECTED

The policy title changes to Copy of We.Retail Default. You must rename the policy to reflect
that the policy is exclusively for the editable template you created by using a syntax.

7. In the Policy Title type your first name or User List Component – Style System, as shown:

DIG60014 Web Development and Personalisation Module 9 Editable Templates and Template Management 4
 8. Under the Properties section, click Styles, as shown:

ADOBE COPYRIGHT PROTECTED

The Styles section opens with a warning message - Editing the styles can have a visual impact on
existing components.

9. Scroll down the page and click the Add button, as shown:

A Style Group is created.

Note: Style groups help organize styles better and determine if a set of styles can be combined with one
another and applied to a component.

DIG60014 Web Development and Personalisation Module 9 Editable Templates and Template Management 5
 10. In the Group Name field, type Custom Styles and select the Styles can be combined check
box, as shown:

ADOBE COPYRIGHT PROTECTED

11. In the Styles section, below the Custom Styles group, click Add twice.
Two empty style fields are added as shown:

Note: You will add two available styles created by IT staff or developers that are available to you in AEM.
There are styles present that authors can use to style a list component (Simple, Numbered, Card, and so
on). These are the styles that provide a way to list items, each with their own look and feel, such as font size,
color, background. You must provide a user-friendly name for these styles but match them to the correct style.

DIG60014 Web Development and Personalisation Module 9 Editable Templates and Template Management 6
 12. In the two empty rows, add the following, as shown:
• Style Name: Uppercase
• CSS Classes: text-uppercase
• Style Name: Large
• CSS Classes: we-Logo--big

ADOBE COPYRIGHT PROTECTED

13.At the upper-right corner of the page, click Done.
You have enabled the list component in your editable template to use two additional styles,
either individually, or at the same time.

14.(Optional) To use the style you created, edit one of the pages with the your first name/User
Editable Template.
15.Navigate to Sites > We.Retail > your first name/User > English and open the User page in the
page editor. The User page is created using the your first name/User Editable Template.
16.Click the Components icon. The Components panel opens.
17.Drag the List component to the Drag components here area. The List component is added to
the page.
18.Select the List component and then click the Configure icon from the component toolbar. The
List dialog box opens. You must provide data for the list component.
19.Ensure you are on the List Settings tab. In the Parent Page field add /content/we-retail/
language-masters/en/experience either by typing the path in, or by clicking the Selection
Dialog and navigating to that path.
20. Click the Item Settings tab. Different options in the Item Settings tab appear.

DIG60014 Web Development and Personalisation Module 9 Editable Templates and Template Management 7
 21.Ensure in the Type field, Article is selected, select all the check boxes, and click the Done
icon. Notice, a list with the titles of the We.Retail Experience subpages appear on the page.
22. Select the list component and click the Styles icon from the component toolbar.
23. Select the Large style and click the Done icon.
The Large style looks as shown:

ADOBE COPYRIGHT PROTECTED

24. Again, select the list component and click the Styles icon from the component toolbar.
25. Select the Uppercase style and click the done icon.
The Uppercase style looks as shown:

DIG60014 Web Development and Personalisation Module 9 Editable Templates and Template Management 8
 26. Apply two or more styles at the same time by repeating the steps 22 and 23, but set the Style
for the list component to Image, Grid and Large, as shown. Recall that in the Custom Styles
group you added and enabled the Large style option.

ADOBE COPYRIGHT PROTECTED

Notice that the additional Large style is applied to the font style of the title of each list item as shown:

DIG60014 Web Development and Personalisation Module 9 Editable Templates and Template Management 9
References

Use the following links for more information on:

• Editable Templates
• AEM Style System

ADOBE COPYRIGHT PROTECTED

DIG60014 Web Development and Personalisation Module 9 Editable Templates and Template Management 10