App Intents and Connections

1
type LaunchContext = {
2
    type: 'AppIntent';
3
    value: {
4
        image: 'manage'; // Will only be present if the App Intent is for managing images
5
        form: 'manage'; // Will only be present if the App Intent is for managing forms
6
    };
7
};

1
// Initialize state to store the launch context
2
const [launchContext, setLaunchContext] = React.useState(null);
3
4
React.useEffect(() => {
5
    // Define async function to fetch launch context
6
    async function onLoad() {
7
8
        // Get context from Webflow Designer when App is launched
9
        const context = await webflow.getLaunchContext();
10
        setLaunchContext(context); // Update state with the received context
11
12
        // Determine which page to show based on launch context
13
        if (context?.type === 'AppIntent') {
14
            if (context.value?.image === 'manage') { 
15
                navigate('/image-manager');
16
            } else if (context.value?.form === 'manage') {
17
                navigate('/form-manager');
18
            } else {
19
                navigate('/');
20
            }
21
        } else {
22
            navigate('/');
23
        }
24
    }
25
26
    // Call onLoad immediately when component mounts
27
    onLoad();
28
}, []); // Empty dependency array means this effect runs once on mount

1
// Initialize state to store the launch context and selected element
2
const [launchContext, setLaunchContext] = React.useState(null);
3
const [selectedElement, setSelectedElement] = React.useState(null);
4
5
React.useEffect(() => {
6
    // Define async function to fetch launch context and selected element
7
    async function onLoad() {
8
        // Get context from Webflow Designer when App is launched
9
        const context = await webflow.getLaunchContext();
10
        setLaunchContext(context); // Update state with the received context
11
12
        // Get and set the selected element
13
        const element = await webflow.getSelectedElement();
14
        setSelectedElement(element);
15
16
        // Set the App Connection based on element type and determine which page to show your user
17
        if (context?.type === 'AppIntent') {
18
            if (context.value?.image === 'manage') { 
19
                await element.setAppConnection('manageImageElement');
20
                navigate('/image-manager');
21
            } else if (context.value?.form === 'manage') {
22
                await element.setAppConnection('manageFormElement');
23
                navigate('/form-manager');
24
            } else {
25
                navigate('/');
26
            }
27
        } else {
28
            navigate('/');
29
        }
30
    }
31
32
    // Call onLoad immediately when component mounts
33
    onLoad();
34
}, []); // Empty dependency array means this effect runs once on mount

1
type LaunchContext = {
2
    type: 'AppConnection';
3
    value: string; // The identifier for the App Connection
4
};

1
// Initialize state to store the launch context and selected element
2
const [launchContext, setLaunchContext] = React.useState(null);
3
const [selectedElement, setSelectedElement] = React.useState(null);
4
5
React.useEffect(() => {
6
    // Define async function to fetch launch context and selected element
7
    async function onLoad() {
8
        // Get context from Webflow Designer when App is launched
9
        const context = await webflow.getLaunchContext();
10
        setLaunchContext(context); // Update state with the received context
11
12
        // Get and set the selected element
13
        const element = await webflow.getSelectedElement();
14
        setSelectedElement(element);
15
16
        // Handle different launch contexts
17
        if (context?.type === 'AppIntent') {
18
            // Handle App Intent launches
19
            if (context.value?.image === 'manage') { 
20
                await element.setAppConnection('manageImageElement');
21
                navigate('/image-manager');
22
            } else if (context.value?.form === 'manage') {
23
                await element.setAppConnection('manageFormElement');
24
                navigate('/form-manager');
25
            } else {
26
                navigate('/');
27
            }
28
        } else if (context?.type === 'AppConnection') {
29
            // Handle App Connection launches
30
            switch (context.value) {
31
                case 'manageImageElement':
32
                    navigate('/image-manager');
33
                    break;
34
                case 'manageFormElement':
35
                    navigate('/form-manager');
36
                    break;
37
                default:
38
                    navigate('/');
39
            }
40
        } else {
41
            // Handle direct launches (not from Intent or Connection)
42
            navigate('/');
43
        }
44
    }
45
46
    // Call onLoad immediately when component mounts
47
    onLoad();
48
}, []); // Empty dependency array means this effect runs once on mount

1
async function findConnectedElements() {
2
    // Get all elements on the page
3
    const elements = await webflow.getAllElements();
4
    const connectedElements = [];
5
6
    // Iterate through elements and check for connections
7
    for (const element of elements) {
8
        try {
9
            // Check if element supports App Connections
10
            if (element.getAppConnections) {
11
                const connections = await element.getAppConnections();
12
                
13
                // If element has connections, store it with relevant info
14
                if (connections && connections.length > 0) {
15
                    connectedElements.push({
16
                        connections,
17
                        type: element.type,
18
                        id: element.id
19
                    });
20
                }
21
            }
22
        } catch (error) {
23
            console.error(`Error checking connections for element: ${element.id}`, error);
24
        }
25
    }
26
27
    return connectedElements;
28
}