Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

How to create Experience Fragment in AEM 6.5- React SPA

Avatar

Avatar
Validate 1
Level 2
papenaarun
Level 2

Likes

8 likes

Total Posts

18 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Validate 1
Level 2
papenaarun
Level 2

Likes

8 likes

Total Posts

18 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
papenaarun
Level 2

13-12-2020

We have AEM project which was created with AEM architype 22 for AEM - React SPA.

In static templates we can use iParsys for inheriting any components to its child pages and also can cancel inheritance in page level.

As in newer AEM verison we are using Editable templates, and how do we achieve similar functionality?

I came to know that iParsys cant be used in Editable Templates and also not recommended.

I found reference for creating XF's but not for SPA.

 

Can someone please help on Creating XF's for AEM - React SPA?

 

 

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
Anudeep_Garnepudi
MVP

Likes

275 likes

Total Posts

320 posts

Correct Reply

87 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
Anudeep_Garnepudi
MVP

21-12-2020

Answers (1)

Answers (1)

Avatar

Avatar
Affirm 100
MVP
shelly-goel
MVP

Likes

243 likes

Total Posts

408 posts

Correct Reply

104 solutions
Top badges earned
Affirm 100
Give Back 25
Ignite 3
Give Back 10
Validate 1
View profile

Avatar
Affirm 100
MVP
shelly-goel
MVP

Likes

243 likes

Total Posts

408 posts

Correct Reply

104 solutions
Top badges earned
Affirm 100
Give Back 25
Ignite 3
Give Back 10
Validate 1
View profile
shelly-goel
MVP

22-12-2020

@papenaarun 

Does your other react components (other than XF) render on this page? It's possible the react library is not available or the app is not initialized where you added the XF.

papenaarun

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
);

 

papenaarun_0-1608699597403.png


 
Updating Media