Micro-FrontEnd-målväljare Overview

Micro-FrontEnd-målväljaren har ett användargränssnitt i programmet som enkelt kan integreras med Experience Manager Assets as a Cloud Service-databasen. Du kan söka efter eller bläddra till rätt mapp i Experience Manager Assets as a Cloud Service-databasen och överföra resurser från ditt program.

Användargränssnittet Micro-FrontEnd är tillgängligt i programupplevelsen med hjälp av paketet Destination Selector. Alla uppdateringar av paketet importeras automatiskt och den senaste distribuerade målväljaren läses in automatiskt i programmet.

Målväljaren har många fördelar, till exempel:

Artikelns omfattning är att visa hur du använder målväljaren med ett Adobe-program under Unified Shell eller när du redan har en imsToken genererad för autentisering. Dessa arbetsflöden kallas icke-SUSI-flöde i den här artikeln.

Utför följande uppgifter för att integrera och använda målväljaren med din Experience Manager Assets as a Cloud Service-databas:

Integrera målväljaren med Vanilla JS integration-with-vanilla-js

Du kan integrera ett Adobe- eller icke-Adobe-program med Experience Manager Assets som en Cloud Service-databas och välja resurser inifrån programmet.

Integreringen görs genom att du importerar målväljarpaketet och ansluter till Assets as a Cloud Service med Vanilla JavaScript-biblioteket. Du måste redigera en index.html eller en lämplig fil i programmet för att kunna -

Du kan utföra autentisering utan att definiera några IMS-egenskaper om:

Förutsättningar prerequisites

Definiera förutsättningarna i filen index.html eller en liknande fil i programimplementeringen för att definiera autentiseringsinformationen för att få åtkomst till Experience Manager Assets som en Cloud Service-databas. Förutsättningarna är följande:

Installation installation

Målväljaren är tillgänglig via både ESM CDN (till exempel version esm.sh/skypack) och version UMD.

I webbläsare som använder UMD-version (rekommenderas):

I webbläsare som använder UMD-version (rekommenderas):

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

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

I webbläsare med import maps-stöd och ESM CDN-version:

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

I Deno/Webpack Module Federation med ESM CDN version:

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

Markerat mål selected-destination

Målväljaren tar emot ett återanrop från onItemSelect, onTreeToggleItem eller onTreeSelectionChange med den valda katalogen som innehåller objektet (katalog, bild osv.).

Schemasyntax

interface SelectedDestination {
  id: string;
  children: SelectedDestination[];
  'repo:repositoryId': string;
  'dc:format': string;
  'repo:assetClass': string;
  'storage:directoryType': string;
  'storage:region': string;
  'repo:name': string;
  'repo:path': string;
  'repo:ancestors': string[];
  'repo:createDate': string;
  'storage:assignee':

  { type: string; id: string; }
  ;
  'repo:assetId': string;
  'aem:published': boolean;
  'repo:createdBy': string;
  'repo:state': string;
  'repo:id': string;
  'repo:modifyDate': string;
  _page:

  { orderBy: string; count: number; };
}

I följande tabell beskrivs några av de viktiga egenskaperna för det valda målet.

En fullständig lista över egenskaper och detaljerade exempel finns på Exempel på målväljarkod.

Exempel på icke-SUSI-flöde non-ims-vanilla

I det här exemplet visas hur du använder målväljaren med ett icke-SUSI-flöde när du kör ett Adobe-program under Unified Shell eller när du redan har imsToken genererats för autentisering.

Inkludera paketet med målväljare i koden med taggen script, vilket visas i raderna 6-15 i exemplet nedan. När skriptet har lästs in är den globala variabeln PureJSSelectors tillgänglig för användning. Definiera målväljaren egenskaper så som visas på raderna 16-23. Egenskaperna imsOrg och imsToken krävs båda för autentisering i icke-SUSI-flöde. Egenskapen handleSelection används för att hantera de valda resurserna. Om du vill återge målväljaren anropar du funktionen renderDestinationSelector så som anges på rad 17. Målväljaren visas i behållarelementet <div>, vilket visas på rader 21 och 22.

Genom att följa de här stegen kan du använda målväljaren med ett icke-SUSI-flöde i ditt Adobe-program.

<!DOCTYPE html>
<html>
<head>
    <title>Destination 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 DestinationSelector component
        const container = document.getElementById('destination-selector-container');
        // imsOrg and imsToken are required for authentication in non-SUSI flow
        const destinationSelectorProps = {
            imsOrg: 'example-ims@AdobeOrg',
            imsToken: "example-imsToken",
            apiKey: "example-apiKey-associated-with-imsOrg",
            handleSelection: (assets: SelectedAssetType[]) => {},
        };
        // Call the `renderDestinationSelector` available in PureJSSelectors globals to render DestinationSelector
        PureJSSelectors.renderDestinationSelector(container, destinationselectorprops);
    </script>
</head>

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

</html>

Detaljerade exempel finns på Exempel på målväljarkod.

Använd egenskaper för målväljare destination-selector-properties

Du kan använda egenskaperna för målväljaren för att anpassa hur målväljaren återges. I följande tabell visas de egenskaper som du kan använda för att anpassa och använda målväljaren:

Exempel på hur du använder egenskaper för målväljare usage-examples

Du kan definiera målväljarens egenskaper i filen index.html om du vill anpassa hur målväljaren visas i programmet.

Exempel 1: Skapa en mapp i målväljaren

Med målväljaren kan du skapa en mapp för att överföra, flytta eller kopiera resurser på en viss plats.

Exempel 2: Ange vytyp för målväljare

Målväljaren visar en stor mängd resurser i fyra olika vyer, bland annat listvyn, stödrastervyn, gallerivyn och vattenfallsvyn. Om du vill ange standardvytyp kan du använda egenskapen viewType. Egenskapen viewTypeOptions används tillsammans med egenskapen viewType för att ange andra vytyper så att andra alternativ för visningstyp kan visas i en listruta. Ett argument kan användas om du bara vill att ett alternativ ska visas.

Exempel 3: Initiera sökvägen till Assets-mappen

Använd egenskapen path för att definiera mappnamnet som visas automatiskt när målväljaren återges.

Använda målväljaren using-destination-selector

När målväljaren har konfigurerats och du autentiserats för att använda målväljaren med Adobe Experience Manager som ett Cloud Service -program, kan du välja resurser eller utföra olika åtgärder för att söka efter dina resurser i databasen.

Sökfältet search-bar

Med målväljaren kan du utföra fullständig textsökning av resurser i den valda databasen. Om du till exempel skriver nyckelordet wave i sökfältet visas alla resurser med nyckelordet wave som nämns i någon av metadataegenskaperna.

Sortering sorting

Du kan sortera resurser i målväljaren efter namn, dimension eller storlek för en resurs. Du kan också sortera resurserna i stigande eller fallande ordning.

Assets Repository assets-repo

Med målväljaren kan du även visa valfria databasdata som finns i AEM. Du kan använda egenskapen repositoryID för att initiera sökvägen till målmappen som du vill visa vid den första instansen av målväljaren.

Lägg till suffix eller prefix add-suffix-or-prefix

Det är ett exempel på egenskapen optionsFormSetup. Du kan använda den här för att bekräfta markeringen. Den skickas till händelsen onConfirm.

Skapa en mapp create-new-folder

Du kan skapa en mapp i målmappen för Adobe Experience Manager som en Cloud Service.

Typer av vy types-of-view

Med målväljaren kan du visa resursen i fyra olika vyer:

Info info

Med informations- eller informationsikonen kan du visa metadata för den valda resursen. Den innehåller olika detaljer som dimensioner, storlek, beskrivning, sökväg, ändringsdatum och skapad den. Metadatainformationen tillhandahålls när du överför eller kopierar eller skapar en resurs.

Välj mapp select-folder

Med knappen Välj mapp kan du välja resurser för olika åtgärder som är kopplade till egenskaper i målväljaren.