Navigation

Describes basic methods for navigating within an extension.

API to open Content Fragment from an extension

Default editor for your organization will be used to open Content Fragment.

import { useEffect } from "react";
import { Text } from "@adobe/react-spectrum"
import { extensionId } from "./Constants"
import { register } from "@adobe/uix-guest";

function ExtensionRegistration() {
    useEffect(() => {
        const init = async () => {
            const registrationConfig = {
                id: extensionId,
                methods: {
                    headerMenu: {
                        getButtons() {
                            return [
                                {
                                    id: "example.open_in_editor",
                                    label: "UIX Open In Editor",
                                    icon: 'Export',
                                    variant: "primary",
                                    onClick: async () => {
                                        console.log("UIX Open In Editor has been pressed.");
                                        const contentFragment = await guestConnection.host.contentFragment.getContentFragment();
                                        // or any other content fragment path

                                        console.log(contentFragment.path);
                                        guestConnection.host.navigation.openEditor(contentFragment.path);
                                    },
                                },
                            ];
                        },
                    },
                },
            };
            const guestConnection = await register(registrationConfig);
        }
        init().catch(console.error)
    }, []);
    return <Text>IFrame for integration with Host (AEM)...</Text>
}

export default ExtensionRegistration;
Copied to your clipboard
import { useEffect } from "react";
import { Text } from "@adobe/react-spectrum"
import { extensionId } from "./Constants"
import { register } from "@adobe/uix-guest";

function ExtensionRegistration() {
    useEffect(() => {
        const init = async () => {
            const registrationConfig = {
                id: extensionId,
                methods: {
                    headerMenu: {
                        getButtons() {
                            return [
                                {
                                    id: "example.open_in_editor",
                                    label: "UIX Open In Editor",
                                    icon: 'Export',
                                    variant: "primary",
                                    onClick: async () => {
                                        console.log("UIX Open In Editor has been pressed.");
                                        const contentFragment = await guestConnection.host.contentFragment.getContentFragment();
                                        // or any other content fragment path

                                        console.log(contentFragment.path);
                                        guestConnection.host.navigation.openEditor(contentFragment.path);
                                    },
                                },
                            ];
                        },
                    },
                },
            };
            const guestConnection = await register(registrationConfig);
        }
        init().catch(console.error)
    }, []);
    return <Text>IFrame for integration with Host (AEM)...</Text>
}

export default ExtensionRegistration;