Explanation (Adobe Docs Reference):
In Adobe Experience Manager (AEM), the SPA Editor enables the development of Single Page Applications (SPAs) that integrate with AEM’s content management capabilities. SPA components in AEM are typically React or Angular components mapped to AEM components, and their data is exposed to the SPA via JSON through the Sling Model Exporter framework. The ComponentExporter interface, part of the com.adobe.cq.export.json package, is used to define how AEM components are serialized into JSON for consumption by the SPA. By default, AEM provides a standard exporter (via the Sling Model Exporter) that serializes component data based on the Sling Model’s annotations and properties. However, developers can override this default exporter for specific components to customize the JSON output, such as adding, removing, or modifying fields.
The question specifies that the developer is creating a set of SPA components, where half do not require a custom component exporter (i.e., they can use the default exporter), and the other half need a custom exporter to override the default behavior. Let’s analyze the options to determine the correct approach:
Analysis of Options:
Option A: Implement ImplementationPicker service
The ImplementationPicker interface (from com.adobe.cq.wcm.core.components.util) is used in AEM’s Core Components to dynamically select the implementation of a component based on specific conditions, such as resource type or request context. It is not related to the Sling Model Exporter or JSON serialization for SPA components. Implementing an ImplementationPicker service would be relevant for selecting different component implementations (e.g., different HTL scripts or Java classes) but does not address the need to customize JSON export for SPA components. This option is incorrect.
Option B: Implement ComponentExporter service
The ComponentExporter interface is designed for SPA integration in AEM. When a Sling Model implements ComponentExporter, it can be serialized into JSON by the Sling Model Exporter, which is used by the SPA Editor to provide component data to the front-end SPA (React or Angular). To override the default exporter, a developer creates a Sling Model for each SPA component that requires customization, annotates it with @Model (specifying resourceType and exporters), and implements ComponentExporter. The model can then define custom methods or annotations (e.g., @JsonProperty, @ValueMapValue) to control the JSON output. For the components that do not require a custom exporter, the default Sling Model Exporter behavior (provided by AEM or Core Components) can be used without implementing ComponentExporter. This approach perfectly aligns with the requirement to override the default exporter for only half of the components. This option is correct.
Option C: Implement FallbackComponentImpl service
There is no such thing as a FallbackComponentImpl service in AEM or its SPA Editor framework. This appears to be a fictitious or misleading option. AEM’s SPA Editor and Sling Model Exporter do not use a “fallback†service for JSON export customization. Instead, customization is achieved through the ComponentExporter interface or by extending existing exporters. This option is incorrect.
Correct Implementation:
To meet the goal, the developer should:
For components that do not require a custom exporter, rely on the default Sling Model Exporter behavior. These components can use standard Sling Models (or Core Components) that are automatically serialized into JSON based on their properties and annotations.
For components requiring a custom exporter, create Sling Models that implement the ComponentExporter interface and annotate them with @Model (from org.apache.sling.models.annotations) and @Exporter (from org.apache.sling.models.annotations). For example:
import com.adobe.cq.export.json.ComponentExporter;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.Exporter;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;
import com.fasterxml.jackson.annotation.JsonProperty;
@Model(adaptables = SlingHttpServletRequest.class,
adapters = {ComponentExporter.class},
resourceType = "wknd/components/customcomponent",
exporters = @Exporter(name = "jackson", extensions = "json"))
public class CustomComponentModel implements ComponentExporter {
@ValueMapValue
private String customField;
@JsonProperty("renamedField")
The @Model annotation specifies that the class is a Sling Model adaptable from a SlingHttpServletRequest and implements ComponentExporter.
The @Exporter annotation registers the model with the Sling Model Exporter for JSON output (using Jackson).
The getExportedType() method, required by ComponentExporter, returns the resource type, which is used by the SPA to identify the component.
Custom logic (e.g., toUpperCase()) or annotations like @JsonProperty can be used to modify the JSON output.
Ensure the SPA Editor is configured correctly in AEM (e.g., the SPA project is set up with proper page templates and policies) to map these components to their front-end counterparts.
Why Option B is Correct:
Implementing ComponentExporter allows the developer to define custom Sling Models for the components that need a customized JSON output, overriding the default exporter’s behavior.
For the other half of the components, the default exporter (provided by AEM or Core Components) can be used without additional implementation.
This approach leverages AEM’s SPA Editor and Sling Model Exporter framework, which is specifically designed for exposing AEM component data to SPAs via JSON.
Exact Extracts from Adobe Experience Manager (AEM) Sites Developer Documents:
From "SPA Editor - Developing SPAs for AEM": "AEM components, which are used within the SPA Editor, must implement the ComponentExporter interface to be serialized correctly into the JSON format expected by the SPA. This interface allows developers to customize the JSON export of components for SPA integration."
From "Sling Model Exporter": "The Sling Model Exporter framework allows Sling Models to be exported as JSON for SPA integration. By implementing ComponentExporter and annotating with @Exporter(name = 'jackson', extensions = 'json'), developers can control the JSON output of their components."
From "AEM SPA Editor and React/Angular": "For custom components requiring specific JSON structures, implement a Sling Model with ComponentExporter and define custom getters to shape the JSON output. Components without custom exporters can rely on the default JSON serialization provided by AEM."
[Reference: Adobe Experience Manager Sites Developer Documentation, AEM 6.5, AEM as a Cloud Service, Adobe Experience League., , ]