Friday 30 June 2017

Step by step tutorial on Creating Experience Fragments in AEM


In my previous blog, I have explained the basics of Experience Fragments in AEM. Here I will walk you through the process of creating an Experience Fragment and authoring it to a page. Remember Experience Fragments can be authored on third party systems too, for the demo I am using a test AEM page.

Steps

After loggin into AEM, click on 'Experience Fragments' , then from create button click on the 'Experience Fragment'. The folder option aloows us to categorise the Experience Fragments.



Once created, start filling out the details in properties section and 'First Variant'  as shown below.



On the 'First Variant' section select the template for the Experience Fragment. HTML fragment which I am going to select is a default provided by AEM.




Now select the created Experience Fragment, and click on edit option.



We will have authoring page opened for the Experience Fragment. We can author assets, components and variations for a fragment.



In assets section, I have authored an image ( We.Retail instore image).



In variations, we can click on 'create' to authore variations.



Start filling the variations. The template can be any default Experience Fragment template.



Below given various menu options on the Experience Fragment authoring.



Once done with Experience Fragment creation, we will go ahead and author the fragment on a page. For this I have created a test page.
On this page, author an Experience Fragment as a component('Drag COmponents here').



Once this is done we can see the Experience Fragment is rendered on the test page as shown below.

Click me to watch The YouTube demo video



2 comments:

  1. The experience fragments are created based on pre-built templates like Html, Facebook, Pin Interest and We-retail. After creating a parsys is available which allows to drag and drop components, at this point I would like to use my custom components which are available in a different group. The design mode is not available at this point, hence I cannot use my custom components. How to use my custom components? Do I have to create a custom template? Else a Layout Container component can be used to create an experience fragment.

    ReplyDelete
  2. How to create a custom experience fragment template?

    ReplyDelete