Experience League | Image

Getting Started with Adobe Experience Manager Sites Development

Table of Contents

Lab Overview

This labs walks you through the entire process of creating an Experience Manager site from scratch using the latest features, concepts, and best practices.

After this session, you can set up your own, design editable templates, create components using HTML Template Language (HTL) with a style system, leverage core components , implement Sling Model Exporter and a lot more.

Key Takeaways

  • Create AEM Project.
  • Use of Editable Templates.
  • HTL & Dialog boxes in components.
  • Benefits of Core components.
  • Determine advantage and use Style System.

Prerequisites

  • AEM 6.5 L22 or above
  • JDK 1.8
  • Maven 3.3.x or above
  • Eclipse IDE
  • Maven Settings configured with adobe public profile created in settings.xml

Lesson 1 - Creating and Deploying an AEM Project

Objective

In this lesson, we will learn to create and deploy a project to an AEM Server.

Goals

  1. Create a new AEM Project.
  2. Deploy an AEM Project to an AEM Server.
  3. Use Eclipse with the AEM Plugin.

Lesson Context

  • An AEM Project contains multiple modules and requires a set of dependencies to correctly build and deploy in Enterprise.

  • This could be complex if we have do it on our own. To simplify the task, Adobe provides the AEM Project Archetype based on Maven.

  • This AEM Project Archetype or Maven template can be used to create a new AEM project as starting point for developing your own functionality.

Exercise 1.1 : Generate an AEM Project

  1. Create a folder called training in the Documents folder on your machine.

  2. Open the Terminal in this folder and run following command:

    mvn org.apache.maven.plugins:maven-archetype-plugin:2.4:generate \
 -DarchetypeGroupId=com.adobe.granite.archetypes \
 -DarchetypeArtifactId=aem-project-archetype \
 -DarchetypeVersion=16 \
 -DarchetypeCatalog=https://repo.adobe.com/nexus/content/groups/public/

  3. Enter the following values in interactive mode and press enter or return to accept the default values.

    Input Values
    groupId com.adobe.training
    artifactId summit
    package com.adobe.training.summit
    siteName Summit

Figure: Maven Interactive Mode

Figure 1.1: Interactive Mode

  1. You should receive a success message at the end and a project called summit will be generated in the training folder.
  2. In the training folder, open the summit folder and explore the generated project modules.

Figure: Generated AEM Project

Figure 1.2: AEM Project

Exercise 1.2 : Import AEM Project in Eclipse

  1. Open Eclipse, available on your lab machine.

AEM development in Eclipse is supported using the following two plugins:

  • AEM Plugin
  • Sling Plugin

These plugins should already be installed on your Lab Machines.

Figure: AEM & Sling Plugin

Figure 1.3: AEM & Sling Plugin

Note: We have removed a few modules and some sample content from the generated archetype project to reduce deployment time for this lab.

We will be using the provided project summit for the lab - this project is available in resources/project folder.

  1. File > Import > Maven > Existing Maven Project.
  2. In the root directory, browse to provided AEM Project.
  3. Go to Windows > Perspective > Open Perspective > AEM.

Exercise 1.3 : Setup a connection to the AEM Server

We can deploy project code changes directly from Eclipse to AEM. For this task, we need a connection to AEM server. This connection also helps in syncing changes made in CRXDE to the Eclipse project.

  1. In the server panel, click to add new server.
  2. Select Adobe Experience Manager server from the options.

Figure: Add and Remove Modules Console

Figure 1.4: Add Remove

  1. Click Next.
  2. Select all modules in the available section and click Add button.

Figure: Add and Remove Modules Console

Figure 1.5: Add and Remove Modules Console

  1. Click Finish.
  2. Double click Server to open the configuration window.

Figure: Server Configuration

Figure 1.6: Server Configuration

  1. In the Connection section, change the port to 4502.
  2. In the Publishing section, change the radio button to Never Publish Automatically.
  3. Save or Command+S to save the configuration.
  4. Start the AEM Server.

We will use the AEM Server connection to pull code changes made in CRXDE.

Exercise 1.4 : Deploy the project using Maven Build

Another way of deploying code is using Maven, the benefit of this process is it provides details of the build process in the console.

  1. Right click on the summit parent module > Run As > Run Configurations.
  2. Select Maven Build and add a new launch configuration.
  3. Click Workspace and select the summit parent module.
  4. In Goals, enter clean install.
  5. In Profile, enter autoInstallPackage adobe-public.
  6. Provide a name for this configuration - Deploy Summit Package.
  7. Click Apply > Run.

Figure: Run Configuration

Figure 1.7: Run Configuration

Figure: Run Configuration Settings

Figure 1.8: Run Configuration Settings

  1. This will deploy your project to the AEM Server and you should receive a success message.

Figure: Maven Success Message

Figure 1.9: Maven Success Message

  1. Go to CRXDE Lite at http://localhost:4502/crx/de.

  2. You can verify successful deployment by checking the following path.

    CRX Structure Project Modules
    /apps/summit ui.app module
    /apps/summit/install/summit-core.*.jar core module
    /conf/summit ui.content module
    /content/summit ui.content module

    |

Figure: Summit Project in CRXDE Lite

Add Remove

Summary

In this lesson we created and deployed an AEM project and got familar with the tools needed as well as the structure of the project allowing us to start creating a template and building our own components in the next lesson.

Lesson 2 - Creating Templates

Objective

In this lesson, we will create a template and configure policies for our template.

Goals

  1. Create an Editable Template.
  2. Configure a Policy.

Lesson Context

AEM page templates define the structure of the resultant page, any initial content, and the components that can be used.

What makes page templates powerful is that with the AEM Template Editor, creating and maintaining templates is no longer a developer-only task. A type of power-user, who is called a template author, can be involved too giving authors much more flexibility.

In this lesson we will create a Home Page and a Content Page Template.

Exercise 2.1 - Create Templates

  1. Go to AEM > Tools > General > Templates > Summit.
  2. Click the Create Button.
  3. Select Summit Empty Page > Next.
  4. Provide a Template Title - Summit Home Page. Click Create. Click Done.

We will create another template - Summit Agenda Page.

  1. Click the Create Button.
  2. Select Summit Empty Page > Next.
  3. Provide a Template Title - Summit Agenda Page. Click Create. Click Done.

Exercise 2.2 - Add Policy

The page has a layout container by default, this is the root element of the page and will provide responsive capabilities to the page.

As Template Authors, we will be adding another layout container as a child of the root layout container, which content authors can use to add more components to the page.

  1. Select and Edit the Summit Home Page Template.

  2. Click the root layout container and select the Policy option.

  3. In the Allowed Components section, check Layout Container from the General component group.

    Figure 2.1: Layout Container

  4. Click the right icon to the top-right corner to save it.

  5. Click on the Drag components here area of the layout container, press the + icon and select Layout Container.

  6. Click the new layout container and press the lock icon to unlock the layout container.

  7. Click the new layout container and choose the Policy option.

Figure 2.2: Layout Container

  1. In Allowed Components search for the summit group and check the checkbox to include all components from the summit project.
  2. Go to the General group, and check the Content Fragment, Experience Fragment and Layout Container components.
  3. In the Select policy dropdown (on the left column), select SUMMIT Default.
  4. Click right icon on top to save the policy.

Figure 2.3: Policy

Exercise 2.3 - Edit Template

As Template Authors, we want both templates to contain the following components:

  • Image for logo - Should not be editable by content authors.
  • Navigation - Should not be editable by content authors.
  • Image for Banner - for the Home Page only.
  • Layout Container - Authors should be able to add components.
  1. Go to the Home Page Template if you are not already there.
  2. For the Logo, add an Image Component on top of the page.
  3. From the Asset Browser, drag-and-drop the Summit logo called logo-summit.png on the image component.
  4. For the Menu, add the Navigation component after the Image component.
  5. Double-click the Navigation component:
    • Set the Navigation Path to /content/we-retail/us ( we will change it once the site structure is ready )
    • Check Exclude Navigation root
    • Uncheck Collect all child pages
    • Set the Navigation Structure Depth to 1

Figure 2.4: Page Layout

  1. For the Banner, add another Image Component after Navigation.
  2. Drag-and-drop the Summit banner image called summit.jpg from the asset browser.

Exercise 2.4 - Resize Components

Now we want to resize the components as shown in the below image.

Figure 2.5: Page Layout

  1. Click on the logo image component to show its action toolbar and select the Layout option represented by a two-sided arrow icon.

  2. Once clicked, you should see two drag handle dots left and right of the component. Drag the right dot to resize the component to 2 columns.

    Figure 2.6: Component Resizing

  3. Click on the navigation component, select the Layout option and drag right arrow to fit 9 grid columns or exclude 3 grid columns.

Exercise 2.5 - Update Agenda Template

Repeat exercises 2.3, 2.4 and 2.5 to edit and configure the Summit Agenda template. Note: It is similar to the Summit Home Template except that it does not have a banner.

Figure 2.7: Agenda Template

Exercise 2.6 - Enable Templates

Now that our templates are ready, we can add thumbnail images to both templates and enable them.

  1. Go to templates.
  2. Select Home Page Template and click the properties icon.
  3. Click the Upload Image button, browse to the Summit-2019/resources folder in your file system and select the homepagethumbnail.jpg thumbnail.
  4. Click Save & Close.
  5. Select the Home Page Template and click Enable. In the popup dialog, click Enable.

Repeat the process for the Agenda Page Template and the result should be as shown in the following screenshot:

Figure 2.8: Final Template

Exercise 2.7 Create a Site Structure

Now that we have templates, we can create a site structure.

  1. Go to AEM > Sites.
  2. Select Summit and click Create > Page.
  3. Select the Home Page Template.
  4. Provide a title - English.
  5. Provide a name - en. Click Create. Click Done.
  6. Select the English page and create the following pages by selecting the Agenda Page template:
    1. Preconference
    2. Community
    3. Labs
    4. Sessions
    5. Events

Figure 2.9: Final Template

Exercise 2.8 Modify the Navigation Component

We based our navigation component on the we-retail site, but now that we have our own site structure we can change the navigation root to /content/summit/en.

  1. Go to the Summit Home Page Template.
  2. Click to open the navigation component.
  3. Provide a Navigation path - /content/summit/en.
  4. Go to the Agenda Home Page Template.
  5. Click to open the navigation component.
  6. Provide a Navigation path - /content/summit/en.

Figure 2.10: Navigation

Summary

We have used AEM's powerful Template Editor to easily and intuitively create our templates for our website. Now we are ready to create our components so we can add them to the templates.

Lesson 3 - Creating Components

Objective

Although AEM comes with out-of-the-box components, it is often necessary to create your own custom components. In this lesson, we will see how to perform this task.

Goals

  1. Create editable components.
  2. Create a Component Dialog with input fields.
  3. Create a Client Library to add style.

Lesson Context

We need a custom component which content authors can use to add lab details to the page. This component will have two input fields:

  • Lab Title (Text Field)
  • Lab Details (Textarea Field)

Exercise 3.1 - Create a Component

  1. Go to CRXDE Lite - http://localhost:4502/crx/de.
  2. Go to /apps/summit/components/content.
  3. Right Click > Create Component.

Figure 3.1: Component

  1. Press Next > Press OK. Click Save All.
  2. Under labinfo, rename labinfo.jsp to labinfo.html. Click Save All.
  3. Open the labinfo.html file, delete the existing code and add the following code:
<h2> Lab Info </h2>
  1. Click Save All.

Exercise 3.2 - Add a component dialog

  1. Still in CRXDE Lite, navigate to the following path /apps/core/wcm/components/title/v2/title.
  2. Copy the cq:dialog node from the title component.
  3. Paste it under /apps/summit/components/content/labinfo.
  4. Now examine the dialog structure and go to the last items child.

Figure 3.2: Dialog

  1. Delete types , defaulttypes and linkURL under the items tab.

  2. Click on the title node and change the value of the property name to ./labtitle (by default it is ./jcr:title). Click Save All.

  3. Right click on the title node and select the copy option.

  4. Right click the items node above the title node and select paste.

  5. Rename Copy of title to details. Click Save All.

  6. Select the details node and change the value of the name property to ./labdetails.

  7. Change the sling:resourceType to granite/ui/components/coral/foundation/form/textarea.

  8. Change the fieldLabel to Details. Click Save All.

  9. Open labinfo.html and replace the existing content with the following code:

<div class="summit-labinfo">
     <h2>Lab : ${properties.labtitle}</h2>
     <p>${properties.labdetails}</p>
</div>
  1. Click Save All.

Exercise 3.3 - Use the component on the page

  1. Go to the Labs page in the Summit Site.

  2. Add the Lab Info component to the page.

  3. Click on the component and from its action toolbar click on the wrench icon to open its configuration dialog. Once open, you should see the Title and Details input fields in the dialog.

  4. Enter Values:

    Input Values
    Title Getting Started with AEM Development
    Details In this lab you will learn about basics of AEM Development including creating components, templates, dialog box etc.

  5. You should see the details as provided.

    Figure 3.3: Lab Info

Exercise 3.4 - Add Design using Client Library

In AEM, CSS and Javascript are provided using Client Libraries.

  1. Go to /apps/summit/components/content/labinfo.
  2. Right-Click > Create Node.
  3. Provide a Name - clientlibs.
  4. Select the Type - cq:ClientLibraryFolder.

Figure 3.4: Dialog

  1. Click OK to confirm. Click Save All.

  2. Click on the clientlibs folder and add the following multi-value property:

    • Name : categories
    • Type : String
    • Value : Note : Keep blank for now
    • Multi : Press on Multi button

  3. Click Add and add the following properties:

    • summit.base

    • summit.components.labinfo

      Figure 3.5: Dialog

  4. Click OK. Click Save All: you should see as follows:

    Figure 3.6: Dialog

  5. Now create a file css.txt in the clientlibs folder. Save the changes.

  6. Open the file css.txt and add the following code:

style.css
  1. Create another file style.css with the following code:
.summit-labinfo {
    background-color: #000;
    color: #fff;
    padding:10px;
}
  1. Save the changes, and open the Labs page to view the changes.

Figure 3.7: Final Output

Summary

In this lesson we got started creating the basics of our own custom components including setting up the required structures in the repository. In the next lesson we will build on this by using the Core Components to customize our site.

Lesson 4 - Using the Core Components

Objective

Core Components provide robust and extensible base components, built on the latest technology and best practices. Core components make page authoring more flexible and customizable, and extending them to offer custom functionality is simple for the developer.

In this lesson we will learn how to leverage the Core Components to customize our site.

Goals

  1. Learn about the Core Components.
  2. Learn about using and configuring the Tabs and Carousel components.
  3. Learn about the dialogs, the HTML rendering, the public CSS classes and the JSON rendering of the Core Components.
  4. Learn about styling the Core Components.

Lesson Context

In this lesson, we will recreate the FAQ page from the Summit website at https://summit.adobe.com/na/faq by using and styling the following Core Components:

  • title

  • text

  • tabs

  • carousel.

    Figure 4.1: FAQ page

Exercise 4.1 - Creating the FAQ page with title and text

In this exercise we will create the FAQ page and add a title and a text component.

  1. Go to AEM > Sites.
  2. Create a page below Summit > English, based on the Agenda Page template, with the title: FAQ.
  3. Open the page.
  4. Add a title component and set the title to Have a question?.
  5. Add a text component and set the text to Find answers to what you want to know about the conference..

Exercise 4.2 - Adding a tabs component

As an accordion component is not yet available as a Core Component, we will use the tabs component to display the content in a similar way to the Summit FAQ page:

  1. Add a tabs component to the page.
  2. Open the tabs dialog:
    1. Set the title of the first tab to Pricing information.
    2. Set the title of the second tab to Registration information.
    3. Save the dialog.
  3. Drag-and-drop a text component to the first tab.
  4. Edit the text component inline and copy-and-paste the content from the Summit FAQ page:
What is the registration fee for Summit?
Are there any discounts for groups?
Can I qualify for more than one discount?
I have a promo code. How can I register?
I received a promo code after I registered. What should I do?
My promo code isn't working. What do I do?
How can I pay for Summit?
Are there discounts or Early Bird pricing for Preconference Training?
  1. Select the tabs component. In the toolbar click the Select Panel action and select the second tab from the popover.

Figure 4.2: tabs-select-panel

  1. Drag-and-drop a text component to the second tab and copy-and-paste the content from the Summit FAQ page (https://summit.adobe.com/na/faq) .
What are the registration policies/terms and conditions?
What is the cancellation policy?
What’s included in my registration fee?
Are meals included with my full conference pass?
Is there an additional charge for Preconference Training?
Does the registration fee include air transportation and hotel accommodations?
Can I purchase a guest social pass to the evening social events?
Where is the Summit meeting space located?

Exercise 4.3 - Adding a carousel component

We will add a carousel component containing the three images used for the Summit FAQ page. We will set the slides to automatically transition every four seconds:

  1. Drag-and-drop a carousel component below the tabs component. Be careful not to add it to the tabs component.
  2. Drag-and-drop an image component inside the carousel.
  3. Drag the carousel1.jpg image from the asset finder and drop it onto the image component.
  4. Drag-and-drop an image component below the first image.
  5. Drag the carousel2.jpg image from the asset finder and drop it onto the image component.
  6. Drag-and-drop an image component below the second image.
  7. Drag the carousel3.jpg image from the asset finder and drop it onto the image component.
  8. Open the Carousel dialog and select the Properties tab: check Automatically transition slides and set the Transition Delay to 4000 milliseconds. Save the changes.
  9. Display the first slide: select the carousel component, click the Select Panel action in the toolbar and select the first slide from the popover.
    Note: From the popover you can also move a slide to a different position.

Figure 4.3: carousel-select-panel

Exercise 4.4 - Putting the two components beneath each other

The carousel is now placed below the tabs. We will use the layout mode to put them beneath each other:

  1. Activate the Layout mode: in the page Toolbar select Edit > Layout.
  2. Select the tabs component and resize its width to six columns.
  3. Select the carousel component and resize its width to six columns.
  4. In the Page Information menu (Page toolbar > top left icon) select View as published to view the page as a website visitor.

The FAQ page looks as follows:

Figure 1: FAQ page

Exercise 4.5 - Inspecting the rendered HTML of the tabs component

We will have a look at the HTML of the tabs component, especially the CSS classes which are based on the BEM format, which is used to ease styling.

  1. In the page, when viewed as published, hover the tabs component, right-click and select Inspect in the dropdown menu of the browser.
  2. The HTML looks as follows:
  1. The CSS classes used for the tabs component are:
    cmp-tabs, cmp-tabs__tablist, cmp-tabs__tab, cmp-tabs__tabpanel and cmp-tabs__tabpanel--active.

Exercise 4.6 - Outputting the carousel component as JSON

Each Core Component can output a JSON rendering by simply adding the model selector and the json extension to the component path. The JSON can be used for example in a Single Page Application (SPA).

  1. In your browser, browse to the following URL:
    http://localhost:4502/content/summit/en/faq/jcr:content/root/responsivegrid/tabs.model.json
  2. The JSON looks as follows:
{
  ":itemsOrder": [
    "item_1548670181757",
    "item_1548670242858"
  ],
  ":items": {
    "item_1548670181757": {
      "columnClassNames": {
        "text": "aem-GridColumn aem-GridColumn--default--12"
      },
      "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
      "columnCount": 12,
      ":items": {
        "text": {
          "text": "<p><li><a>What is the registration fee for Summit?</a></li>\r\n<li><a>Are there any discounts for groups?</a></li>\r\n<li><a>Can I qualify for more than one discount?</a></li>\r\n<li><a>I have a promo code. How can I register?</a></li>\r\n<li><a>I received a promo code after I registered. What should I do?</a></li>\r\n<li><a>My promo code isn't working. What do I do?</a></li>\r\n<li><a>How can I pay for Summit?</a></li>\r\n<li><a>Are there discounts or Early Bird pricing for Preconference Training?</a></li>\r\n</p>\r\n",
          "richText": true,
          ":type": "summit/components/content/text"
        }
      },
      ":itemsOrder": [
        "text"
      ],
      ":type": "wcm/foundation/components/responsivegrid",
      "cq:panelTitle": "Pricing information"
    },
    "item_1548670242858": {
      "columnClassNames": {
        "text": "aem-GridColumn aem-GridColumn--default--12"
      },
      "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
      "columnCount": 12,
      ":items": {
        "text": {
          "text": "<p><li><a>What are the registration policies/terms and conditions?</a></li>\r\n<li><a>What is the cancellation policy?</a></li>\r\n<li><a>What’s included in my registration fee?</a></li>\r\n<li><a>Are meals included with my full conference pass?</a></li>\r\n<li><a>Is there an additional charge for Preconference Training?</a></li>\r\n<li><a>Does the registration fee include air transportation and hotel accommodations?</a></li>\r\n<li><a>Can I purchase a guest social pass to the evening social events?</a></li>\r\n<li><a>Where is the Summit meeting space located?</a></li>\r\n<li><a>How do I access my account, change personal information, and add registration packages?</a></li>\r\n<li><a>What is the age requirement for attending Summit?</a></li>\r\n<li><a>What kind of identification do I need to gain access to any Las Vegas lounge/bar/club?</a></li>\r\n<li><a>Will I receive confirmation of my Summit registration?</a></li>\r\n<li><a>What is the substitution policy?</a></li>\r\n<li><a>Where can I find the conference agenda?</a></li>\r\n<li><a>What are the onsite registration hours?</a></li>\r\n<li><a>What if I lose my badge onsite?</a></li>\r\n<li><a>What is the tax ID number?</a></li>\r\n<li><a>How do I obtain a W-9 form?</a></li>\r\n<li><a>What if I need a visa application?</a></li>\r\n<li><a>Where do I pick up my badge?</a></li>\r\n<li><a>I am a member of the press. Are press passes available?</a></li>\r\n</p>\r\n",
          "richText": true,
          ":type": "summit/components/content/text"
        }
      },
      ":itemsOrder": [
        "text"
      ],
      ":type": "wcm/foundation/components/responsivegrid",
      "cq:panelTitle": "Registration information"
    }
  },
  ":type": "summit/components/content/tabs"
}

Exercise 4.7 - Styling the Core Components

Now that we know which CSS classes are available for styling, we will:

  • Style the tabs component to make the tab titles bold.
  • Style the carousel to hide the buttons below the slides.
  1. Inspect the tabs and the carousel HTML and find out the public CSS classes that should be styled.
  2. In CRXDE Lite open the custom client library style.less file of our site:
    /apps/summit/clientlibs/clientlib-site/less/style.less
  3. Set the font of the tabs titles to bold by adding the following code to the style.less file:
  1. Hide the buttons below the slides of the carousel by adding the following code to the style.less file:
  1. Save the file.
  2. Refresh the page in your browser and notice the changes.

Summary

In this lesson we familiarized ourselves with the Core Components and saw how powerful they can be when adapted for our own project.

Next Steps

If you have successfully performed all the above steps and if time permits, you can find here some small exercises that will help you dive deeper into the Core Components:

  • Set the transition delay of the carousel to 2000 milliseconds.
  • Find two ways to add a third tab to the tabs component.
  • Find two ways to delete a tab.
  • Find two ways to move a tab.
  • Set the second tab to be the active item.
  • Open the policy dialog of both the carousel and the tabs component and look at the available configuration options.
  • Browse the Core Components project in Github (see Appendix below).

Before moving on to the next lesson, we will install a package that contains the FAQ page as it should be at the end of this lesson. This is not needed if you have successfully performed all the steps described in this lesson.

  1. Open the Package Manager: AEM > Tools > Deployment > Packages.
  2. Upload the summit-aemdev-lesson4.zip file from the Summit-2019/resources directory of your file system.
  3. In the package toolbar click Install. In the menu, click Install.

Additional Resources

Appendix

This appendix contains a few links to continue discovering the Core Components and the Archetype projects.

Core Components developer docs and source code:
https://github.com/adobe/aem-core-wcm-components

Core Components documentation on helpx:
https://helpx.adobe.com/experience-manager/core-components/using/introduction.html

Core Components Library: http://opensource.adobe.com/aem-core-wcm-components/library.html

Code for the Carousel:
https://github.com/adobe/aem-core-wcm-components/tree/master/content/src/content/jcr_root/apps/core/wcm/components/carousel/v1/carousel

Archetype project:
https://github.com/Adobe-Marketing-Cloud/aem-project-archetype\

Have fun with the Core Components!

Lesson 5 - Extending the Core Components

Objective

In this lesson we will get an overview what extension points are available when using the Core Components to meet special project requirements.

Goals

  • Learn how to customize the HTML output.
  • Learn how to create a Model implementations with the delegation pattern.
  • Learn how to extend the author dialog.
  • Combine two or more Core Components for a new Component.

Lesson Context

In this lesson we will extend the Summit home page example with a speaker overview on the home page. After this exercise the main speakers of the summit will be displayed as shown in the image below.

Figure 1: Speaker panel

For this purpose, we will use the List component of the Core Component Library.

Exercise 5.1 - Create the speaker pages and add the speakers list to the Summit home page

In this exercice we will install an AEM package that contains the speaker pages for Satya Nadella, Shantanu Narayen, Reese Witherspoon and Drew Brees. The pages will be available below /content/summit/speaker and will each provide a title, a subtitle, a description and an image. We will also add a list component to the home page that is based on the speaker pages.

  1. Go to AEM > Tools > Deployment > Packages.
  2. Install the summit-lesson5-speakers-pages.zip package:
    1. Click Upload Package.
    2. In the dialog click Browse.
    3. Browse to the Summit-2019/resources folder and select the summit-lesson5-speakers-pages.zip file. Click OK.
    4. Select the package and click Install.
  3. Open the home page of the Summit page (http://localhost:4502/editor.html/content/summit/en.html).
  4. Drag-and-drop a List-Summit component below the Summit banner.
  5. Open the dialog.
  6. As Build List Using select Fixed list.
  7. As Options for Fixed List add the following pages:
    • /content/summit/en/speaker/satya-nadella
    • /content/summit/en/speaker/shantanu-narayen
    • /content/summit/en/speaker/reese-witherspoon
  8. Save the dialog.

Right after the Summit banner we can see a list with three speakers:
Figure 1: Speaker panel

Exercise 5.2 - Create an overlay of the List item HTL-Template to customize the HTML output

  1. Go to CRXDE Lite http://localhost:4502/crx/de/index.jsp and browse to the List component of the Core Component Library at /apps/core/wcm/components/list/v2/list.
  2. Copy the item.html markup file and paste the file inside of the summit apps folder at /apps/summit/components/content/list.
  3. Open the file in the CRXDE editor and copy the content from the File: item.html.
  1. Create a client-side library folder for the summit list component with the category summit.site and put the files File 2: speaker.js and File 3: speaker.less in this folder. Proceed as follows:
    1. Select the /apps/summit/components/content/list node.
    2. Right-Click > Create Node
    3. Provide a Name - clientlib-speaker
    4. Select the Type - cq:ClientLibraryFolder
    5. Click OK to confirm. Click Save All
    6. Click on the clientlibs folder and add the following multi-value property:
      • Name : categories
      • Type : String
      • Value : Note : Keep blank for now
      • Multi : Press on Multi button
    7. Click Add and add the following property
      • summit.site
    8. Click OK. Save the changes.
    9. Create a file js.txt in the clientlibs folder. Add the string speaker.js to the file content. Save the changes.
    10. Create a file css.txt in the clientlibs folder. Add the string speaker.less to the file content. Save the changes.
    11. Create a file speaker.js in the clientlibs folder. Add the content of the file File 2: speaker.js to the file. Save the changes.
    12. Create a file speaker.less in the clientlibs folder. Add the content of the file File 3: speaker.less to the file. Save the changes.

Exercise 5.3 - Extend the List item model

  1. Open the project in Eclipse.
  2. Open the Sling Model Class with the name SpeakerList in the package com.adobe.training.summit.core.models. You can also find a copy of the Java Class in the resources folder at File 3: SpeakerList.java.
  3. Extend the constructor of the SpeakerListItem class (line 52) to populate the subtitle and image source.

Example implementation:

  1. Deploy the bundle with the maven command mvn -PautoInstallBundle clean install.
  2. In CRXDE Lite change the HTL-Template item.html from exercise 5.2 to display the subtitle and image source for the speaker list. Remove the HTML comment for the image and subtile section, so you will end up with the following HTL template:

When you open the Homepage of the Summit page at http://localhost:4502/content/summit/en.html you can see the speaker list with the extended image and subtitle informations.
Figure 2: Copy Dialog

Exercise 5.4 - Extending the edit dialog

Sometimes it's also necessary to extend the existing edit dialog of a core component. For example, if a feature needs to be turned off for some use cases. In this exercise we will extend the edit dialog of the list component so that authors can control if the subtitle of a speaker should be displayed or not in the list.

  1. Browse to the existing edit dilalog of the list component in CRXDE Lite at the path /apps/core/wcm/components/list/v2/list/cq:dialog.

  2. Copy the node by opening the context dialog in CRXDE Lite (with a right mouse click) and click on the copy command.
    Figure 3: Copy Dialog

  3. Paste the copied node at the summit list component path at /apps/summit/components/content/list.

  4. Expand the node structure of the dialog up to the tab level.
    Figure 4: Dialog Tabs

  5. Delete the listSettings node (again with the command in the context menu) and rename the remaining itemSettings node in speakerSettings. Change the jcr:title property of that node in Speaker Settings.

Figure 5: Speaker Settings Node

  1. Under the speakerSettings node rename the linkItems subnode in showSubtile and remove all the other nodes at the same level.

  2. Edit the properties of the showSubtitle node with the following values:

    Name Type Value
    fieldDescription String Show subtitle of the Speaker
    name String ./showSubtitle
    sling:resourceType String granite/ui/components/coral/foundation/form/checkbox
    text String Show subtitle
    uncheckedValue String false
    value String true

    Figure 5: Speaker Settings

    Save the changes by clicking on the Save All menu item in upper left of CRXDE Lite.

    With the help of the Resource Merger feature the new node structure is getting merged with the existing dialog of the list component.

  3. Change the item.html template from the former exercise in CRXDE Lite at the path /apps/summit/components/content/list/item.html and add a data-sly-test condition to the subtitle section. The final section should look like.

  1. Open the Homepage of the summit page at http://localhost:4502/editor.html/content/summit/en.html: the subtitle of the speaker is removed.
    Figure 6: Speaker list without subtitle

  2. Open the edit dialog of the list component: there is a new tab Speaker Settings where an author can control if the subtitle should be visible or not.
    Figure 7: Speaker list edit dialog

Summary

In this lesson we saw some practical examples of extension points that we used to further customize our site project by customizing HTML output and extending a model.

Next Steps

In the next lesson we will learn how to reduce the amount of needed components in AEM by making use of the new Style System which gives authors the very flexible tool to change the look and feel of a component.

Additional Resources

For an example how to composite two or more components to a new component please have a look at the Teaser Component of the Core Components.

Appendix

Lesson 6 - Using the Style System

Objective

The new Style System is a powerful and easy way to customize the look and feel of a component on a website and finally to reduce the amount of needed components in an AEM project. In this lesson we will use the Style System to further customize our site by applying custom styles and combining them to make our components even more flexible.

Goals

  • Learn how to apply a custom style to a component
  • Learn how to combine styles from different groups to get an even more flexible component

Lesson Context

In the first exercise we will create a style to change the grid system for the speaker overview. Afterwards the author will be able to control how many items should be displayed in a row.

In the second exercise we will continue by combining the styles of different style groups, which will add even more flexibility in the rendering options available for the component.

Exercise 6.1

  1. Open the home page template in the template editor http://localhost:4502/editor.html/conf/summit/settings/wcm/templates/summit-home-page/structure.html

  2. Click on the policy icon of the List Component
    Figure 1: List Policy

  3. Open the Styles tab of the content policy
    Figure 2: Style Tab

  4. Set the Policy Title to speaker policy. Add a style group and call it Grid. Add 2 styles as in the table below. Save the content policy setting by clicking the Done button.

    Style Name CSS Classes
    3 Column grid-3
    4 Column grid-4

    Figure 3: Style Settings

  5. Modify the existing CSS rules from the previous lesson by opening the file http://localhost:4502/crx/de/index.jsp#/apps/summit/components/content/list/clientlib-speaker/speaker.less in CRXDE Lite. Copy-and-paste the content from the File 1: speaker.less of the lesson6 resources folder.

    Please note the removed grid-template-columns property from the cmp-list selector. This property is now used in two new rules:

  6. Open the home page in edit mode again by browsing to the following URL: http://localhost:4502/editor.html/content/summit/en.html. A new style icon will be visible in the action bar of the List component. Figure 4: Action Bar item

  7. Click on the Styles icon and select the 3 Column style: the speakers are displayed in 3 columns.

  8. Add an additional item to the speaker list by opening the edit dialog of the list component and adding the path /content/summit/en/speaker/drew-brees to the fixed list of pages.

    Figure 5: Style Icon

  9. Select the 4 Column style: the speakers are displayed in 4 columns. Figure 6: Style Icon

More information on how the Style System works can be found on its manual page

Exercise 6.2

In this exercise we will combine two styles to showcase how flexible the list component for the speaker overview can be when it is used together with the Style System. To achieve this, we will combine the column style from the previous exercise with another style. With this style it will be possible to control the position of the speaker title.

  1. Open again the Template Editor for the Homepage by accessing the URL http://localhost:4502/editor.html/conf/summit/settings/wcm/templates/summit-home-page/structure.html in the browser.

  2. Edit the content policy for the List component as in step 2 of the previous exercise and click on the Styles tab.

  3. Add a new Style Group with the name Position to the existing style of the list component and add the following styles:

    Style Name CSS Classes
    Top top
    Bottom bottom

    The dialog should look like in the following screenshot
    Figure 7: Position Style Group

  4. Save the policy.

  5. Edit the CSS file at /apps/summit/components/content/list/clientlib-speaker/speaker.less in CRXDE Lite:

    • Remove the rule bottom: 0px; below .speaker__item-container {
    • Add the following rules at the end of the file:

  6. In addition to the Grid selection the action toolbar of the List component now also provides the position group. By combining the Grid and Position group there are now 4 possible renderings for the speaker list.
    Figure 8: Action Bar Dialog

Summary

We have seen in this final lesson how flexible the Style System is and how it can make our components even more useful. By adapting the appearance of our components, it is possible to eliminate the need to create custom components for every variation.

Additional Resources

Appendix