Hi,
Using AEM 6.4 with SPA Editor, is there any example/sample of how to use the experience fragments inside the SPA site?
lawrencer388181
lawrencer388181
30-10-2019
Following the approach suggested by JaideepBrar for 6.5 I've managed to get the contents of experience fragments displaying on a react app. This is based on the AEM react SPA tutorial.
First, a model interface for the component that extends the ContainerExporter interface was created. (FYI, the ContainerExporter interface is referenced in some comments within the BaseComponentExporter class created in the tutorial.)
package com.adobe.aem.guides.wkndevents.core.models;
import com.adobe.cq.export.json.ComponentExporter;
import javax.annotation.Nonnull;
import com.adobe.cq.export.json.ContainerExporter;
import org.osgi.annotation.versioning.ConsumerType;
@ConsumerType
public interface ExperienceFragment extends ContainerExporter {@Nonnull
default String getExportedType() {throw new UnsupportedOperationException();
}
}
Some of the logic from the HierarchyPageImpl class of the tutorial was borrowed to implement the interface methods. But the "getItemModels" method was modified so that it retrieved the children of the Experience Fragment page content:
package com.adobe.aem.guides.wkndevents.core.models.impl;
import com.adobe.aem.guides.wkndevents.core.models.ExperienceFragment;
import com.adobe.cq.export.json.ComponentExporter;
import javax.annotation.Nonnull;
import javax.inject.Inject;
import com.adobe.cq.export.json.SlingModelFilter;
import org.apache.commons.lang3.ArrayUtils;
import org.apache.commons.lang3.StringUtils;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.jcr.resource.api.JcrResourceConstants;
import org.apache.sling.models.annotations.Exporter;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.InjectionStrategy;
import org.apache.sling.models.annotations.injectorspecific.Self;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;
import org.apache.sling.models.factory.ModelFactory;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import java.util.LinkedHashMap;
import java.util.Map;
@Model(
adaptables = {SlingHttpServletRequest.class},
adapters = {ExperienceFragment.class, ComponentExporter.class},
resourceType = {ExperienceFragmentImpl.RESOURCE_TYPE}
)
@Exporter(
name = "jackson",
extensions = {"json"}
)
public class ExperienceFragmentImpl implements ExperienceFragment {
protected static final String RESOURCE_TYPE = "cq/experience-fragments/editor/components/experiencefragment";
private static final Logger LOG = LoggerFactory.getLogger(ExperienceFragmentImpl.class);
private static final String JCR_CONTENT = "/jcr:content";
@Self
private SlingHttpServletRequest request;@Inject
private ResourceResolver resourceResolver;@Inject
private Resource resource;@Inject
private ModelFactory modelFactory;@Inject
private SlingModelFilter slingModelFilter;@ValueMapValue(
injectionStrategy = InjectionStrategy.OPTIONAL
)private String fragmentPath;
private Map<String, ComponentExporter> childModels = null;
public ExperienceFragmentImpl() {
LOG.debug("Creating ExperienceFragmentImpl");
}
@Override
@Nonnull
public String getExportedType() {return this.resource.getResourceType();
}
@Nonnull
@Override
public Map<String, ? extends ComponentExporter> getExportedItems() {if (childModels == null) {
childModels = getItemModels(request, ComponentExporter.class);
}
LOG.debug("childModels: {}", childModels);
return childModels;
}
/**
* Returns a map (resource name => Sling Model class) of the given resource children's Sling Models that can be adapted to {@link T}.
*
* @param slingRequest The current request.
* @param modelClass The Sling Model class to be adapted to.
* @return Returns a map (resource name => Sling Model class) of the given resource children's Sling Models that can be adapted to {@link T}.
*/
@Nonnull
private <T> Map<String, T> getItemModels(@Nonnull SlingHttpServletRequest slingRequest,@Nonnull Class<T> modelClass) {
Map<String, T> itemWrappers = new LinkedHashMap<>();
if(StringUtils.isBlank(fragmentPath)) {
return itemWrappers;
}
Resource experienceFragmentContent = resourceResolver.getResource(fragmentPath + JCR_CONTENT);
if (experienceFragmentContent == null) {
return itemWrappers;
}
Iterable<Resource> iterable = slingModelFilter.filterChildResources(experienceFragmentContent.getChildren());
if (iterable == null) {
return itemWrappers;
}
for (final Resource child : iterable) {
LOG.debug("child.getPath(): {}", child.getPath());
T model = modelFactory.getModelFromWrappedRequest(slingRequest, child, modelClass);
LOG.debug("model: {}", model);
itemWrappers.put(child.getName(), model);
}
return itemWrappers;
}
@Nonnull
@Override
public String[] getExportedItemsOrder() {Map<String, ? extends ComponentExporter> models = getExportedItems();
if (models.isEmpty()) {
return ArrayUtils.EMPTY_STRING_ARRAY;
}
return models.keySet().toArray(ArrayUtils.EMPTY_STRING_ARRAY);
}
}
Because the ContainerExporter interface was used in the component exporter the Container module to be used from the cq-react-editable-components JavaScript library as opposed to the Component module:
/*
ExperienceFragment.js
Maps to cq/experience-fragments/editor/components/experiencefragment
*/
import React from 'react';import {MapTo, Container} from '@adobe/cq-react-editable-components';
require('./ExperienceFragment.scss');
/**
* 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() {
return (<div className="ExperienceFragment">
{ this.childComponents }
</div>);
}}
MapTo('cq/experience-fragments/editor/components/experiencefragment')(ExperienceFragment, ExperienceFragmentConfig);
But this will only show components in the experience fragment where the type has already been mapped. So after completing the tutorial it will only display the image, text and list components used in a fragment.
I hope this answers the question.
ivana64836760
ivana64836760
02-12-2019
Hello. If you refer to We Retail Journal example, the related client lib config is defined in the file
in the We Retail case it is - 'we-retail-journal-react'
ivana64836760
ivana64836760
19-11-2019
thanks for your reply. I'm using 6.5 + sp1. Managed to create XF and render it in SPA template and on a page.
unfortunately still requires overhead for using it in XF editor, as originally it doesn't include React and json model, so no content is visible from Author UI, I just added components via CRXDE
Eshan_Kumar
Eshan_Kumar
22-08-2019
HI cqsapientu69896437 Did you find a solution for your question?
JaideepBrar: is there any document to refer for using XF in SPA.
sufiyanp5432
sufiyanp5432
02-12-2019
Hi ivana ,
can you please elaborate this - 'add the required client library' ?
ivana64836760
ivana64836760
01-12-2019
Hi, please, check that React library code is present on XF page, if no - add the required client library, in policies for example
sufiyanp5432
sufiyanp5432
28-11-2019
We have added the react components in the XF created but i am not able to see the added components in the created XF but when i drag drop the XF on the page and configure the path the added components in the XF are visible. So problem i am facing is how do i configure the components added in the XF.
ivana64836760
ivana64836760
26-11-2019
so for backend I used answer from lawrencer38818131
to enable react rendering in XF edit mode, I just enabled React related client library. It can be done either via Page/Template Policies or if you point to your own page via resource type and this page will include the mentioned client library.
Works ok on AEM 6.5 + sp1
alisong74870907
alisong74870907
25-10-2019
I would also appreciate a response to this question!
cqsapientu69896
cqsapientu69896
04-06-2019
Hi @JaideepBrar
Could you please let me know where can I find the approach of SPA app consuming XF JSON? I am trying to enable content fragment component in an SPA editor template based page(created from maven archetype), but it is not showing up for authoring(although node is formed in crx/de) I understand not all components are enabled in SPA authoring and we have to map using mapto react library, but could you let us know how to use XF where SPA app consumes JSON by content services (Sling Model Exporter) ? Is there any article/page for this approach ?
jbrar
Employee
jbrar
Employee
08-03-2019
Experience Fragments are not yet supported(6.4 and below) in the SPA Editor. That being said, there is an approach mentioned for AEM 6.5 which can be used for XF where SPA app consumes JSON which is provided by content services (Sling Model Exporter).
Gaurav-Behl
MVP
Gaurav-Behl
MVP
05-03-2019
Could you explain your use case?
SPA editor is for editing SPA components that are mapped/binded to AEM components. I'm not able to understand what are you trying to do with SPA editor & XFs.