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.
SOLVED
How to create Experience Fragment in AEM 6.5- React SPA
@Anudeep_Garnepudi I have followed the same reference. Created a model, and component in React.
But I am not sure how to add experience fragment to a page and author it.
I have created a XF using web variation template and added a component.
Here I assume that we can just add the component and author. But, we cant preview it as the rendering will happen from react.
Later, in the page container I have added Experience Fragment container from General group and selected XF which I have created.
But, the added component is not getting displayed.
- Added a component and authored in Experience Fragment which was created using web variation template
- Experience Fragment container in page container
Yes, Other components which are created in React are loading without any issue.
In fact the XF for which I have created in React is loading but the components which are added not getting populated.
Check the React component for XF.
/*
ExperienceFragment.js
Maps to cq/experience-fragments/editor/components/experiencefragment
*/
import React from 'react';
import { MapTo, Container } from '@adobe/cq-react-editable-components';
/**
* Default Edit configuration for the Text component that interact with the Core ExperienceFragment component.
*
* @TyPe EditConfig
*/
const ExperienceFragmentConfig = {
emptyLabel: 'Experience Fragment',
isEmpty: function(props) {
var itemsOrder = props["cqItemsOrder"];
return !(itemsOrder && itemsOrder.length);
}
};
/**
* Text React component
*/
export default class ExperienceFragment extends Container {
render() {
console.log(JSON.stringify(this.props));
return (<div className="ExperienceFragment">
{this.childComponents}
</div>);
}
}
MapTo('cq/experience-fragments/editor/components/experiencefragment')(
ExperienceFragment,
ExperienceFragmentConfig
);
