2 Templates

Template Types ____________________________________________________________________ 2

Templates ________________________________________________________________________ 2

Configuration Browser Folders _________________________________________________________ 2

The Template Editor _________________________________________________________________ 4

Demo ____________________________________________________________________________ 4

Create a Configuration Browser Folder ................................................................................................................................................... 4

Exercises __________________________________________________________________________ 6

Create a Template Type ..................................................................................................................................................................................... 6

Create a Template .................................................................................................................................................................................................. 8

Create a Site Structure and Initial Page .................................................................................................................................................. 11

© 2019 SmartDoc Technologies Create Sites - 2

Templates

Just like Forms, AEM Authors create web pages by first selecting a template. The resultant page inherits from the template and maintains a connection to the template. The Author will then construct a page by adding and configuring components. We will create our templates in a “context-aware” Configuration Browser folder.

Template Types

AEM includes out-of-the-box Template Types. When you create a template based on one of these types you use the default components. We will take a different approach. We will create our own custom template type based on the default HTML5 Page type.

Templates

Each new page inherits the structure and components that were included in the template. We will be creating Editable Templates in a “context-aware” Configuration Browser Folder. An Editable Template has a “live” relationship with the pages that are derived from it. If you make certain changes in the source template, the changes will flow through to all the derived pages.

A template author must be a member of the template-authors group.

Configuration Browser Folders

Configuration Browser Folders are created with AEM’s Configuration Browser tool. These folders are considered “context-aware”. These folders are used in modern AEM websites so assets can get different configurations based on context parameters like ‘region’.

Create Sites - 3 © 2019 SmartDoc Technologies

A Configuration Browser folder created in AEM will create this type of structure in the /conf node of CRXDE Lite.

Here are a few examples of Cloud Configurations that we can store in these folders.

− A reCAPTCHA configuration to support a form’s reCAPTCHA components.

− An Adobe Sign configuration to support digital signature workflows.

© 2019 SmartDoc Technologies Create Sites - 4

The Template Editor

Just like Forms, we use the Template Editor to create and edit templates. We will use the Template Editor to create the structure and policy of the template. The policy, as shown here, is used to set the allowed components and CSS styles of template. Each page that is created from this template will inherit the allowed components and CSS styles defined in the template’s policy.

Demo

Create a Configuration Browser Folder

Skip this Section on the Sandbox All Sandbox users already have a Cloud Configuration Container:

Adobe Experience Manager – Tools – Templates – <Team Folder>

Follow these steps to create an Editable Template Folder.

1. Navigate to Tools – General – Configuration Browser.

2. Click Create.

3. Enter <yourname>TrainingFolder as the Title.

4. Select Cloud Configurations, ContextHub segments, Content Fragment Models, and Editable Templates.

Create Sites - 5 © 2019 SmartDoc Technologies

5. Click Create. Your configuration container is created.

6. Select the <yourname>TrainingFolder configuration container you just created and click Properties.

7. Select a specific group or enter everyone in the Add New Permission field and click enter.

8. Select all the permissions.

9. Click Add.

10. Click Save & Close.

This is the structure that is created in CRXDE Lite.

© 2019 SmartDoc Technologies Create Sites - 6

Exercises

Create a Template Type 1. Select Tools – General – Templates to open the Templates Console.

2. Open your team folder.

3. Click Create.

You will see the default template types. If you create a template based on one of these types you will be using the default components. We will take a different approach. We will create our own custom template type based on the default HTML5 Page type.

Follow these steps to create a custom template type.

Create Sites - 7 © 2019 SmartDoc Technologies

Note: If you are in a class environment, on a shared server, it will be easier if the instructor executes these next few steps for each student.

4. Click Cancel to close the Create Template page.

5. Open CRXDE Lite in another tab.

6. Navigate to this node.

/libs/settings/wcm/template-types/html5page

7. Right-click on the html5page node and select Copy.

8. Navigate back to your team’s Configuration Browser folder.

/conf/<teamfolder>/settings/wcm/template-types

9. Right-click on the template-types node and select Paste.

10. Click Save All.

11. Right-click on the html5page node and select Rename.

12. Enter <yourname>TemplateType for the node name.

13. Click Save All.

14. Expand the <yourname>TemplateType node and select the jcr:content node.

15. Enter <yourname> Template Type for the jcr:title.

16. Enter Custom Template Type for an HTML5 content page for the jcr:description.

17. Click Save All.

18. Expand the initial node under the <yourname>TemplateType node and select the jcr:content node.

19. Change the sling:resourceType to a reference to your page rendering component.

/apps/<teamfolder>/<yourname>site/components/structure/emptypage

20. Click Save All.

Note: Your custom template type is now connected to your base page component.

© 2019 SmartDoc Technologies Create Sites - 8

21. Expand the structure node under the <yourname>TemplateType node and select the jcr:content node.

22. Change the sling:resourceType to a reference to the same page rendering component.

/apps/<teamfolder>/<yourname>site/components/structure/emptypage

23. Expand the policies node under the <yourname>TemplateType node until you can see the root node.

24. Right-click on the root node and select Delete. This will enable you to start with an empty root layout container when you work in the Template Editor.

25. Click Save All.

26. Expand the thumbnail.png node so you can see the jcr:content node.

27. Double-click the jcr:data property and Browse.

28. Locate the thumbnail-1.png file in your Student Files and click Open.

29. Click OK and the image will be loaded into your node.

30. Click Save All.

Create a Template 31. Go back to AEM and select Tools – General – Templates.

32. Open your team folder.

Adobe Experience Manager – Tools – General – Templates – <teamfolder>

Create Sites - 9 © 2019 SmartDoc Technologies

33. Click Create to create a new template. You should see your new custom Template Type.

34. Select your new custom Template Type and click Next.

35. Enter <yourname> Content Page for the Template Title.

36. Enter This template will be the basis for your pages in Sites for the Description.

37. Click Create.

38. Click Open.

39. Select Layout Container [Root] and click Policy.

40. Enter <yourname> Structure Policy for the Policy Title.

41. Expand the General category of Allowed Components in the Properties section on the right.

42. Select the Content Fragment, Experience Fragment, and the Layout Container.

43. Click Done (the checkmark in the upper-right).

© 2019 SmartDoc Technologies Create Sites - 10

44. Refresh the page.

45. Select the Drag components here object and click Insert Component (the plus icon).

46. Select Layout Container.

47. Select the inner Layout Container, not the outer Layout Container [Root] and click Unlock structure component (the padlock icon). You will now be able to add components to this container.

48. Select the inner Layout Container and click Policy.

Create Sites - 11 © 2019 SmartDoc Technologies

49. Enter <yourname> Content Policy for the Policy Title.

50. Expand the General category of Allowed Components in the Properties section on the right.

51. Select the Content Fragment, Experience Fragment, and the Layout Container.

52. Click Done (the checkmark in the upper-right).

Your template should now look like this.

53. Navigate back to your team folder under Templates.

Adobe Experience Manager – Tools – General – Templates – <teamfolder>

54. Select your new template (<yourname> Content Page) and notice it is in Draft mode.

55. Click Enable on the Actions bar to allow Page Authors to use this template for page creation.

56. Click Enable and you will see the status change to Enabled.

Create a Site Structure and Initial Page Follow these steps to create a page from your template.

57. Open CRXDE Lite.

http://<servername>:<port>/crx/de

© 2019 SmartDoc Technologies Create Sites - 12

58. Right-click on the content folder and select Create – Create Node.

59. Enter <yourname>site for the Name.

60. Select cq:Page for the Type.

61. Click OK.

62. Click Save All.

63. Right-click on the <yourname>site node and select Create – Create Node.

64. Enter jcr:content for the Name.

65. Select cq:PageContent for the Type.

66. Click OK.

67. Click Save All.

68. Select the jcr:content node and enter this property.

Name Type Value

sling:resourceType String /apps/<teamfolder/<yourname>site/components/structure/emptypage

69. Click Add.

70. Click Save All.

71. Select the jcr:content node and enter this property.

Name Type Value

jcr:title String <your name> Site

72. Click Add.

Create Sites - 13 © 2019 SmartDoc Technologies

73. Click Save All.

Your properties should now look like this.

74. Open AEM.

http://<servername>:<port>/aem/start.html

75. Refresh your browser.

76. Open Sites.

77. Select <yourname>site and click Properties in the Action bar.

78. Select the Advanced tab.

79. Enter /content/<yourname>site/en for Redirect. This will redirect any page requests for the root to the en.html page.

80. Scroll down and click Add on the Allowed Templates panel of Template Settings.

81. Enter /conf/<teamfolder>/settings/wcm/templates/.* in the field.

82. Click Save & Close.

83. Select the <yourname>site and click Create – Page.

© 2019 SmartDoc Technologies Create Sites - 14

84. Select the <yourname> Content Page template.

85. Click Next.

86. Enter English for the Title.

87. Enter en for the Name.

88. Enter English for the Page Title.

89. Click Create.

90. Click Open.

91. Click Components on the Side Panel. You will see the 3 components you selected in the template are now available to the Page Author.

92. Go back to the Sites main page.

Adobe Experience Manager – Navigation – Sites

93. Notice that the root icon for your website does not have the same icon as your English page.

94. Select the root icon and click Properties in the Action bar.

95. Click the Thumbnail tab.

96. Click Upload Image and navigate to the thumbnail-1.png file in your Student Files.

97. Select the thumbnail-1.png file and click Open.

98. Click Save & Close.

Your site’s root icon now matches your English page.