Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Any good resources on creating components as experience fragments?

Avatar

Level 2

I am trying to work with experience fragments and want to achieve two of the following.

Create and use a component as XF
I have a carousel component and i want the individual carousel slides to be an experience fragment?

I cannot find any good resources which help me in achieving this . They all point to page experience fragments.Do guide on how to move forward for the above

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

2 Replies

Avatar

Level 2

See if this can help you which I got from google.

 

To create and use a component as an Experience Fragment (XF) in Adobe Experience Manager (AEM), you essentially need to develop a custom component that inherits from the standard "xfpage" component, allowing you to define a reusable structure with editable content areas within your XF template.
Steps to create a custom XF component:
1. Create the Component Structure:
  • Navigate to the component folder:
    In your AEM project, go to /apps/your-project/components/content/experience-fragments.
  • Create a new component folder:
    Make a new folder named your-custom-xf-component within the experience-fragments folder.
  • Add component files:
    • your-custom-xf-component.html: This is where you define the visual structure of your XF component, including placeholders for dynamic content.
    • your-custom-xf-component.js: This file will handle any JavaScript logic needed to interact with the component's content.
    • your-custom-xf-component.cq.dialog.xml: This is for creating the editing dialog in the AEM authoring interface, allowing users to configure the component properties.
2. Extend the xfpage component:
  • Open your-custom-xf-component.js:
  • Inherit from xfpage: Add the following line to your code:
JavaScript
 
    cq.domReady(function() {
CQ.Ext.ns('AEM.Component.xfpage');
AEM.Component.xfpage.YourCustomXFComponent = CQ.Ext.extend(AEM.Component.xfpage, {
// Your custom component logic here
});
});
 
3. Define the XF template:
  • In the AEM authoring interface:
    • Go to the "Experience Fragments" section.
    • Create a new XF template.
    • Select your newly created your-custom-xf-component from the component list.
    • Design the layout of your XF using the editable content areas provided by the component.
4. Using the XF in a page:
  • In the page editor:
    • Navigate to the page where you want to insert the XF.
    • Add a new component to the page.
    • Choose the "Experience Fragment" component from the component library.
    • Select the XF template you created using the custom component.
    • Configure any necessary properties or content for the XF within the editing dialog.
Key points to remember:
  • Content areas:
    Your custom XF component should define clear content areas using the cq:PageContent component to allow users to easily add content in the authoring interface.
  • Custom styling and behavior:
    Use CSS and JavaScript within your component files to style and add interactive functionality to your XF.
  • Data binding:
    If needed, utilize AEM's data binding mechanisms to dynamically populate content within the XF based on data sources.
Example Code Snippet (HTML):
Code
 
<div class="your-custom-xf-wrapper">
<cq:PageContent cq:template="/libs/foundation/components/parsys/parsys.html"/>
<p>This is some static content within your custom XF.</p>
</div>
 
 

Avatar

Community Advisor

Hi @Zendarkke 
You can use core component

https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/c... 

 

There you have a possibility to add XF as carousel item(slide).



Arun Patidar