AEM le estensioni dei frammenti di contenuto possono includere facoltativamente un numero qualsiasi di Azioni Adobe I/O Runtime.
Le azioni Adobe I/O Runtime sono funzioni senza server che possono essere richiamate dall'estensione . Le azioni sono utili per eseguire un lavoro che richiede l’interazione con AEM o altri servizi web di Adobe.
Le azioni sono in genere più utili per eseguire attività di lunga durata (per un periodo di tempo non superiore a pochi secondi) o per effettuare richieste HTTP a AEM o ad altri servizi web.
I vantaggi dell’utilizzo delle azioni Adobe I/O Runtime per eseguire il lavoro sono i seguenti:
Le azioni sono funzioni senza server che vengono eseguite al di fuori del contesto di un browser, eliminando la necessità di preoccuparsi di CORS
Le azioni non possono essere interrotte dall’utente (ad esempio, l’aggiornamento del browser)
Le azioni sono asincrone, quindi possono essere eseguite per tutto il tempo necessario senza bloccare l’utente
Nel contesto delle estensioni AEM frammento di contenuto, le azioni vengono spesso utilizzate per comunicare direttamente con AEM as a Cloud Service, spesso:
Raccolta di dati correlati da AEM sui frammenti di contenuto
Esecuzione di operazioni personalizzate sui frammenti di contenuto
Creazione personalizzata di frammenti di contenuto
Mentre l’estensione AEM frammento di contenuto viene visualizzata nella console Frammento di contenuto , le estensioni e le relative azioni di supporto possono richiamare qualsiasi API HTTP disponibile, inclusi gli endpoint API AEM personalizzati.
Richiamare un’azione
Le azioni Adobe I/O Runtime vengono invocate principalmente da due posizioni in un’estensione AEM frammento di contenuto:
Le azioni Adobe I/O Runtime possono essere richiamate direttamente dal codice di registrazione dell'estensione. Il caso d’uso più comune è quello di associare un’azione a un menu intestazionePulsante 's che non utilizza modali.
// allActions is an object containing all the actions defined in the extension's manifest
import allActions from '../config.json'
// actionWebInvoke is a helper that invokes an action
import actionWebInvoke from '../utils'
...
function ExtensionRegistration() {
const init = async () => {
const guestConnection = await register({
id: extensionId, // A unique ID for the extension
methods: {
// Configure your header menu button here
headerMenu: {
getButton() {
return {
'id': 'example.my-header-menu-extension', // Unique ID for the button
'label': 'My header menu extension', // Button label
'icon': 'Edit' // Button icon from https://spectrum.adobe.com/page/icons/
}
},
// Click handler for the extension button
onClick() {
// Set the HTTP headers required to access the Adobe I/O runtime action
const headers = {
'Authorization': 'Bearer ' + guestConnection.sharedContext.get('auth').imsToken,
'x-gw-ims-org-id': guestConnection.sharedContext.get('auth').imsOrg
};
// Set the parameters to pass to the Adobe I/O Runtime action
const params = {
aemHost: `https://${guestConnection.sharedContext.get('aemHost')}`, // Pass in the AEM host if the action interacts with AEM
aemAccessToken: guestConnection.sharedContext.get('auth').imsToken
};
try {
// Invoke Adobe I/O Runtime action named `generic`, with the configured headers and parameters.
const actionResponse = await actionWebInvoke(allActions['generic'], headers, params);
} catch (e) {
// Log and store any errors
console.error(e)
}
}
}
}
})
}
init().catch(console.error);
}
Da modale
Le azioni Adobe I/O Runtime possono essere richiamate direttamente dai moduli per eseguire lavori più coinvolgenti, in particolare per i lavori che si basano sulla comunicazione con AEM servizio Web as a Cloud Service, Adobe o anche con servizi di terze parti.
Le azioni Adobe I/O Runtime sono applicazioni JavaScript basate su Node.js che vengono eseguite nell'ambiente Adobe I/O Runtime senza server. Queste azioni possono essere indirizzate via HTTP dall'SPA dell'estensione.
import React, { useState, useEffect } from 'react'
import { attach } from "@adobe/uix-guest"
import {
Flex,
Provider,
Content,
defaultTheme,
Text,
ButtonGroup,
Button
} from '@adobe/react-spectrum'
import Spinner from "./Spinner"
import { useParams } from "react-router-dom"
import { extensionId } from "./Constants"
export default function MyModal() {
// Initial modal views for Action Bar extensions typically pass in the list of selected Content Fragment Paths from ExtensionRegistration.js
// Get the paths from useParams() and split on delimiter used
let { selection } = useParams();
let contentFragmentPaths = selection?.split('|') || [];
const [actionInvokeInProgress, setActionInvokeInProgress] = useState(false);
const [actionResponse, setActionResponse] = useState();
// Asynchronously attach the extension to AEM.
// Wait or the guestConnection to be set before doing anything in the modal.
const [guestConnection, setGuestConnection] = useState()
useEffect(() => {
(async () => {
const guestConnection = await attach({ id: extensionId })
setGuestConnection(guestConnection);
})()
}, [])
if (!guestConnection) {
// If the guestConnection is not initialized, display a loading spinner
return <Spinner />
} else if (!actionResponse) {
// Else if the modal is ready to render and has not called the Adobe I/O Runtime action yet
return (
<Provider theme={defaultTheme} colorScheme='light'>
<Content width="100%">
<Flex width="100%">
<Text>
The selected Content Fragments are: { contentFragmentPaths.join(', ') }
</Text>
<ButtonGroup align="end">
<Button variant="cta" onPress={doWork}>Do work</Button>
<Button variant="primary" onPress={() => guestConnection.host.modal.close()}>Close</Button>
</ButtonGroup>
</Flex>
</Content>
</Provider>
)
} else {
// Else the modal has called the Adobe I/O Runtime action and is ready to render the response
return (
<Provider theme={defaultTheme} colorScheme='light'>
<Content width="100%">
<Flex width="100%">
<Text>
Done! The response from the action is: { actionResponse }
</Text>
<ButtonGroup align="end">
<Button variant="primary" onPress={() => guestConnection.host.modal.close()}>Close</Button>
</ButtonGroup>
</Flex>
</Content>
</Provider>
)
}
/**
* Invoke the Adobe I/O Runtime action and store the response in the React component's state.
*/
async function doWork() {
// Mark the extension as invoking the action, so the loading spinner is displayed
setActionInvokeInProgress(true);
// Set the HTTP headers to access the Adobe I/O runtime action
const headers = {
'Authorization': 'Bearer ' + guestConnection.sharedContext.get('auth').imsToken,
'x-gw-ims-org-id': guestConnection.sharedContext.get('auth').imsOrg
};
// Set the parameters to pass to the Adobe I/O Runtime action
const params = {
aemHost: `https://${guestConnection.sharedContext.get('aemHost')}`,
contentFragmentPaths: contentFragmentPaths
};
try {
// Invoke Adobe I/O Runtime action with the configured headers and parameters
// Invoke the Adobe I/O Runtime action named `generic`.
const actionResponse = await actionWebInvoke(allActions['generic'], headers, params);
// Set the response from the Adobe I/O Runtime action
setActionResponse(actionResponse);
} catch (e) {
// Log and store any errors
console.error(e)
}
// Set the action as no longer being invoked, so the loading spinner is hidden
setActionInvokeInProgress(false);
}
}
