Adobe I/O Runtime動作
{align="center"}
AEM UI擴充功能可選擇包含任何數量的Adobe I/O Runtime動作。
Adobe I/O Runtime動作是可由擴充功能叫用的無伺服器函式。 執行需要與AEM或其他AdobeWeb服務互動的工作時,動作會很有用。 動作通常最適合用於執行長時間執行(超過幾秒鐘)的工作,或向AEM或其他Web服務發出HTTP請求。
使用Adobe I/O Runtime動作執行工作的好處包括:
- 動作是在瀏覽器內容之外執行的無伺服器函式,無需擔心CORS
- 使用者無法中斷動作(例如重新整理瀏覽器)
- 動作非同步,因此可在需要時隨時執行,而不會封鎖使用者
在AEM UI擴充功能的內容中,動作通常用於直接與AEM as a Cloud Service通訊:
- 從AEM收集有關選取或目前內容的相關資料
- 對內容執行自訂作業
- 內容客製化建立
雖然AEM UI擴充功能出現在特定的AEM UI中,但擴充功能及其支援動作可以叫用任何可用的AEM HTTP API,包括自訂AEM API端點。
叫用動作
Adobe I/O Runtime動作主要從AEM UI擴充功能中的兩個位置叫用:
從擴充功能註冊
可直接從擴充功能註冊代碼呼叫Adobe I/O Runtime動作。 最常見的使用案例是將動作繫結到不使用模式的標頭功能表按鈕。
./src/aem-ui-extension/web-src/src/components/ExtensionRegistration.js
...
// 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, usually defined in Constants.js
methods: {
// Configure your header menu button here
headerMenu: {
getButtons() {
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);
}
export default ExtensionRegistration;
從強制回應視窗
Adobe I/O Runtime動作可以直接從模式呼叫,以執行更多參與的工作,特別是依賴與AEM as a Cloud Service通訊、AdobeWeb服務或甚至第三方服務的工作。
Adobe I/O Runtime動作是以Node.js為基礎的JavaScript應用程式,會在無伺服器Adobe I/O Runtime環境中執行。 這些動作可由SPA擴充功能透過HTTP定址。
./src/aem-ui-extension/web-src/src/components/MyModal.js
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);
}
}
Adobe I/O Runtime動作
src/aem-ui-extension/actions/generic/index.js
const fetch = require('node-fetch')
const { Core } = require('@adobe/aio-sdk')
const { errorResponse, getBearerToken, stringParameters, checkMissingRequestInputs } = require('../utils')
async function main (params) {
const logger = Core.Logger('main', { level: params.LOG_LEVEL || 'info' })
try {
logger.debug(stringParameters(params))
// Check for missing request input parameters and headers
const requiredParams = [ 'aemHost', 'contentFragmentPaths' ]
const requiredHeaders = ['Authorization']
const errorMessage = checkMissingRequestInputs(params, requiredParams, requiredHeaders)
if (errorMessage) {
// return and log client errors
return errorResponse(400, errorMessage, logger)
}
// Extract the user Bearer token from the Authorization header used to authenticate the request to AEM
const accessToken = getBearerToken(params);
// Example HTTP request to AEM payload; This updates all 'title' properties of the Content Fragments to 'Hello World'
const body = {
"properties": {
"elements": {
"title": {
"value": "Hello World"
}
}
}
};
let results = await Promise.all(params.contentFragmentPaths.map(async (contentFragmentPath) => {
// Invoke the AEM HTTP Assets Content Fragment API to update each Content Fragment
// The AEM host is passed in as a parameter to the Adobe I/O Runtime action
const res = await fetch(`${params.aemHost}${contentFragmentPath.replace('/content/dam/', '/api/assets/')}.json`, {
method: 'put',
body: JSON.stringify(body),
headers: {
// Pass in the accessToken as AEM Author service requires authentication/authorization
'Authorization': `Bearer ${accessToken}`,
'Content-Type': 'application/json'
}
});
if (res.ok) {
logger.info(`Successfully updated title of ${contentFragmentPath}`);
return { contentFragmentPath, status: res.status, statusText: res.statusText, body: await res.json() };
} else {
logger.info(`Failed to update title of ${contentFragmentPath}`);
return { contentFragmentPath, status: res.status, statusText: res.statusText, body: await res.text() };
}
}));
// Return a response to the AEM Content Fragment extension React application
const response = {
statusCode: 200,
body: results
};
return response;
} catch (error) {
logger.error(error)
return errorResponse(500, 'server error', logger)
}
}
AEM HTTP API
以下AEM HTTP API通常用於透過擴充功能與AEM互動:
Adobenpm模組
以下是開發Adobe I/O Runtime動作的實用npm模組:
recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69