Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 2
Introduction
Welcome to Divisional Portfolio Websites AEM Content
Author Training. Today’s training session is designed to teach you skills to update content on your site and configure components built for, and used on, your divisional website. Using the skills practiced in the lessons included here, you will be able to update current pages and add new pages to your site. Techniques used in the lessons are the simplest methods for achieving results. This training guide is supplemental to Abbott training on the AEM platform provided in “Adobe AEM CMS User Guide v4.ppt,” and Adobe’s online learning modules, found at adobe-elearning.abbott. Both these resources should be taken in advance of content in this document.
Additional Help For ongoing support: 1. Call Global Service Desk to create ITSM ticket. 2. Ask service desk analyst to assign ticket to “ADM-
GLBL-COG Commercial Digital Non-Critical App Support” for any AEM/Digital Tools requests/issues.
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 3
Table of Contents
Introduction ....................................................................................................... 2 Module 1: Manage Images and Text ................................................................. 4
Lesson 1: Manage Images and Text in Section Panel With Navigation ........ 5 Lesson 2: Validate changes in the publish instance .................................... 10
Module 2: Edit the Hero Panel ........................................................................ 11
Lesson 1: Edit the Hero Panel Component ................................................. 12 Module 3: Manage Events ............................................................................. 16
Lesson 1: Create Events ............................................................................. 17 Module 4: Manage FAQs ................................................................................ 19
Lesson 1: Administer FAQs ......................................................................... 20
Lesson 2: Add Items in FAQ Component ................................................... 21 Lesson 3: Delete FAQs ............................................................................... 23
Lesson 4: Add FAQ Tags ............................................................................ 24
Module 5: Manage Articles.............................................................................. 26 Lesson 1: Create Articles ............................................................................ 27
Module 6: Manage Pages ............................................................................... 29
Lesson 1: Add Product and Edit of an Existing Product Detail Page ........... 30 Lesson 2: Add or Delete Products From the Product Loop Page ................ 36
Lesson 3: Delete a Product from Product Listing ........................................ 39
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 4
Module 1: Manage Images and Text
Introduction This module provides information on changing image and
headline within a component on a current page. You will work with a division-specific component used on the sample site, the DAM, and foundational AEM skills to navigate and maneuver within the AEM platform.
Module Objectives
At the completion of this module, you will be able to:
Navigate to a page
Identify the component desired within the page
Change the existing image to a new one
Edit text in the heading and subheading
Change color theme used on the component
Add another button and its destination
Verify the changes within publish instance
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 5
Lesson 1: Manage Images and Text in Section Panel With Navigation
Introduction In this lesson, we will demonstrate how to update images
and text in the Section Panel
Step Action
1. Open your Internet browser using Chrome / Firefox Note: You should be using the latest Chrome version for best performance
2. Type https://author-abbott-stage3.adobecqms.net/projects.html#
3. Click AEM WCM page displays
4. From the “left pane” click ; this will open the navigation tree Note: Click the “+” sign next to the name to open the contents under that name
5. Click ; now click the “+” sign to open Division Sites Note: Click the “+” sign next to the name to open the contents under that name
6. Click “+”, , then click the “+” sign on
7. Click “+” , then look for “Divisional Site Training Student #” where # is replaced by student number”
8. From , click the “+” sign to open Divisional Site Training Student Note: Click the “+” sign next to the name to open the contents under that name
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 6
9. Click on Pages; from right pane area Home | Vascular Disease Treatment select the page by double-clicking the number Note: You may have to refresh right pane by
clicking
10. Select Edit from the Section Panel With Navigation; the dialog box displays
11. Click on background image tab
12. Click to remove image Note: New images can be selected from the left pane
13. From left pane, select the browse button from Section Panel With Navigation
14. Scroll to Division Site Training, then click Student
15. Click banners, then scroll and select the Mount Everest image
16. Click-drag image from left pane into Background Image tab of the Section Panel With Navigation
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 7
17. Click OK
18. Click Magnifying icon to preview page with new image
19. From Section Panel With Navigation, click Edit Note: Section Panel With Navigation dialog displays
20. Click Panel Details
21. Edit Heading Note: Use all UPPERCASE
22. Click OK
23. Click magnifying icon to preview page with new image
24. From Section Panel With Navigation, click Edit Note: Section Panel With Navigation dialog displays
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 8
25. From the Sub Heading Color dropdown, change White color to another color
26. Click OK Note: Confirm via edit mode the Sub Heading color changed based on new selection
27. From Section Panel With Navigation, click Edit
28. Click to add another navigation button Note: Button dialog displays
29. From the Button Link dropdown navigate to desired page for linking
Note: For this exercise select the product page from Divisional Site Training Student
30. Enter Button Text information
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 9
Note: Text should be ALL CAPS, type “OUR PRODUCT”
31. Click OK Note: Confirm via edit mode the new button appears to the right of the original 3 buttons
32. From Section Panel With Navigation, click Edit
33. Click Color Theme and Alt texts
34. From Theme Color dropdown select a color
35. Click OK Note: Confirm via edit mode that the Heading text and background colors of the buttons match the color selected
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 10
Lesson 2: Validate changes in the publish instance
Introduction In this lesson, we will demonstrate how to verify that
changes are implemented in the published instance. Note: It may take 10-15 minutes for the changes to appear on the published instance. This is not unusual for AEM implementations.
Step Action
1. Select AEM WCM tab
2. Click
3. Select page to be published
4. Click
5. Copy URL starting at: /content/bss/divisionalsites/<global/reusable/divsitetrainingmaster/en-us>/pages Note: Substitute above <divsite Student#>
6. Open a new browser; type in the following: Stage3.divisionsite.abbott.com//content/bss/divisionalsites/global/reusable/divsitetrainingmaster/en-us/pages/index.html
7. Press Enter to validate changes
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 11
Module 2: Edit the Hero Panel
Introduction This module demonstrates how to work with one of the
most frequently used components: the Hero Panel. Work in this module builds on skills from the previous exercise.
Module Objectives
At the completion of this module, you will be able to:
Locate Hero Panel within the menu
Replace a headline
Replace a subhead
Change an image
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 12
Lesson 1: Edit the Hero Panel Component
Introduction In this lesson we will demonstrate how to edit the Hero
Panel Component.
Step Action
1. Open your Internet browser using Chrome / Firefox Note: You should be using the latest Chrome version for best performance
2. Type https://author-abbott-stage3.adobecqms.net/projects.html#
3. Click , AEM WCM page displays
4. From the “left pane” click ; this will open the navigation tree Note: Click the “+” sign next to the name to open the contents under that name
5. Click ; now click the “+” sign to open Division Sites Note: Click the “+” sign next to the name to open the contents under that name
6. Click “+”, , then click the “+” sign on
7. Click “+” , then look for “Divisional Site Training Student #” where # is replaced by student number”
8. From , click the “+” sign to open Divisional Site Training Student Note: Click the “+” sign next to the name to open the contents under that name
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 13
9. Click on Pages; from right pane area Home | Vascular Disease Treatment select the page by double-clicking the number Note: You may have to refresh right pane by
clicking
10. Select Edit from the Hero Panel component; the dialog box displays
11. From the Individual Panel, copy URL Note: The Hero Panel component on the page actually references an individual panel that is placed elsewhere in the site. Usually this is utils/Panels/HeroPanel/<panel>
12. Select AEM WCM tab
13. Navigate to Hero Panel and highlight from the left pane:
Note: Reference URL in Step11
14. From the right pane, select and double-click on Home-Panel-1
15. Right-click in the area of text or picture
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 14
Note: The following context menu displays
16. Click Edit Note: Dialog box displays
17. Select Hero Image tab
18. Click to remove image Note: New images can be selected from the left pane
19. From left pane, select the browse button
20. Scroll to Division Site Training, then click Student
21. Click banners, then scroll and select the Mount Everest image
22. Click-drag image from left pane into background image tab of the Hero Image
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 15
23. Click Carousel tab
24. Edit Heading Text
25. Edit Sub Heading Text
26. Click OK
27. Click for Home-Panel-1 Note: Activate dialog box may appear if image is not published
28. Return to Home | Vascular Disease Treatment page
29. Refresh Chrome browser Note: Review new image and text
30. Click magnifying icon to preview page with new image
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 16
Module 3: Manage Events
Introduction This section provides information on adding new events to the events section on the sample site. We will use a copy/edit technique to simplify the process of adding a new event.
Module Objectives
At the completion of this module, you will be able to:
Add a new event list events that already exist on the site
Copy and rename an existing page
Modify details on copied page to create the new event
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 17
Lesson 1: Create Events
Introduction In this lesson, we will learn how to create Events and the Event Calendar.
Step Action
1. From left pane, choose Pages; scroll to Training Feature Events
2. From left pane select Training Feature Events
3. From right pane, select any Event to copy
4. Click
5. Click Note: Copy dialog box displays, where you can rename your “Page”
6. Type Page Name Note: * Indicates required field. When naming page, use small characters Note: Spaces and characters not allowed
7. Click on dialog box to save
8. Double-click number on the new “Page” you just created
9. Click Edit for “Featured Events”; article text dialog box displays
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 18
Note: Insert or change Featured Events as required * Indicates required field
10. Click OK; page will display to show changes to Featured Events
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 19
Module 4: Manage FAQs
Introduction This module provides information on adding and deleting an FAQ to the existing FAQ page of the sample site. It uses the divisional FAQ component. This exercise includes tagging. Tagging allows FAQs to be organized by category so site users get FAQs appropriate to their question. Skills for tagging are also used within product pages.
Module Objectives
At the completion of this module, you will be able to:
Add a new FAQ
Delete an existing FAQ
Navigate to tag menu
Tag FAQs by category
Delete a tag
Create a new tag category
Reorder FAQs
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 20
Lesson 1: Administer FAQs
Introduction In this lesson, we will demonstrate how you maintain and add the
following items in the FAQ component based on your Division:
Edit FAQ questions and answers
Delete a category
Assign category
Step Action
1. From left pane, select Pages
2. From right pane, double-click on Training-FAQ Note: Training-FAQ page displays in new tab
3. From “Accordion,” click Edit Note: Dialog box will display
4. From Select the categories for Accordion, you can do the following:
Delete category
Edit question and answer
Note: Ensure Need Accordion box is checked
5. Click OK
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 21
Lesson 2: Add Items in FAQ Component
Introduction In this lesson, we will demonstrate how you maintain and add
the following items in the FAQ Component based on your Division:
Add FAQ question and answer
Step Action
1. From left pane, select Pages
2. From right pane, double-click on Training-FAQ Note: Training-FAQ page displays in new tab
3. From Sidekick, drag and drop the Accordion component to an empty area below the Accordion container Note: The empty area is designated by dash-line border and the text “drag components or assets here”
4. From “Accordion” just added, click Edit
Note: Dialog box will display
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 22
5. From “Select the categories for Accordion,” you can do the following:
Add category
Add question and answer
Note: Make sure “Need Accordion?” box is checked
6. Click OK
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 23
Lesson 3: Delete FAQs
Introduction In this lesson, we will demonstrate how you maintain the
following items in the FAQ component based on your Division:
Delete FAQ question and answer
Step Action
1. From left pane, select Pages
2. From right pane, double-click on Training-FAQ Note: Training-FAQ page displays in new tab
3. Click just above the question-and-answer pair desired for deletion
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 24
Lesson 4: Add FAQ Tags
Introduction In this lesson, we will learn how to add and remove the
tags used to create the categories for FAQs
Step Action
1. From AEM menu bar, click
2. From left pane, expand BSS Note: In production, content authors will modify based on division
3. Expand Divisional Site
4. Select FAQ Category in left pane
5. Click from right pane Note: Create Tag dialog box displays
6. Insert Title Note: * Indicates required field
7. Insert Name Note: * Indicates required field. Name must be lowercase and no spaces or special characters
8. Type in Description
9. Click Create
10. Refresh Training – FAQ by Note: Verify the tag just added in Step 9 please confirm
11. Return to AEM WCM
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 25
12. Navigate to FAQ page
13. Scroll down to Accordion component
14. Click Edit Note: Verify in the dialog box that the new tag added in Step 9 appears
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 26
Module 5: Manage Articles
Introduction This module provides information on how to add a new article to the sample site. It uses the technique of copy/rename/edit to quickly create a new page using the same layout as other article pages.
Module Objectives
At the completion of this module, you will be able to:
Copy an existing article page and modify it to create a new article detail page
Add a new article to appear on the Article Listing Page
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 27
Lesson 1: Create Articles
Introduction In this lesson, we will learn how to create a new article page by
copying an existing article page.
Step Action
1. From Pages, scroll down left pane to Training Articles
2. Select Training Articles
3. From the right pane, select an Article
4. Click Copy from control panel
5. Click Paste Note: Dialog box displays
6. Edit Article Name
Note: Name must be lowercase and only contains dash or underscore and no spaces
7. Click Copy
8. From right pane, Open Page created in Step #6
9. Click Page Properties tab on Sidekick
10. Double-click Page Properties
11. Page Properties dialog box displays
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 28
12. Edit Title, under Basic Tab
13. Click OK; page will refresh to show the new Title entered in Step 12
14. Edit the Banner component refer to Headline lesson for specific steps
15. From Article Page Component, click Edit
16. Edit the following dialog box:
17. Click OK
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 29
Module 6: Manage Pages
Introduction This module provides information on how to load a page to the sample site. It uses the technique of copy/rename/edit. In this exercise, we will work with a product page. The same technique can be used with non-product pages. On product pages, the Product Loop is also used to organize the product pages by category. Tagging is also used on product pages, which allows products to show correctly when the product filter is used.
Module Objectives
At the completion of this module, you will be able to:
Create a new product page by copy/rename/edit of an existing product page
Tag a page
Use product loop to organize where the product page appears on the site
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 30
Lesson 1: Add Product and Edit of an Existing Product Detail Page
Introduction In this lesson, we will learn how to add and edit a Product Detail Page.
Step Action
1. From left pane, select the parent page for your new page
2. From right pane, select product page Note: Select a page similar to the one you want to create
3. Click on control bar
4. Click on control bar Note: Dialog box displays
5. From dialog box, enter Copy Name
6. Click Copy Note: New “named” Detail Page appears in right pane
7. Double-click on New Detail Page
8. From sidekick, click second tab:
Note: Page Properties dialog box displays
9. From Page Properties, change Title
10. Click OK
11. From banner, click Edit
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 31
Note: Edit Component dialog box displays
12. Insert or change Banner Text
13. From dropdown, change Banner Color
14. Click OK
15. From Product Details, click Edit
Note: Content Author may need developer help for “Selection of Type” or “Selection of Product Variation”
16. Edit component displays, then click Text Tab
17. Insert or change Product Detail Description
18. Click Images tab Note: Images are located in the left pane
19. Click and drag image from left pane into the right pane
20. Click OK
21. From Multi Product Image, click Edit Note: Images dialog box displays
22. Click and drag images into Image areas Note: Expand Images dialog box to see all images for
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 32
replacement or adding
23. Click OK Note: Next, let’s edit Divisional Tabs
24. Scroll to Divisional Tabs Note: In performing this next technique, maintain Abbott Standards
25. Click Edit; Configure Tabs dialog box displays
26. Change Tab Text
Note: * Indicates required field; can change order if required
27. Click OK Note: Next, let’s edit the Rich Text Editor
28. Select appropriate tab to edit
29. Scroll to Rich Text Editor Note: In performing this next technique maintain Abbott Standards
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 33
30. Click Edit, Rich Text dialog box displays
31. Edit description as required
32. Click OK Note: Next, let’s edit Static Product
33. Scroll to Static Product Note: In performing this next technique maintain Abbott Standards
34. Click Edit; State Product dialog box displays
35. Choose General tab, edit Title and Product Information
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 34
36. Click OK Note: Next, let’s edit Related Products
37. Scroll to Related Products
38. Click Edit; Related Products dialog box displays
39. Insert Product Title Note: Use ALL CAPS for Product Title
40. Click OK
41. From sidekick, Click tab Note: Page Properties dialog box displays
42. From Basic tab, edit the following:
Insert Title
Record Tags/Keywords path
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 35
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 36
Lesson 2: Add or Delete Products From the Product Loop Page
Introduction In this lesson, we will demonstrate how to add or delete Products from the Product Loop page
Step Action
1. From left pane, select appropriate Category page below pages Note: Category page would be of type Product Category Page Template
2. From right pane, click
3. Create New Page via Product Individual Page Template (for Product Listing)
Note: Create a page for each product you want to list in the product loop component. These pages are not the Product Detail pages. The pages you are constructing are not seen by the end user but are a means of populating the Product Loop component.
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 37
The new page contains by default a Product Information component. Do not add any additional components to this page.
4. From right pane, double-click new page just created
5. Click Edit from the Product Information component
Note: Dialog box displays
6. Supply the following information:
From the Type Select tab, insert the below information:
o Product Title o Tag-click dropdown, navigate to BSS tab, then
select tag to categorize the product
Note: More than one tag can be selected
7. Supply the following information:
From the Type Select tab, insert the below information:
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 38
o Product Description – short description
o Click Product path ; navigate to Product Detail page
Click OK
8. Supply the following information:
From Product Image tab, drop and drag image from left pane
Click OK Note: Repeat Steps 1 to 9 for each product to be displayed
9. From AEM WCM, click to publish Product Individual Page
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 39
Lesson 3: Delete a Product from Product Listing
Introduction In this lesson, we will demonstrate how to remove a product from the product listing.
Step Action
1. Navigate to folder where products are listed
2. Deactivate the page for the product you want to remove
3. Repeat for additional products
4. Publish the product loop page upon completion
Participant Guide
Divisional Website Portfolio AEM Content Author Training Abbott © 2016 40