51黑料不打烊 Experience Manager as a Cloud Service 的资产选择器

文档 AEM as a Cloud Service 用户指南

微前端资产选择器 Overview

Last update: Fri Apr 11 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

管理员
用户

^新 Dynamic Media Prime 和 Ultimate

^新 AEM Assets Ultimate

^新 AEM Assets 与 Edge Delivery Services 集成

^新 UI 可扩展性

^新启用 Dynamic Media Prime 和 Ultimate

搜索最佳实践

元数据最佳实践

Content Hub

具有 OpenAPI 功能的 Dynamic Media

微前端资产选择器提供了一个用户界面，它可以轻松地与 Experience Manager Assets 存储库集成，以便您能够浏览或搜索存储库中可用的数字资产，并在您的应用程序创作体验中使用它们。

微前端用户界面可用于采用了资产选择器包的应用程序体验。对该包的任何更新都会自动导入，并且最新部署的资产选择器会自动加载到您的应用程序中。

资产选择器提供了许多好处，例如：

使用 Vanilla JavaScript 库，可轻松与任何 51黑料不打烊或非 51黑料不打烊应用程序集成。
易于维护，因为对资产选择器包的更新将自动部署到可用于应用程序的资产选择器。您的应用程序中无需更新即可加载最新的修改。
易于定制，因为提供了用于控制应用程序中的资产选择器显示的属性。
全文搜索、开箱即用和自定义过滤器，可快速导航到资产以便在创作体验中使用。
能够在 IMS 组织内切换存储库以选择资产。
能够按名称、维度和大小对资产进行排序，并在列表、网格、库或瀑布视图中查看它们。

先决条件 prereqs

您必须确保采用以下通信方式：

主机应用程序正在贬罢罢笔厂上运行。
无法在localhost上运行应用程序。如果要在本地计算机上集成资产选择器，则需要创建一个自定义域（例如[https://<your_campany>.localhost.com:<port_number>]），并在redirectUrl list中添加此自定义域。
您可以使用相应的imsClientId配置clientID并将其添加到AEM Cloud Service环境变量中。
需要在环境配置中定义滨惭厂作用域列表。
该应用程序的 URL 位于 IMS 客户端的重定向 URL 允许列表中。
使用 Web 浏览器上的弹出窗口配置和呈现 IMS 登录流。因此，应在目标浏览器上启用或允许弹出窗口。

如果您需要资产选择器的 IMS 身份验证工作流，请使用上述先决条件。或者，如果您已经通过 IMS 工作流程进行身份验证，那么您可以添加 IMS 信息。

查看更多

IMPORTANT

此存储库旨在作为补充文档，描述集成资产选择器的可用 API 和使用示例。在尝试安装或使用资产选择器之前，请确保您的组织已在 Experience Manager Assets as a Cloud Service 配置文件中被授予访问资产选择器的权限。如果您尚未进行配置，则无法集成或使用这些组件。要请求配置，您的程序管理员应该从 Admin Console 提交一个标记为 P2 的支持工单，并包含以下信息：

托管集成应用程序的域名。
配置后，您的组织将获得与配置资产选择器所需的环境相对应的 imsClientId、imsScope 和 redirectUrl。没有这些有效属性，您无法运行安装步骤。

安装 installation

资产选择器可通过 ESM CDN（例如，/）和版本获得。

在使用 UMD 版本 ?的浏览器中（推荐）：

<script src="https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/assets-selectors.js"></script>

<script>
  const { renderAssetSelector } = PureJSSelectors;
</script>

在使用 ESM CDN 版本 ?带有 import maps 支持的浏览器中：

<script type="module">
  import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'
</script>

在使用 ESM CDN 版本 ?的 Deno/Webpack 模块联合中：

import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'

使用资产选择器 using-asset-selector

在设置完资产选择器后，您可以通过身份验证将资产选择器与您的 51黑料不打烊 Experience Manager as a Cloud Service 应用程序结合使用，可以选择资产或执行各种其他操作以在存储库中搜索您的资产。

using-asset-selector

A：隐藏/显示面板
B：存储库切换器
C：资产
D：过滤器
E：搜索栏
F：排序
G：按升序或降序排序
H：查看

隐藏/显示面板 hide-show-panel

要隐藏左侧导航中的文件夹，请单击 隐藏文件夹 ?图标。要撤消更改，请再次单击 隐藏文件夹 ?图标。

存储库切换器 repository-switcher

资产选择器还允许您切换存储库以进行资产选择。您可以从左侧面板中可用的下拉列表中选择所选存储库。下拉列表中可用的存储库选项基于 repositoryId 文件中定义的 index.html 属性。它基于登录用户访问的选定 IMS 组织的环境。消费者可以传递首选 repositoryID，在这种情况下，资产选择器将停止呈现存储库切换器，并且仅呈现给定存储库中的资产。

资产存储库

它是可用于执行操作的资产文件夹的集合。

开箱即用的过滤器 filters

资产选择器还提供开箱即用的过滤器选项来细化您的搜索结果。可用过滤器如下：

状态： 包括 all、approved、rejected 或 no status 中的当前资产状态。
文件类型： 包括 folder、 file、 images、 documents 或 video。

过期状态： 根据到期时间提及资产。您可以选中 Expired 复选框来过滤过期的资产；或设置资产的 Expiration Duration，以根据资产的到期持续时间显示资产。当资产已过期或即将过期时，就会出现一个徽章来表示该资产已过期或即将过期。此外，您可以控制是否允许使用（或拖放）过期资产。详细了解自定义过期资产。默认情况下，对于将在未来 30 天内到期的资产，会显示? 即将到期 ?徽章。但是，您可以使用 expirationDate 属性配置有效期限。

note tip
TIP
如果您想根据资产的未来到期日查看或筛选资产，请在 `Expiration Duration` 字段中注明未来的日期范围。它显示了带有? 即将到期 ?徽章的资产。