微前端資產選擇器 Overview
微前端資產選擇器提供一個輕鬆整合 Experience Manager Assets 存放庫的使用者介面，讓您可以瀏覽或搜尋存放庫中的可用數位資產，並用於您的應用程式編寫體驗。
在您的應用程式體驗中可利用資產選擇器套件使用微前端使用者介面。套件的任何更新都會自動匯入，而最新部署的資產選擇器會自動載入到您的應用程式。
資產選擇器提供了許多優點，例如：
先決條件 prereqs
您必須確定下列通訊方法：
- 應用程式正在HTTPS上執行。
- 應用程式的URL位於IMS使用者端的允許重新導向URL清單中。
- IMS登入流程已設定完畢，並使用網頁瀏覽器上的快顯視窗呈現。 因此，目標瀏覽器上應該啟用或允許快顯視窗。
如果您需要Asset Selector的IMS驗證工作流程，請使用上述先決條件。 或者，如果您已通過IMS工作流程驗證，您可以改為新增IMS資訊。
- 託管整合應用程式的網域名稱。
- 布建後，您的組織將會收到
imsClientId、imsScope以及對應到設定資產選擇器所需必要環境的redirectUrl。 如果沒有這些有效的屬性，您就無法執行安裝步驟。
安裝 installation
資產選擇器可透過ESM CDN （例如esm.sh/skypack）和UMD版本使用。
在使用 UMD 版 的瀏覽器中 (建議)：
<script src="https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/assets-selectors.js"></script>
<script>
const { renderAssetSelector } = PureJSSelectors;
</script>
在具備 import maps 支援並使用 ESM CDN 版 的瀏覽器中：
<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 Module Federation 中：
import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'
使用 Vanilla JS 整合資產選擇器 integration-using-vanilla-js
您可以將任何Adobe或非Adobe應用程式與Experience Manager Assets存放庫整合，並從應用程式中選取資產。 請參閱資產選擇器與各種應用程式的整合。
匯入資產選擇器套件，並使用 Vanilla JavaScript 程式庫連接到 Assets as a Cloud Service，便完成了整合作業。編輯index.html或您應用程式內的任何適當檔案，以：
- 定義身份驗證詳細資訊
- 存取 Assets as a Cloud Service 存放庫
- 設定資產選擇器顯示屬性
在以下情況下，您可以在不定義某些 IMS 屬性的情況下執行身份驗證：
- 在 Adobe Unified Shell 之上整合一個應用程式時。
- 您已經具有針對身份驗證產生的一個 IMS 語彙基元。
整合Asset Selector與各種應用程式 asset-selector-integration-with-apps
您可以整合Asset Selector與各種應用程式，例如：
先決條件 prereqs-adobe-app
如果您整合Asset Selector與Adobe應用程式，請使用下列先決條件：
- 通訊方法
- imsOrg
- imsToken
- apikey
將資產選擇器與Adobe應用程式整合 adobe-app-integration-vanilla
下列範例示範在Unified Shell下執行Adobe應用程式或您已針對驗證產生imsToken時，資產選擇器的使用方式。
使用script標籤在您的程式碼中加入Asset Selector套件，如下列範例的 行6-15 所示。 在載入指令碼後，即可使用 PureJSSelectors 全域變數。定義資產選擇器屬性，如 行16-23 所示。 在Adobe應用程式中驗證時需要imsOrg和imsToken屬性。 handleSelection 屬性用於處理選取的資產。要轉譯資產選擇器，請呼叫 renderAssetSelector 函數，如 第 17 行 所述。資產選擇器顯示於 <div> 容器元素，如 第 21 和 22 行 所示。
按照這些步驟操作，您就可以將Asset Selector與Adobe應用程式搭配使用。
| code language-html line-numbers |
|---|
|
| accordion | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ImsAuthProps | ||||||||||||||||||||
|
|
| accordion | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ImsAuthService | ||||||||||||||
|
|
| accordion | ||
|---|---|---|
| 使用提供的IMS權杖進行驗證 | ||
|
| accordion | ||
|---|---|---|
| 向IMS服務註冊回呼 | ||
|
先決條件 prereqs-non-adobe-app
如果您整合Asset Selector與非Adobe應用程式，請使用下列先決條件：
- 通訊方法
- imsClientId
- imsScope
- redirectUrl
- imsOrg
- apikey
當您將Experience Manager Assets儲存庫與非Adobe應用程式整合時，Asset Selector支援使用Identity Management System (IMS)屬性（例如imsScope或imsClientID）驗證該儲存庫。
| accordion |
|---|
| 設定非Adobe應用程式的資產選擇器 |
|
若要為非Adobe應用程式設定「資產選擇器」，您必須先記錄布建的支援票證，然後進行整合步驟。 正在記錄支援票證
|
| accordion | ||
|---|---|---|
| 整合步驟 | ||
|
整合Asset Selector與非Adobe應用程式時，請使用這個範例 使用 範例的 第14 行到 第38 行說明IMS流程屬性，例如 由於您尚未產生 在 在 第65 行中提到的 資產選擇器已在
|
| accordion | |||
|---|---|---|---|
| 無法存取傳遞存放庫 | |||
|
先決條件 prereqs-polaris
如果您整合Asset Selector與Dynamic Media以及OpenAPI功能，請使用下列先決條件：
-
若要使用OpenAPI功能存取Dynamic Media，您必須擁有下列專案的授權：
- Assets存放庫(例如Experience Manager Assetsas a Cloud Service)。
- AEM Dynamic Media。
-
只有個核准的資產可供使用，以確保品牌一致性。
Dynamic Media與OpenAPI功能的整合 adobe-app-integration-polaris
Asset Selector與Dynamic Media OpenAPI程式的整合涉及各種步驟，包括建立自訂的動態媒體URL或準備挑選動態媒體URL等。
| accordion | ||
|---|---|---|
| 整合Dynamic Media的資產選擇器與OpenAPI功能 | ||
|
此設定可讓您檢視所有核准的資產，而不使用資料夾或以平面結構檢視。 如需詳細資訊，請導覽至資產選擇器屬性下的 |
| accordion | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 從核准的資產建立動態傳遞URL | ||||||||||||||||
|
設定「資產選擇器」後，系統會使用物件的結構描述，從選取的資產建立動態傳送URL。
所有選取的資產都由做為JSON物件的
核准的資產傳遞API規格 URL格式： 其中，
已核准的資產傳遞API 動態傳送URL擁有下列語法：
|
| accordion | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 已準備好挑選動態傳遞URL | |||||||||||||||||||
|
所有選取的資產都由做為JSON物件的
以下是遍歷JSON物件的兩種方式：
在上述熒幕擷圖中，如果需要PDF，而非其縮圖，則需要將PDF原始轉譯的傳送URL合併到目標體驗中。 例如
|
| accordion |
|---|
| 設定自訂篩選器 |
|
Dynamic Media的資產選擇器搭配OpenAPI功能，可讓您設定自訂屬性以及基於這些屬性的篩選器。
對於設定，定義在 例如，在具有OpenAPI功能的Dynamic Media資產選擇器中， 若要取得名稱，必須完成一次性活動。 對資產發出搜尋API呼叫，然後取得屬性名稱（基本上是貯體）。 |
資產選擇器屬性 asset-selector-properties
您可以使用資產選擇器屬性自訂資產選擇器的呈現方式。下表列出可用於自訂和使用資產選擇器的屬性。
true，資產選擇器將會在左側邊欄檢視中轉譯。 如果資產選擇器標示為false，則會以模組檢視呈現。imsOrg金鑰是驗證您所存取的組織是否位於Adobe IMS下的必要專案。imsToken。apiKey。<Object>[{id: 'urn:234}, {id: 'urn:555'}] 資產。如果您需要使用不同的目錄，請為該 path 屬性提供一個值。rail屬性搭配使用，以啟用資產檢視器的邊欄檢視。Object<{ id?: string, defaultMessage?: string, description?: string}>i18nSymbols prop傳遞自己的自訂本地化值。 透過此介面傳遞值會覆寫所提供的預設翻譯，並改用您自己的翻譯。 若要執行覆寫，您必須傳遞一個有效的 Message Descriptor 物件至您想要覆寫的 i18nSymbols 金鑰。intl.localeprop 提供有效的語言環境字串，以選擇翻譯語言。例如：intl={{ locale: "es-es" }}支援的語言環境字串遵循 ISO 639 - 代碼來選擇代表語言標準名稱的代碼。
支援的語言環境清單：英文 - 'en-us' (預設) 西班牙文 - 'es-es' 德文 - 'de-de' 法文 - 'fr-fr' 義大利文 - 'it-it' 日文 - 'ja-jp'韓文 - 'ko-kr' 葡萄牙文 - 'pt-br' 中文 (繁體)- 'zh-cn' 中文 (台灣) - 'zh-tw'
Array<string>{allowList?: Object}light或者dark)。在選取資產並按一下Select模組上的按鈕時，叫用資產項目陣列。此函數僅在模組視圖中叫用。對於邊欄視圖，請使用 handleAssetSelection或onDrop 函數。範例：
handleSelection=(assets: Asset[])=> {…}
查看選取的資產類型以了解詳細資訊。
在選擇或取消選擇資產時，以項目陣列叫用。當您想要在使用者選擇資產時進行監聽，這是十分實用的功能。範例：
handleSelection=(assets: Asset[])=> {…}
查看選取的資產類型以了解詳細資訊。
Close模組視圖中的按鈕時叫用。這只在modal視圖中呼叫，而在rail視圖中忽略。single或multiple資產選擇方式。語法：
aemTierType:[0]: "author" 1: "delivery"例如，如果同時使用
["author","delivery"]，則存放庫切換器會顯示製作和傳遞的選項。filterRepoList回呼函式來呼叫Experience Manager存放庫並傳回已篩選的存放庫清單。EXPIRED、EXPIRING_SOON或NOT_EXPIRED。 請參閱自訂過期的資產。 此外，您可以使用 allowSelectionAndDrag，函式值可以是true或false。 當值設定為false時，無法在畫布上選取或拖曳過期的資產。使用資產選擇器屬性的範例 usage-examples
您可以定義 index.html 檔案裡的資產選擇器屬性，以便自訂在應用程式內的資產選擇器顯示。
範例 1：邊欄視圖中的資產選擇器
如果AssetSelector rail的值設為false或未在屬性中提及，預設會在強制回應檢視中顯示Asset Selector。 acvConfig屬性允許一些深入設定，例如拖放。 請造訪啟用或停用拖放，以瞭解acvConfig屬性的使用方式。
範例 2：中繼資料彈出視窗
使用各種屬性定義您要使用資訊圖示檢視的資產中繼資料。資訊彈出視窗提供有關資產或資料夾的資訊集合，包括資產的標題、尺寸、修改日期、位置和說明。在下面的範例中，各種屬性用於顯示資產的中繼資料，例如，repo:path屬性指定資產的位置。
範例 3：邊欄視圖中的自訂篩選器屬性
除了多面向搜尋之外，Assets Selector可讓您自訂各種屬性，以將搜尋從Adobe Experience Manager縮小為Cloud Service應用程式。 新增下列程式碼，在您的應用程式中新增自訂的搜尋篩選器。 在下面的範例中，Type Filter在影像、文件或影片中篩選資產類型，或為搜尋新增篩選器類型的搜尋。
功能設定程式碼片段 code-snippets
定義index.html檔案或應用程式實作中類似檔案的先決條件，以定義存取Experience Manager Assets存放庫的驗證詳細資料。 完成後，您可以視需求新增程式碼片段。
自訂篩選器面板 customize-filter-panel
您可以在assetSelectorProps物件中新增下列程式碼片段，以自訂篩選器面板：
filterSchema: [
{
header: 'File Type',
groupKey: 'TopGroup',
fields: [
{
element: 'checkbox',
name: 'type',
options: [
{
label: 'Images',
value: '<comma separated mimetypes, without space, that denote all images, for e.g., image/>',
},
{
label: 'Videos',
value: '<comma separated mimetypes, without space, that denote all videos for e.g., video/,model/vnd.mts,application/mxf>'
}
]
}
]
},
{
fields: [
{
element: 'checkbox',
name: 'type',
options: [
{ label: 'JPG', value: 'image/jpeg' },
{ label: 'PNG', value: 'image/png' },
{ label: 'TIFF', value: 'image/tiff' },
{ label: 'GIF', value: 'image/gif' },
{ label: 'MP4', value: 'video/mp4' }
],
columns: 3,
},
],
header: 'Mime Types',
groupKey: 'MimeTypeGroup',
}},
{
fields: [
{
element: 'checkbox',
name: 'property=metadata.application.xcm:keywords.value',
options: [
{ label: 'Fruits', value: 'fruits' },
{ label: 'Vegetables', value: 'vegetables'}
],
columns: 3,
},
],
header: 'Food Category',
groupKey: 'FoodCategoryGroup',
}
],
在強制回應檢視中自訂資訊 customize-info-in-modal-view
按一下
// Create an object infoPopoverMap and set the property `infoPopoverMap` with it in assetSelectorProps
const infoPopoverMap = (map) => {
// for example, to skip `path` from the info popover view
let defaultPopoverData = PureJSSelectors.getDefaultInfoPopoverData(map);
return defaultPopoverData.filter((i) => i.label !== 'Path'
};
assetSelectorProps.infoPopoverMap = infoPopoverMap;
啟用或停用拖放模式 enable-disable-drag-and-drop
將下列屬性新增至assetSelectorProp以啟用拖放模式。 若要停用拖放，請將true引數取代為false。
rail: true,
acvConfig: {
dragOptions: {
allowList: {
'*': true,
},
},
selectionType: 'multiple'
}
// the drop handler to be implemented
function drop(e) {
e.preventDefault();
// following helps you get the selected assets – an array of objects.
const data = JSON.parse(e.dataTransfer.getData('collectionviewdata'));
}
選擇Assets selection-of-assets
選取的資產類型是一個物件陣列，包含使用 handleSelection、handleAssetSelection 和 onDrop 函數時的資產資訊。
執行以下步驟，設定選取單一或多個資產的選項：
acvConfig: {
selectionType: 'multiple' // 'single' for single selection
}
// the `handleSelection` callback, always gets you the array of selected assets
綱要語法
interface SelectedAsset {
'repo:id': string;
'repo:name': string;
'repo:path': string;
'repo:size': number;
'repo:createdBy': string;
'repo:createDate': string;
'repo:modifiedBy': string;
'repo:modifyDate': string;
'dc:format': string;
'tiff:imageWidth': number;
'tiff:imageLength': number;
'repo:state': string;
computedMetadata: Record<string, any>;
_links: {
'https://ns.adobe.com/adobecloud/rel/rendition': Array<{
href: string;
type: string;
'repo:size': number;
width: number;
height: number;
[others: string]: any;
}>;
};
}
下表說明選取之資產物件的一些重要屬性。
Array<string>Record<string, any>Record<string, any>自訂過期的資產 customize-expired-assets
資產選擇器可讓您控制已過期資產的使用方式。 您可以使用 即將到期 徽章來自訂已到期的資產，這可以協助您提前知道將在目前日期起30天內到期的資產。 此外，您也可以視需求自訂。 您也可以允許在畫布上選取過期的資產，反之亦然。 您可以使用某些程式碼片段，以各種方式自訂過期的資產：
expiryOptions: {
getExpiryStatus: getExpiryStatus;
}
選取已過期的資產 selection-of-expired-asset
您可以自訂已過期資產的使用方式，使其成為可選取或無法選取。 您可以自訂是否允許在「資產選擇器」畫布上拖放過期的資產。 若要這麼做，請使用下列引數，讓資產在畫布上無法選取：
expiryOptions:{
allowSelectionAndDrop: false;
}
設定過期資產的持續時間 set-duration-of-expired-asset
下列程式碼片段可協助您為將在未來五天內到期的資產設定 即將到期 徽章：
/**
const getExpiryStatus = async (asset) => {
if (!asset.expirationDate) {
return null;
}
const currentDate = new Date();
const millisecondsInDay = 1000 * 60 * 60 * 24;
const fiveDaysFromNow = new Date(value: currentDate.getTime() + 5 * millisecondsInDay);
const expirationDate = new Date(asset.expirationDate);
if (expirationDate.getTime() < currentDate.getTime()) {
return 'EXPIRED';
} else if (expirationDate.getTime() < fiveDaysFromNow.getTime()) {
return 'EXPIRING_SOON';
} else {
return 'NOT_EXPIRED';
}
};
請參閱以下範例，瞭解屬性如何運作以擷取目前的日期和時間：
const currentData = new Date();
currentData.getTime(),
傳回1718779013959，其格式為日期格式2024-06-19T06:36:53.959Z。
自訂已過期資產的快顯通知訊息 customize-toast-message
showToast屬性是用來自訂您要在過期資產上顯示的快顯通知訊息。
語法：
{
type: 'ERROR', 'NEUTRAL', 'INFO', 'SUCCESS',
message: '<message to be shown>',
timeout: optional,
}
預設逾時為500毫秒。 然而，您可以視需要加以修改。 此外，傳遞值timeout: 0會保持快顯通知開啟，直到您按一下交叉按鈕為止。
以下是當需要禁止選取資料夾並顯示對應訊息時顯示快顯通知訊息的範例：
const showToast = {
type: 'ERROR',
message: 'Folder cannot be selected',
timeout: 5000,
}
使用下列程式碼片段，顯示使用過期資產的快顯通知訊息：
關聯式引動篩選 contextual-invocation-filter
資產選擇器可讓您新增標籤選取器篩選器。 它支援標籤群組，此群組會將所有相關標籤結合至特定標籤群組。 此外，它可讓您選取與您正在尋找的資產對應的其他標籤。 此外，您也可以在大部分由您使用的內容叫用篩選下設定預設標籤群組，以便您隨時可以存取這些群組。
- 您必須新增內容引動程式碼片段，才能在搜尋中啟用標籤篩選器。
- 必須使用對應至標籤群組型別
(property=xcm:keywords.id=)的名稱屬性。
語法：
const filterSchema=useMemo(() => {
return: [
{
element: 'taggroup',
name: 'property=xcm:keywords.id='
},
];
}, []);
若要在篩選器面板中新增標籤群組，必須至少新增一個標籤群組作為預設值。 此外，使用以下程式碼片段，新增從標籤群組中預先選取的預設標籤。
export const WithAssetTags = (props) = {
const [selectedTags, setSelectedTags] = useState (
new Set(['orientation', 'color', 'facebook', 'experience-fragments:', 'dam', 'monochrome'])
const handleSelectTags = (selected) => {
setSelectedTags (new Set (selected)) ;
};
const filterSchema = useMemo ((); => {
return {
schema: [
｛
fields: [
{
element: 'checkbox',
name: 'property=xcm:keywords=',
defaultValue: Array. from(selectedTags),
options: assetTags,
orientation: 'vertical',
},
],
header: 'Asset Tags',
groupkey: 'AssetTagsGroup',
],
},
｝；
}, [selectedTags]);
使用物件綱要處理資產選擇 handling-selection
handleSelection 屬性用於處理資產選擇器中單個或多個資產選擇。下面的範例說明使用 handleSelection 的語法。
停用選擇的Assets disable-selection
「停用選取」可用來隱藏或停用資產或資料夾無法選取的功能。 它會隱藏卡片或資產中的「選取」核取方塊，使其無法選取。 若要使用此功能，您可以宣告要在陣列中停用的資產或資料夾位置。 例如，如果您要停用選取出現在第一個位置的資料夾，可以新增下列程式碼：disableSelection: [0]:folder
您可以為陣列提供您想要停用的mime型別（例如影像、資料夾、檔案或其他mime型別，例如image/jpeg）清單。 您宣告的mime型別對應到資產的data-card-type和data-card-mimetype屬性。
此外，已停用選取範圍的Assets是可拖曳的。 若要停用特定資產型別的拖放，您可以使用dragOptions.allowList屬性。
停用選取的語法如下：
(args)=> {
return(
<ASDialogWrapper
{...args}
disableSelection={args.disableSelection}
handleAssetSelection={action('handleAssetSelection')}
handleSelection={action('handleSelection')}
selectionType={args.selectionType}
/>
);
}
使用資產選擇器 using-asset-selector
在資產選擇器設定完成後，且您以 Adobe Experience Manager as a Cloud Service 應用程式使用資產選擇器完成身分驗證，則您可以選擇資產或執行各種其他操作，以便在存放庫中搜尋您的資產。
隱藏/顯示面板 hide-show-panel
若要將資料夾隱藏在左側導覽中，請按一下 隱藏資料夾 圖示。要還原變更，請再按一下 隱藏資料夾 圖示。
存放庫切換器 repository-switcher
Asset Selector也可讓您切換資產選取的存放庫。 您可以從左側面板中的下拉清單中選擇您要的存放庫。下拉清單中可用的存放庫選項是根據repositoryId index.html檔案中定義的屬性。其基礎是登入使用者存取之所選IMS組織的環境。 消費者可以傳遞一個偏好的repositoryID，而且在該情況下，資產選擇器將停止呈現 repo 切換器，並僅從指定的存放庫呈現資產。
資產存放庫
那是可用於執行操作的資產資料夾集合。
現成可用篩選器 filters
資產選擇器也提供現成可用的篩選器選項，以調整您的搜尋結果。您可以使用以下篩選器：
-
狀態： 包含
all、approved、rejected或no status之間的資產目前狀態。 -
檔案型別： 包含
folder、file、images、documents或video。 -
到期狀態： 根據資產的到期持續時間提及該資產。 您可以勾選「
Expired」核取方塊以篩選過期的資產；或設定資產的Expiration Duration以根據資產的到期持續時間顯示資產。 當資產已過期或即將過期時，系統會顯示一個標誌，說明相同專案。 此外，您可以控制是否允許使用（或拖放）過期的資產。 深入瞭解自訂過期的資產。 依預設，會針對未來30天即將到期的資產顯示 即將到期 徽章。 不過，您可以使用expirationDate屬性來設定到期日。note tip TIP 若要根據資產的未來到期日檢視或篩選資產，請在「 Expiration Duration」欄位中提及未來日期範圍。 它會顯示具有 即將到期 徽章的資產。 -
MIME型別： 包含
JPG、GIF、PPTX、PNG、MP4、DOCX、TIFF、PDF、XLSX。 -
影像大小： 包含影像的最小/最大寬度、最小/最大高度。
自訂搜尋
除了全文檢索搜尋之外，「資產選擇器」可讓您使用自訂搜尋功能來搜尋檔案中的資產。 您可以在模組視圖和邊欄視圖模式下，使用自訂搜尋篩選器。
您也可以建立預設的搜尋篩選器，以儲存您經常搜尋的欄位，以供之後使用。若要為資產建立自訂搜尋，您可以使用 filterSchema 屬性。
搜尋列 search-bar
「資產選擇器」可讓您在選取的存放庫中執行資產的全文搜尋。 例如，如果您在搜尋列中鍵入關鍵字 wave，就會顯示中繼資料屬性中提及 wave 關鍵字的所有資產。
排序 sorting
您可以按資產的名稱、維度或大小對資產選擇器中的資產進行排序。您可以依照遞增或遞減順序排序資產。
視圖的類型 types-of-view
「資產選取器」可讓您以四種不同的檢視檢視檢視資產：
-
-
-
-
