Experience Fragments

You're viewing help content for version:

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.
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).
Can have different variations, which 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.

Note:

Write access for experience fragments requires the user account to be registered in the group:

experience-fragments-editors

Please contact your system administrator if you are experiencing any issues.

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

To create an Experience Fragment:

Select Experience Fragments from the Global Navigation.

Select Create. You can create Folders and/or Experience Fragments.

Creating folders allows you to create a meaningful structure for your Experience Fragments.

From the required folder, select Create then Experience Fragment to open the Create Experience Fragment wizard.

Select the required Template, then Next:

Note:

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

Only editable templates can be used; static templates are not fully compatible.

Enter the Properties for your Experience Fragment.

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

Click Create.

A message will be displayed. Select:

Done to return to the console
Open to open the fragment editor

The Experience Fragment Editor offers you similar capabilities to the normal page Editor. See Editing Page Content for more information on how to use it.

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

Drag and drop a Category Teaser from the Components Browser.

Select Configure from the component toolbar.

Add the Asset and define the Properties as required.

Confirm the definitions with Done (tick icon).

Add more components as required.

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

Open your fragment for editing.

Open the Variations tab.

Create allows you to create:

Variation
Variation as live-copy.

Define the required properties:

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

Confirm with Done (tick icon), the new variation will be shown in the panel:

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

Open any page for editing.

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

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

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.

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

To create a new Building Block:

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

From the components toolbar, select Convert to building block:

For example:

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

The Building Block will be shown in the tab, and can be selected in the paragraph system:

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

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

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

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

This is available from the browser, but its primary purpose is to allow other applications (for example, third party web apps, custom mobile implementations) to access the content of the Experience Fragment directly, using only the URL.

The plain HTML rendition adds the protocol, host and context path to paths that are:

of the type: src, href, or action
or end with: -src, or -href

For example:

.../brooklyn-coat/master.plain.html

Note:

Links always reference the publish instance. They are intended to be consumed by third parties, so the link will always be called from the publish instance, not the author.