Extension point

This example replaces an existing filed in the Content Fragment Editor with a custom implementation.

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:

Content Fragment Model definition

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 with fieldNameExp and url 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;