Experience Fragments

An Experience Fragment is a group of one or more components including content and layout that can be referenced within pages. They can contain any component.

An Experience Fragment:

• Is a part of an experience (page).
• Can be used across multiple pages.
• Is based on a template (editable only) to define structure and components.
• This template is used to create the root page of the Experience Fragment.
• Is made up of one or more components, with layout, in a paragraph system.
• Can contain other experience fragments.
• Can be combined with other components (including other Experience Fragments) to form a complete page (experience).
• One, or more, variations can be created, based on the root page.
• These variations may share content and/or components.
• Can be broken down into building blocks that can be used across multiple variations of the fragment.

You can use Experience Fragments:

• If an author wants to re-use parts (a fragment of an experience) of a page, they need to copy and paste that fragment. Creating and maintaining these copy/paste experiences is time-consuming and prone to user errors. Experience Fragments eliminate the need for copy/paste.
• To support the headless CMS use-case. Authors want to use AEM only for authoring but not for delivering to the customer. A third party system/touchpoint would consume that experience and then deliver to the end user.

When Should You Use Experience Fragments?

Experience Fragments should be used:

• Whenever you want to reuse experiences.

  • Experiences that will be reused with same or similar content

• When you use AEM as a content delivery platform for third parties.

  • Any solution that wants to use AEM as the content delivery platform
  • Embedding content in third party touchpoints

• If you have an Experience with different variations or renditions.

  • Channel or context-specific variations
  • Experiences that make sense to group (for example, a campaign with different experiences across channels)

• When you use Omnichannel Commerce.

  • Sharing commerce-related content on social media channels at scale
  • Making touchpoints transactional

Organizing your Experience Fragments

It is recommended to:

• use folders to organize your Experience Fragments,

• configure the allowed templates on these folders.

Creating folders lets you:

• create a meaningful structure for your Experience Fragments; for example, according to classification

  NOTE

  It is not necessary to align the structure of your Experience Fragments with the page structure of your site.

• allocate the allowed templates at the folder level

  NOTE

  You can use the template editor to create your own template.

The WKND project structures some Experience Fragments according to Contributors. The structure used also illustrates how other features, such as Multi Site Management (including language copies), can be used.

See:

http://localhost:4502/aem/experience-fragments.html/content/experience-fragments/wknd/language-masters/en/contributors/kumar-selveraj/master

Creating and Configuring a Folder for your Experience Fragments

To create and configure a folder for your Experience Fragments it is recommended to:

1. Create a folder.

2. Configure the allowed Experience Fragment templates for that folder.

Configure the Allowed Templates for your Folder

1. Navigate to the required Experience Fragments folder.

2. Select the folder, and then Properties.

3. Specify the regular expression for retrieving the required templates in the Allowed Templates field.

   For example:
   /conf/(.*)/settings/wcm/templates/experience-fragment(.*)?

   See:
   http://localhost:4502/mnt/overlay/cq/experience-fragments/content/experience-fragments/folderproperties.html/content/experience-fragments/wknd

   

   NOTE

   See Templates for Experience Fragments for further details.

4. Select Save and Close.

Configure the Allowed Templates for your Instance

1. Navigate to the required Experience Fragments console.

2. Select Configuration options:

   

3. Specify the required templates in the Configure Experience Fragments dialog:

   

   NOTE

   See Templates for Experience Fragments for further details.

4. Select Save.

Creating an Experience Fragment

To create an Experience Fragment:

1. Select Experience Fragments from the Global Navigation.

   

2. Navigate to the required folder and select Create.

   

3. Select Experience Fragment to open the Create Experience Fragment wizard.

   Select the required Template, then Next:

   

4. Enter the Properties for your Experience Fragment.

   A Title is mandatory. If the Name is left blank it will be derived from the Title.

   

   NOTE

   Tags from the Experience Fragment template will not be merged with tags on this Experience Fragment root page.

   These are completely separate.

5. Click Create.

   A message will be displayed. Select:

   • Done to return to the console

   • Open to open the fragment editor

Editing your Experience Fragment

The Experience Fragment Editor offers you similar capabilities to the normal page editor.

The following example procedure illustrates how to create a teaser for a product:

1. Drag and drop a Teaser from the Components Browser.

   

2. Select Configure from the component toolbar.

3. Add the Asset and define the Properties as required.

4. Confirm the definitions with Done (tick icon).

5. Add more components as required.

Creating An Experience Fragment Variation

You can create variations of your Experience Fragment, depending on your needs:

1. Open your fragment for editing.

2. Open the Variations tab.

   

3. Create lets you create:

   • Variation
   • Variation as live-copy.

4. Define the required properties:

   • Template
   • Title
   • Name; if left blank it will be derived from the Title
   • Description
   • Variation tags

   

5. Confirm with Done (tick icon), the new variation is shown in the panel:

   

Using your Experience Fragment

You can now use your Experience Fragment when authoring your pages:

1. Open any page for editing.

   For example: https://localhost:4502/editor.html/content/we-retail/language-masters/en/products/men.html

2. Create an instance of the Experience Fragment component, by dragging the component from the Components browser to the page paragraph system:

   

3. Add the actual Experience Fragment to the component instance; either:

   • Drag the required fragment from the Assets Browser and drop onto the component
   • Select Configure from the component toolbar and specify the fragment to use, confirm with Done (tick)

   

   NOTE

   Edit, in the component toolbar, operates as a shortcut to open the fragment in the fragment editor.

Building Blocks

You can select one or more components to create a building block for recycling within your fragment:

Creating a Building Block

To create a Building Block:

1. In the Experience Fragment editor, select the components you want to re-use:

   

2. From the components toolbar, select Convert to building block:

   

3. Enter the name of the Building Block, and confirm with Convert:

   

4. The Building Block is shown in the tab, and can be selected in the paragraph system:

   

Managing a Building Block

Your building block is visible in the Building Blocks tab. For each block, the following actions are available:

• Go to master: open the root page variation in a new tab
• Rename
• Delete

Using a Building Block

You can drag your building block to the paragraph system of any fragment, as with any component.

Details of your Experience Fragment

Details of your fragment can be seen:

1. Details are shown in all views of the Experience Fragments console, with the List View including details of an export to Target:

   

2. When you open the Properties of the Experience Fragment:

   

   The properties are available in various tabs:

   CAUTION

   These tabs are shown when you open Properties from the Experience Fragments console.

   If you Open Properties when editing an Experience Fragment, the appropriate Page Properties are shown.

   

   • Basic

     • Title - mandatory

     • Description

     • Tags

     • Total number of variants - information only

     • Number of web variants - information only

     • Number of non-web variants - information only

     • Number of pages using this fragment - information only

   • Cloud Services

     • Cloud Configuration
     • Cloud Service Configurations
     • Facebook page ID
     • Pinterest board

   • References

     • A list of references.

   • Social Media Status

     • Details of social media variations.

The Plain HTML Rendition

Using the .plain. selector in the URL, you can access the plain HTML rendition from the browser.

Exporting Experience Fragments

By default, Experience Fragments are delivered in the HTML format. This can be used by both AEM and third party channels alike.

For export to Adobe Target, JSON can also be used. See Target Integration with Experience Fragments for full information.