延期注册
AEM UI扩展是专门的App Builder应用程序，基于React并使用React Spectrum UI框架。
要定义AEM UI扩展的显示位置和方式，扩展的App Builder应用程序中需要两个配置：应用程序路由和扩展注册。
应用程序路由 app-routes
扩展的App.js声明了React路由器，该路由器包括在AEM UI中注册该扩展的索引路由。
最初加载AEM UI时会调用索引路由，此路由的目标会定义扩展在控制台中的公开方式。
./src/aem-ui-extension/web-src/src/components/App.js
import ExtensionRegistration from "./ExtensionRegistration"
...
function App(props) {
return (
<Router>
<ErrorBoundary onError={onError} FallbackComponent={fallbackComponent}>
<Routes>
{/* The index route maps to the extension registration */}
<Route index element={<ExtensionRegistration />} />
...
</Routes>
</ErrorBoundary>
</Router>
)
...
}
延期注册
ExtensionRegistration.js必须立即通过扩展的索引路由加载，并充当扩展的注册点。
基于初始化App Builder应用程序扩展时选择的AEM UI扩展模板，支持不同的扩展点。
有条件地包含扩展
AEM UI扩展可以执行自定义逻辑以限制该扩展所显示的AEM环境。 此检查在ExtensionRegistration组件中的register调用之前执行，如果不应显示该扩展，则会立即返回。
此检查的可用上下文有限：
- 加载扩展的AEM主机。
- 当前用户的AEM访问令牌。
加载扩展时最常见的检查包括：
-
使用AEM主机(
new URLSearchParams(window.location.search).get('repo'))确定是否应加载该扩展。- 仅在属于特定项目的AEM环境中显示扩展（如下例所示）。
- 仅显示特定AEM环境(AEM主机)上的扩展。
-
使用Adobe I/O Runtime操作对AEM进行HTTP调用以确定当前用户是否应该看到该扩展。
以下示例说明将扩展限制为程序p12345中的所有环境。
./src/aem-cf-console-admin-1/web-src/src/components/ExtensionRegistration.js
function ExtensionRegistration() {
const PROGRAM_ID = 'p12345';
// Get the current AEM Host (author-pXXX-eYYY.adobeaemcloud.com) the extension is loading on
const aemHost = new URLSearchParams(window.location.search).get('repo');
// Create a check to determine if the current AEM host matches the AEM program that uses this extension
const aemHostRegex = new RegExp(`^author-${PROGRAM_ID}-e[\\d]+\\.adobeaemcloud\\.com$`)
// Disable the extension if the Cloud Manager Program Id doesn't match the regex.
if (!aemHostRegex.test(aemHost)) {
return; // Skip extension registration if the environment is not in program p12345.
}
// Else, continue initializing the extension
const init = async () => { .. };
init().catch(console.error);
}
recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69