Extension point
This example replaces an existing filed in the Content Fragment Editor with a custom implementation.
AEM UI extended | Extension point |
---|---|
Content Fragment Editor | Custom form element rendering |
Example extension
This example demonstrates restricting field values in the Content Fragment Editor to a predetermined set by replacing the standard field with a custom dropdown of predefined SKUs. Authors can select from this specific SKU list. While SKUs usually come from a Product Information Management (PIM) system, this example simplifies by statically listing the SKUs.
The source code for this example is available for download.
Content Fragment Model definition
This example binds to any Content Fragment field whose name is sku
(via a regular expression match of ^sku$
) and replaces it with a custom field. The example uses the WKND Adventure Content Fragment model that has been updated and the definition is as follows:
Despite the custom SKU field being displayed as a dropdown, its underlying model is configured as a text field. The custom field implementation only needs to align with the appropriate property name and type, facilitating the replacement of the standard field with the custom dropdown version.
App routes
In the main React component App.js
, include the /sku-field
route to render the SkuField
React component.
src/aem-cf-editor-1/web-src/src/components/App.js
import React from "react";
import ErrorBoundary from "react-error-boundary";
import { HashRouter as Router, Routes, Route } from "react-router-dom";
import ExtensionRegistration from "./ExtensionRegistration";
import SkuField from "./SkuField"; // Custom component implemented below
function App() {
return (
<Router>
<ErrorBoundary onError={onError} FallbackComponent={fallbackComponent}>
<Routes>
<Route index element={<ExtensionRegistration />} />
<Route
exact path="index.html"
element={<ExtensionRegistration />}
/>
{/* This is the React route that maps to the custom field */}
<Route
exact path="/sku-field"
element={<SkuField />}/>
</Routes>
</ErrorBoundary>
</Router>
)
...
}
...
This custom route of /sku-field
maps to the SkuField
component is used below in the Extension registration.
Extension registration
ExtensionRegistration.js
, mapped to the index.html route, is the entry point for the AEM extension and defines:
- The widget definition in
getDefinitions()
function withfieldNameExp
andurl
attributes. The complete list of available attributes is available in the Custom Form Element Rendering API Reference. - The
url
attribute value, a relative URL path (/index.html#/skuField
) to load the field UI.
src/aem-cf-editor-1/web-src/src/components/ExtensionRegistration.js
import { Text } from "@adobe/react-spectrum";
import { register } from "@adobe/uix-guest";
import { extensionId } from "./Constants";
function ExtensionRegistration() {
const init = async () => {
const guestConnection = await register({
id: extensionId,
methods: {
field: {
getDefinitions() {
return [
// Multiple fields can be registered here.
{
fieldNameExp: '^sku$', // This is a regular expression that matches the field name in the Content Fragment Model to replace with React component specified in the `url` key.
url: '/#/sku-field', // The URL, which is mapped vai the Route in App.js, to the React component that will be used to render the field.
},
// Other bindings besides fieldNameExp, other bindings can be used as well as defined here:
// https://developer.adobe.com/uix/docs/services/aem-cf-editor/api/custom-fields/#api-reference
];
},
},
}
});
};
init().catch(console.error);
return <Text>IFrame for integration with Host (AEM)...</Text>;
}
export default ExtensionRegistration;