微前端資產選擇器

微前端資產選擇器提供一個輕鬆整合 Experience Manager Assets as a Cloud Service 存放庫的使用者介面，讓您可以瀏覽或搜尋存放庫中的可用數位資產，並用於您的應用程式編寫體驗。

在您的應用程式體驗中可利用資產選擇器套件使用微前端使用者介面。套件的任何更新都會自動匯入，而最新部署的資產選擇器會自動載入到您的應用程式。

概觀

資產選擇器提供了許多優點，例如：

  • 使用 Vanilla JavaScript 程式庫輕鬆整合任何 Adobe 或非 Adobe 應用程式。

  • 容易維護，因為資產選擇器套件的更新會自動部署到您的應用程式可用的資產選擇器。您的應用程式無需更新即可載入最新的修改內容。

  • 簡易的自訂功能，因為有可以控制應用程式中資產選擇器顯示的可用屬性。

  • 全文搜尋、開箱即用和自訂篩選器，可快速找到要在編寫體驗中使用的資產。

  • 能夠在 IMS 組織內切換存放庫以選擇資產。

  • 能夠按名稱、維度和大小對資產進行排序，並以清單、網格、圖庫或瀑布視圖檢視。

本文的範圍是示範在 Unified Shell 之下有 Adobe 應用程式或者已經產生用於身份驗證的 imsToken 的情況下，如何使用資產選擇器。這些工作流程在本文中稱為非 SUSI 流程。

執行以下任務，以便搭配 Experience Manager Assets as a Cloud Service 存放庫來整合與使用資產選擇器：

使用 Vanilla JS 整合資產選擇器

您可以整合任何 Adobe 或非 Adobe 應用程式與 Experience Manager Assets as a Cloud Service 存放庫，並從應用程式之中選擇資產。

匯入資產選擇器套件，並使用 Vanilla JavaScript 程式庫連接到 Assets as a Cloud Service，便完成了整合作業。您必須在應用程式內編輯一個 index.html 或任何適當的文件，以利 -

  • 定義身份驗證詳細資訊
  • 存取 Assets as a Cloud Service 存放庫
  • 設定資產選擇器顯示屬性

在以下情況下，您可以在不定義某些 IMS 屬性的情況下執行身份驗證：

  • 在 Adobe Unified Shell 之上整合一個應用程式時。
  • 您已經具有針對身份驗證產生的一個 IMS 語彙基元。

必備條件

在應用程式實作之內定義 index.html 檔案或類似檔案的必備條件，以定義存取 Experience Manager Assets as a Cloud Service 存放庫的身分驗證資料。必備條件包括：

  • imsOrg
  • imsToken
  • apikey

安裝

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'

選取的資產類型

選取的資產類型是一個物件陣列，包含使用 handleSelection、handleAssetSelection 和 onDrop 函數時的資產資訊。

綱要語法

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: {
        'http://ns.adobe.com/adobecloud/rel/rendition': Array<{
            href: string;
            type: string;
            'repo:size': number;
            width: number;
            height: number;
            [others: string]: any;
        }>;
    };
}

下表說明選取之資產物件的一些重要屬性。

屬性 類型 解釋
repo:repositoryId 字串 儲存資產之存放庫的唯一識別碼。
repo:id 字串 資產的唯一識別碼。
repo:assetClass 字串 資產的分類 (例如影像或影片、文件)。
repo:name 字串 資產的名稱，包括檔案副檔名。
repo:size 數字 資產的大小，以位元組計。
repo:path 字串 資產在存放庫中的位置。
repo:ancestors Array<string> 存放庫中資產的上階項目陣列。
repo:state 字串 存放庫中資產的目前狀態（例如，作用中、已刪除等）。
repo:createdBy 字串 建立資產的使用者或系統。
repo:createDate 字串 建立資產的日期與時間。
repo:modifiedBy 字串 上次修改資產的使用者或系統。
repo:modifyDate 字串 上次修改資產的日期和時間。
dc:format 字串 資產的格式，例如檔案型別(例如JPEG、PNG等)。
tiff:imageWidth 數字 資產的寬度。
tiff:imageLength 數字 資產的高度。
computedMetadata Record<string, any> 代表貯體的一個物件，可存放各種類型之所有資產中繼資料 (存放庫、應用程式或嵌入式中繼資料)。
_links Record<string, any> 相關資產的超媒體連結。包括中繼資料和轉譯等資源的連結。
_links.http://ns.adobe.com/adobecloud/rel/rendition Array<Object> 包含有關資產轉譯資訊的物件陣列。
_links.http://ns.adobe.com/adobecloud/rel/rendition[].href 字串 轉譯的 URI。
_links.http://ns.adobe.com/adobecloud/rel/rendition[].type 字串 轉譯的 MIME 類型。
_links.http://ns.adobe.com/adobecloud/rel/rendition[].'repo:size' 數字 轉譯的大小，以位元組計。
_links.http://ns.adobe.com/adobecloud/rel/rendition[].width 數字 轉譯的寬度。
_links.http://ns.adobe.com/adobecloud/rel/rendition[].height 數字 轉譯的高度。

如需完整的屬性清單和詳細範例，請造訪資產選擇器代碼範例 。

非 SUSI 流程的範例

本範例示範在 Unified Shell 之下執行 Adobe 應用程式時，或者在已經產生用於身份驗證的 imsToken 時，如何搭配非 SUSI 流程使用資產選擇器。

使用以下專案在您的程式碼中加入Asset Selector套件： script 標籤，如所示 第6-15行 範例的一部分。 在載入指令碼後，即可使用 PureJSSelectors 全域變數。定義資產選擇器 屬性 如所示 第16-23行. 在非 SUSI 流程執行身份驗證需要 imsOrg 和 imsToken 屬性。handleSelection 屬性用於處理選取的資產。要轉譯資產選擇器，請呼叫 renderAssetSelector 函數，如​第 17 行​所述。資產選擇器顯示於 <div> 容器元素，如​第 21 和 22 行​所示。

透過執行這些步驟，您可以在您的 Adobe 應用程式中，以非 SUSI 流程使用資產選擇器。

<!DOCTYPE html>
<html>
<head>
    <title>Asset Selector</title>
    <script src="https://experience.adobe.com/solutions/CQ-assets-selectors/assets/resources/assets-selectors.js"></script>
    <script>
        // get the container element in which we want to render the AssetSelector component
        const container = document.getElementById('asset-selector-container');
        // imsOrg and imsToken are required for authentication in non-SUSI flow
        const assetSelectorProps = {
            imsOrg: 'example-ims@AdobeOrg',
            imsToken: "example-imsToken",
            apiKey: "example-apiKey-associated-with-imsOrg",
            handleSelection: (assets: SelectedAssetType[]) => {},
        };
        // Call the `renderAssetSelector` available in PureJSSelectors globals to render AssetSelector
        PureJSSelectors.renderAssetSelector(container, assetSelectorProps);
    </script>
</head>

<body>
    <div id="asset-selector-container" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
    </div>
</body>

</html>

有關詳細的範例，請造訪資產選擇器代碼範例 。

使用資產選擇器屬性

您可以使用資產選擇器屬性自訂資產選擇器的呈現方式。下表列出可用於自訂和使用資產選擇器的屬性。

屬性 類型 必要 預設 說明
rail 布林值 否 false 若已標籤 true，資產選擇器會在左側邊欄檢視中轉譯。 若已標籤 false，資產選擇器會在模組檢視中呈現。
imsOrg 字串 是 Adobe Identity Management System (IMS) ID 是在為您的組織佈建 Adobe Experience Manager as a Cloud Service 時所指派的。此 imsOrg 需要金鑰才能驗證您要存取的組織是否位於Adobe IMS之下。
imsToken 字串 否 用於身份驗證的 IMS 持有人語彙基元。如果您使用的是非 SUSI 流程，則需要 imsToken。
apiKey 字串 否 用於存取 AEM Discovery 服務的 API 金鑰。如果您使用的是非 SUSI 流程，則需要 apiKey。
rootPath 字串 否 /content/dam/ 資產選擇器顯示資產的資料夾路徑。rootPath 也可以使用封裝形式。例如，假定路徑如下， /content/dam/marketing/subfolder/，Asset Selector不允許您周遊任何上層資料夾，只會顯示下層資料夾。
path 字串 否 在呈現資產選擇器時，用於導覽到特定資產目錄的路徑。
filterSchema 陣列 否 用於設定篩選器屬性的模式。這可用於想要限制資產選擇器中的特定篩選器選項時。
filterFormProps 物件 否 指定用於調整搜尋所需的篩選器屬性。例如，MIME 類型 JPG、PNG、GIF。
selectedAssets 陣列 <Object> 否 呈現資產選擇器時指定選取的資產。需要包含資產的 id 屬性的物件陣列。例如，在目前的目錄中必須可以使用 [{id: 'urn:234}, {id: 'urn:555'}] 資產。如果您需要使用不同的目錄，請為該 path 屬性提供一個值。
acvConfig 物件 否 資產集合視圖屬性包含的物件含有用於覆寫預設值的自訂設定。
i18nSymbols Object<{ id?: string, defaultMessage?: string, description?: string}> 否 如果 OOTB 翻譯不足以滿足應用程式的需求，您可以公開一個介面，並透過 i18nSymbolsprop 傳遞您自訂的本地化數值。透過此介面傳遞的值會覆寫已提供的預設翻譯，並改為使用您自己的翻譯。若要執行覆寫，您必須傳遞一個有效的 Message Descriptor 物件至您想要覆寫的 i18nSymbols 金鑰。
intl 物件 否 資產選擇器提供預設的 OOTB 翻譯。您可以透過 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’
repositoryId 字串 否 '' 資產選擇器從中載入內容的存放庫。
additionalAemSolutions Array<string> 否 [ ] 它可讓您新增其他AEM存放庫的清單。 如果此屬性未提供任何資訊，則僅考慮媒體資料庫或 AEM Assets 存放庫。
hideTreeNav 布林值 否 指定顯示或隱藏資產樹導覽側邊欄。那僅用於模組視圖，因此，此屬性在邊欄視圖中沒有影響。
onDrop 函數 否 該屬性允許資產的放置功能。
dropOptions {allowList?: Object} 否 使用 'allowList' 設定放置選項。
colorScheme 字串 否 為資產選擇器設定主題 (light或者dark)。
handleSelection 函數 否 在選取資產並按一下Select模組上的按鈕時，叫用資產項目陣列。此函數僅在模組視圖中叫用。對於邊欄視圖，請使用 handleAssetSelection或onDrop 函數。範例： 
handleSelection=(assets: Asset[])=> {…}
查看選取的資產類型以了解詳細資訊。
handleAssetSelection 函數 否 在選擇或取消選擇資產時，以項目陣列叫用。當您想要在使用者選擇資產時進行監聽，這是十分實用的功能。範例： 
handleSelection=(assets: Asset[])=> {…}
查看選取的資產類型以了解詳細資訊。
onClose 函數 否 在按下Close模組視圖中的按鈕時叫用。這只在modal視圖中呼叫，而在rail視圖中忽略。
onFilterSubmit 函數 否 當使用者變更不同的篩選條件時，以篩選項目叫用。
selectionType 字串 否 single 一次設定single或multiple資產選擇方式。

使用資產選擇器屬性的範例

您可以定義 index.html 檔案裡的資產選擇器屬性，以便自訂在應用程式內的資產選擇器顯示。

範例 1：邊欄視圖中的資產選擇器

rail-view-example

如果 AssetSelector 的值 rail 設定為 false 或屬性中未提及，資產選擇器依預設顯示於模組視圖中。

範例 2：中繼資料彈出視窗

使用各種屬性定義您要使用資訊圖示檢視的資產中繼資料。資訊彈出視窗提供有關資產或資料夾的資訊集合，包括資產的標題、尺寸、修改日期、位置和說明。在下面的範例中，各種屬性用於顯示資產的中繼資料，例如，repo:path屬性指定資產的位置。

metadata-popover-example

範例 3：邊欄視圖中的自訂篩選器屬性

除了多面向搜尋之外，Assets選擇器可讓您自訂各種屬性，以縮小您的搜尋範圍 Adobe Experience Manager as a Cloud Service 應用程式。 您必須新增以下代碼，以便在應用程式中新增自訂搜尋篩選器。在下面的範例中，Type Filter在影像、文件或影片中篩選資產類型，或為搜尋新增篩選器類型的搜尋。

custom-filter-example-vanilla

使用物件綱要處理資產選擇

handleSelection 屬性用於處理資產選擇器中單個或多個資產選擇。下面的範例說明使用 handleSelection 的語法。

handle-selection

使用資產選擇器

在資產選擇器設定完成後，且您以 Adobe Experience Manager as a Cloud Service 應用程式使用資產選擇器完成身分驗證，則您可以選擇資產或執行各種其他操作，以便在存放庫中搜尋您的資產。

using-asset-selector

隱藏/顯示面板

若要將資料夾隱藏在左側導覽中，請按一下​隱藏資料夾​圖示。要還原變更，請再按一下​隱藏資料夾​圖示。

存放庫切換器

Asset Selector也可讓您切換資產選取的存放庫。 您可以從左側面板中的下拉清單中選擇您要的存放庫。下拉清單中可用的存放庫選項是根據repositoryId index.html檔案中定義的屬性。那是根據於登入的使用者從選取的 IMS org 所存取的環境。消費者可以傳遞一個偏好的repositoryID，而且在該情況下，資產選擇器將停止呈現 repo 切換器，並僅從指定的存放庫呈現資產。

資產存放庫

那是可用於執行操作的資產資料夾集合。

現成可用篩選器

資產選擇器也提供現成可用的篩選器選項，以調整您的搜尋結果。您可以使用以下篩選器：

  • File type：包括資料夾、檔案、影像、文件或影片

  • MIME type：包括 JPG、GIF、PPTX、PNG、MP4、DOCX、TIFF、PDF、XLSX

  • Image Size：包括影像的最小/最大寬度，最小/最大高度

    rail-view-example

自訂搜尋

除了全文檢索搜尋之外，「資產選擇器」可讓您使用自訂搜尋功能來搜尋檔案中的資產。 您可以在模組視圖和邊欄視圖模式下，使用自訂搜尋篩選器。

custom-search

您也可以建立預設的搜尋篩選器，以儲存您經常搜尋的欄位，以供之後使用。若要為資產建立自訂搜尋，您可以使用 filterSchema 屬性。

「資產選擇器」可讓您在選取的存放庫中執行資產的全文搜尋。 例如，如果您在搜尋列中鍵入關鍵字 wave，就會顯示中繼資料屬性中提及 wave 關鍵字的所有資產。

排序

您可以按資產的名稱、維度或大小對資產選擇器中的資產進行排序。您可以依照遞增或遞減順序排序資產。

視圖的類型

「資產選取器」可讓您以四種不同的檢視檢視檢視資產：

  • 清單檢視 清單檢視：清單檢視在單一欄中顯示可捲動的檔案和資料夾。
  • 格線檢視 格線檢視：格線檢視在列與欄的格線中顯示可捲動的檔案和資料夾。
  • 圖庫檢視 圖庫檢視：圖庫檢視在居中鎖定的水平清單中顯示檔案或資料夾。
  • 瀑布檢視 瀑布檢視：瀑布檢視以 Bridge 的形式顯示檔案或資料夾。

本頁內容