Experience Fragments

Name: Experience Fragment 

Authors who can use: varies by Experience Fragment:

• Admin only:
  • Header
  • Footer
• Any author (changes reflect on templates):
  • Media Contacts (Agency News Article)
  • Side Navigation (Agency Content, Agency News Article)
  • Social Media (Agency News Article)
• Other Experience Fragments can be created and edited by any author

Templates/page types that can use: all

Required or optional: optional 

XFs can be created either in the Experience Fragment section of AEM, or on the page. Use the former method to create XFs from scratch and add them to page. Use the latter method to group components already authored on a page, save them as one, and add them to other pages.

1. On the Navigation page, select Experience Fragments.

2. Find the desired page path where the XF should be stored. Once on the desired page path, select Create, then Experience Fragment from the top right corner. In the example below, the XF will be part of the DHS folder.

3. Select Web Variation, and select Next from the top right corner.

a. Author the required title field.

b. Optional fields:

i. Name

ii. Description

iii. Tags

c. Click Create.

d. Click Open to begin editing the XF immediately. Click Done to return to the navigation screen. The XF can be edited at any time. If clicking Open, follow steps 4-6 below.

4. Once the XF is created, a template page will open. Add as many components as wanted to the XF. Some stylized components are only available as XFs (ex. Header, Footer, etc.).

5. Author as you would any page.

6. Publish the Experience Fragment. It is now available to be added to pages.

1. Author a page as normal.

2. Select component(s) to turn into an XF. To select multiple, use the group option from the editing toolbar. All components should be highlighted with a blue box.

3. Select the Convert to experience fragment variation option from the editing toolbar.

4. Convert to experience fragment variation

a. Action dropdown:

i. Create a new Experience Fragment: Use this option to create a new XF.

ii. Add to an existing Experience Fragment: Use this option to add an XF to an existing XF folder. It will not be added to the existing XF itself.

b. Experience Fragment path field: Link to the XF folder.

c. Template field: Select Web Variation template.

d. Variation title field: Name the XF.

e. Variation tags field: Optionally add tags.

5. Click Done. The component(s) are now saved as an XF. They can found in the XF section and added to pages as described below.

1. To use an existing XF, add the Experience Fragment component to the page like you would any other component.

Once on the desired page in Edit mode, add the Accordion by doing the following:

Option 1: Double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “Experience Fragment” in the search bar, or scroll to Experience Fragment in the list. Double click to add to page.

Option 2: On the left hand rail, navigate to the Components tab. Type “Experience Fragment” in the search bar, or scroll to Experience Fragment in the list. Double click to add to page.

2. With the edit wrench, open the Experience Fragment component.

3. Variation field: Use the pathfinder to navigate to Experience Fragments section where the Web Variation was created

4. The XF now displays on the page. Its content cannot be edited without reentering the Experience Fragment section authoring dialog. It can be moved, copied, deleted, etc., from the page.

1. On the Navigation page, select Experience Fragments.

2. Click through the folders until you reach the web variation of the XF. Select the checkbox, then Edit from the top menu.

3. When the authoring page opens, edit as normal.

4. Publish the XF. Changes will reflect on all pages that reference it.