Custom form element rendering

This feature allows third-party developer to build custom input UI for specific fields or types of fields.

Define override rules

An UIX extension can define a list of override rules, each consisting of a set of RegExp expressions for field name, type, fragment path or/and model path. When a field on the canvas matches one of these expressions, the standard UI is replaced with an iframe, which then renders the custom UI provided by the extension.

Copy
function ExtensionRegistration() {
    const init = async () => {
        const guestConnection = await register({
            id: extensionId,
            methods: {
                field: {
                    getDefinitions: () => {
                        return [
                            {
                                fieldNameExp: '^address_autocomplete$',
                                url: '/#/address-autocomplete-field',
                            },
                        ];
                    },
                },
            },
        });
    };
    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: {
                field: {
                    getDefinitions: () => {
                        return [
                            {
                                fieldNameExp: '^address_autocomplete$',
                                url: '/#/address-autocomplete-field',
                            },
                        ];
                    },
                },
            },
        });
    };
    init().catch(console.error);

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

Implement custom rendering logic

Copy
function CustomField() {
...
    useEffect(() => {
        const init = async () => {
            // connect to the host (ie. CF Editor)
            const conn = await attach({ id: extensionId });
            setConnection(conn);

            // get model
            const model = await conn.host.field.getModel();

            // configure validation state subscriber
            await conn.host.field.onValidationStateChange((state) => setValidationState(state));

            // get default value
            const defaultValue = await conn.host.field.getDefaultValue();
        }

        init().catch(console.error);
    }, []);

    // Custom fileld will be display instead of original one
    return <TextField defaultValue={value} onChange={(v) => conn.host.field.onChange(v)} ... />;
}
Copied to your clipboard
function CustomField() {
...
    useEffect(() => {
        const init = async () => {
            // connect to the host (ie. CF Editor)
            const conn = await attach({ id: extensionId });
            setConnection(conn);

            // get model
            const model = await conn.host.field.getModel();

            // configure validation state subscriber
            await conn.host.field.onValidationStateChange((state) => setValidationState(state));

            // get default value
            const defaultValue = await conn.host.field.getDefaultValue();
        }

        init().catch(console.error);
    }, []);

    // Custom fileld will be display instead of original one
    return <TextField defaultValue={value} onChange={(v) => conn.host.field.onChange(v)} ... />;
}

API Reference

At least one valid expression must be specified: pathExp, modelPathExp, fieldTypeExp, or fieldNameExp.

Last updated 4/25/2024

Was this helpful?

Yes

No