Custom element rendering for properties rail by data-type

This feature allows third-party developer to build custom input UI for specific data types in the Universal Editor. The custom UI is rendered in an iframe and replaces the standard UI for the field in the properties rail.

Define override rules

An UIX extension can define a custom renderer to replace the standard UI with an iframe, which then renders the custom UI provided by the extension. Check this document to learn about available data types for universal editor.

Copy
function ExtensionRegistration() {
  const init = async () => {
    const guestConnection = await register({
      id: extensionId,
      methods: {
        canvas: {
          getRenderers() {
            return [
              {
                dataType: "text",
                url: '/#/renderer/1'
              },
              {
                dataType: "custom-type",
                url: '/#/renderer/2',
              },
            ];
          },
        },
      },
    });
  };
  init().catch(console.error);

  return <Text>IFrame for integration with Host (AEM)...</Text>;
}
Copied to your clipboard
function ExtensionRegistration() {
  const init = async () => {
    const guestConnection = await register({
      id: extensionId,
      methods: {
        canvas: {
          getRenderers() {
            return [
              {
                dataType: "text",
                url: '/#/renderer/1'
              },
              {
                dataType: "custom-type",
                url: '/#/renderer/2',
              },
            ];
          },
        },
      },
    });
  };
  init().catch(console.error);

  return <Text>IFrame for integration with Host (AEM)...</Text>;
}

Implement custom rendering logic

1. Define the router in the extension application to handle the custom rendering of the field.

Copy
function App() {
  return (
    <Router>
      <ErrorBoundary onError={onError} FallbackComponent={fallbackComponent}>
        <Routes>
            <Route index element={<ExtensionRegistration />} />
            <Route
                exact
                path="index.html"
                element={<ExtensionRegistration />}
            />
            <Route
                exact path="renderer/:rendererId"
                element={<TypeRenderer />}
            />
        </Routes>
      </ErrorBoundary>
    </Router>
  )

  // Methods

  // error handler on UI rendering failure
  function onError(e, componentStack) {}

  // component to show if UI fails rendering
  function fallbackComponent({ componentStack, error }) {
    ...
}

export default App
Copied to your clipboard
function App() {
  return (
    <Router>
      <ErrorBoundary onError={onError} FallbackComponent={fallbackComponent}>
        <Routes>
            <Route index element={<ExtensionRegistration />} />
            <Route
                exact
                path="index.html"
                element={<ExtensionRegistration />}
            />
            <Route
                exact path="renderer/:rendererId"
                element={<TypeRenderer />}
            />
        </Routes>
      </ErrorBoundary>
    </Router>
  )

  // Methods

  // error handler on UI rendering failure
  function onError(e, componentStack) {}

  // component to show if UI fails rendering
  function fallbackComponent({ componentStack, error }) {
    ...
}

export default App

2. Implement custom field renderer

Copy
export default () => {
    const [isLoading, setIsLoading] = useState(true);
    const [connection, setConnection] = useState();
    const [model, setModel] = useState();
    const [value, setValue] = useState();
    const [error, setError] = useState();
    const [validationState, setValidationState] = useState();

    const { rendererId } = useParams();
    if (!rendererId) {
        console.error('Renderer id parameter is missed');
        return;
    }

    useEffect(() => {
        const init = async () => {
            // connect to the host 
            const connection = await attach({ id: extensionId });
            setConnection(connection);
            // get model
            setModel(await connection.host.field.getModel());
            // get field value
            setValue(await connection.host.field.getValue());
            // get field error
            setError(await connection.host.field.getError());
            // get field validation state
            setValidationState(await connection.host.field.getValidationState());
            setIsLoading(false);
        };
        init().catch((e) =>
            console.log("Extension got the error during initialization:", e)
        );
    }, []);

    const onChangeHandler = (v) => {
        console.log("onChange on extension side", v);
        connection.host.field.onChange(v);
    };

    return (
        <Provider theme={lightTheme} colorScheme="light">
            {!isLoading ? (
                <>
                    Content generated by the extension Renderer#{rendererId}
                    <Flex direction="column" gap="size-65" marginBottom="size-100">
                        <TextField
                            validationState={error ? "invalid" : validationState}
                            label={model.multi ? null : model.label}
                            aria-label={model.label || model.name}
                            defaultValue={value}
                            maxLength={model.validation.maxLength}
                            isReadOnly={model.readOnly}
                            isDisabled={model.readOnly}
                            isRequired={model.required}
                            errorMessage={error}
                            onChange={onChangeHandler}
                            width="100%"
                        />
                    </Flex>
                </>
                ) : (
                <View width="97%" height="100%">
                    <Spinner />
                </View>
                )}
        </Provider>
    );
};

Copied to your clipboard
export default () => {
    const [isLoading, setIsLoading] = useState(true);
    const [connection, setConnection] = useState();
    const [model, setModel] = useState();
    const [value, setValue] = useState();
    const [error, setError] = useState();
    const [validationState, setValidationState] = useState();

    const { rendererId } = useParams();
    if (!rendererId) {
        console.error('Renderer id parameter is missed');
        return;
    }

    useEffect(() => {
        const init = async () => {
            // connect to the host 
            const connection = await attach({ id: extensionId });
            setConnection(connection);
            // get model
            setModel(await connection.host.field.getModel());
            // get field value
            setValue(await connection.host.field.getValue());
            // get field error
            setError(await connection.host.field.getError());
            // get field validation state
            setValidationState(await connection.host.field.getValidationState());
            setIsLoading(false);
        };
        init().catch((e) =>
            console.log("Extension got the error during initialization:", e)
        );
    }, []);

    const onChangeHandler = (v) => {
        console.log("onChange on extension side", v);
        connection.host.field.onChange(v);
    };

    return (
        <Provider theme={lightTheme} colorScheme="light">
            {!isLoading ? (
                <>
                    Content generated by the extension Renderer#{rendererId}
                    <Flex direction="column" gap="size-65" marginBottom="size-100">
                        <TextField
                            validationState={error ? "invalid" : validationState}
                            label={model.multi ? null : model.label}
                            aria-label={model.label || model.name}
                            defaultValue={value}
                            maxLength={model.validation.maxLength}
                            isReadOnly={model.readOnly}
                            isDisabled={model.readOnly}
                            isRequired={model.required}
                            errorMessage={error}
                            onChange={onChangeHandler}
                            width="100%"
                        />
                    </Flex>
                </>
                ) : (
                <View width="97%" height="100%">
                    <Spinner />
                </View>
                )}
        </Provider>
    );
};

Extension Registration Reference

Field Reference

Copy
{
    await connection.host.field
}
Copied to your clipboard
{
    await connection.host.field
}

Last updated 4/26/2024

Was this helpful?

Yes

No