Expand my Community achievements bar.

SOLVED

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.

1 Accepted Solution

Avatar

Correct answer by
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>
 
 

View solution in original post

2 Replies

Avatar

Correct answer by
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