Zielauswahl für Micro-Frontend Overview

Die Zielauswahl für Micro-Frontend bietet eine Benutzeroberfläche innerhalb Ihrer Anwendung, die sich leicht in das Experience Manager Assets as a Cloud Service-Repository integrieren lässt. Sie können den entsprechenden Ordner im Experience Manager Assets as a Cloud Service-Repository suchen oder durchsuchen und Assets aus Ihrer Anwendung hochladen.

Die Micro-Frontend-Benutzeroberfläche wird über das Zielauswahl-Paket in Ihrer Anwendung verfügbar gemacht. Alle Aktualisierungen des Pakets werden automatisch importiert, und die zuletzt bereitgestellte Zielauswahl wird automatisch in Ihrer Anwendung geladen.

Die Zielauswahl bietet viele Vorteile, z. B.:

In diesem Artikel soll gezeigt werden, wie die Zielauswahl mit einer Adobe-Anwendung unter Unified Shell verwendet werden kann oder wenn Sie bereits ein imsToken für die Authentifizierung generiert haben. Ein solcher Workflow wird in diesem Artikel als Nicht-SUSI-Fluss bezeichnet.

Führen Sie die folgenden Aufgaben aus, um die Zielauswahl in Ihr Experience Manager Assets as a Cloud Service-Repository zu integrieren und zu verwenden:

Zielauswahl mit Vanilla JS integrieren integration-with-vanilla-js

Sie können jede Adobe oder Nicht-Adobe-Anwendung mit Experience Manager Assets als Cloud Service-Repository integrieren und Assets aus der Anwendung heraus auswählen.

Die Integration erfolgt durch den Import des Zielauswahl-Pakets und die Verbindung zu Assets as a Cloud Service unter Verwendung der Vanilla JavaScript-Bibliothek. Sie müssen eine index.html oder eine andere geeignete Datei innerhalb Ihrer Anwendung bearbeiten, um:

Sie können eine Authentifizierung durchführen, ohne einige der IMS-Eigenschaften zu definieren, wenn:

Voraussetzungen prerequisites

Definieren Sie die Voraussetzungen in der index.html-Datei oder einer ähnlichen Datei innerhalb Ihrer Anwendungsimplementierung, um die Authentifizierungsdetails für den Zugriff auf das Experience Manager Assets als Cloud Service-Repository festzulegen. Zu den Voraussetzungen gehören:

Installation installation

Die Zielauswahl ist sowohl über die ESM CDN-Version (z. B. esm.sh/skypack) als auch über die UMD-Version verfügbar.

In Browsern mit UMD-Version (empfohlen):

In Browsern mit UMD-Version (empfohlen):

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

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

In Browsern mit import maps-Unterstützung mit 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>

In der Deno/Webpack Module Federation mit ESM CDN-Version:

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

Ausgewähltes Ziel selected-destination

Die Zielauswahl empfängt einen Rückruf von onItemSelect, onTreeToggleItem oder onTreeSelectionChange durch das ausgewählte Verzeichnis, das das Objekt enthält (Verzeichnis, Bild usw.).

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; };
}

Die folgende Tabelle beschreibt einige der wichtigen Eigenschaften des ausgewählten Ziels.

Eine vollständige Liste der Eigenschaften und ein ausführliches Beispiel finden Sie unter Code-Beispiel für Zielauswahl.

Beispiel für Nicht-SUSI-Fluss non-ims-vanilla

Dieses Beispiel zeigt, wie die Zielauswahl mit einem Nicht-SUSI-Fluss verwendet wird, wenn eine Adobe-Anwendung unter Unified Shell läuft oder wenn Sie bereits imsToken für die Authentifizierung generiert haben.

Fügen Sie das Zielauswahl-Paket mit dem script-Tag in Ihren Code ein, wie in den Zeilen 6 bis 15 des folgenden Beispiels gezeigt. Sobald das Skript geladen ist, kann die globale Variable PureJSSelectors verwendet werden. Definieren Sie die Eigenschaften der Zielauswahl, wie in den Zeilen 16 bis 23 gezeigt. Die Eigenschaften imsOrg und imsToken sind beide für die Authentifizierung im Nicht-SUSI-Fluss erforderlich. Die handleSelection-Eigenschaft wird verwendet, um die ausgewählten Assets zu behandeln. Um die Zielauswahl zu rendern, rufen Sie die Funktion renderDestinationSelector auf, wie in Zeile 17 erwähnt. Die Zielauswahl wird im Container-Element <div> angezeigt, wie in den Zeilen 21 und 22 zu sehen ist.

Wenn Sie diese Schritte befolgen, können Sie die Zielauswahl mit einem Nicht-SUSI-Fluss in Ihrer Adobe-Anwendung verwenden.

<!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>

Ein ausführliches Beispiel finden Sie unter Code-Beispiel für Zielauswahl.

Verwenden von Zielauswahl-Eigenschaften destination-selector-properties

Sie können die Zielauswahl-Eigenschaften verwenden, um die Wiedergabe der Zielauswahl anzupassen. In der folgenden Tabelle sind die Eigenschaften aufgeführt, mit denen Sie die Zielauswahl anpassen und verwenden können:

Beispiele für die Verwendung der Zielauswahl-Eigenschaften usage-examples

Sie können die Eigenschaften der Zielauswahl in der Datei index.html definieren, um die Anzeige der Zielauswahl in Ihrer Anwendung anzupassen.

Beispiel 1: Erstellen eines Ordners in der Zielauswahl

Mit der Zielauswahl können Sie einen Ordner erstellen, in den Sie Assets an einem bestimmten Speicherort hochladen, verschieben oder kopieren können.

Beispiel 2: Festlegen des Ansichtstyps der Zielauswahl

Die Zielauswahl zeigt ein breites Spektrum an Assets in vier verschiedenen Ansichten an, einschließlich Listenansicht, Rasteransicht, Galerieansicht und Wasserfallansicht. Um den standardmäßigen Ansichtstyp festzulegen, können Sie die Eigenschaft viewType verwenden. Die Eigenschaft viewTypeOptions wird zusammen mit der Eigenschaft viewType verwendet, um andere Ansichtstypen festzulegen, sodass andere Ansichtstypen in einer Dropdown-Liste angezeigt werden können. Es kann ein einzelnes Argument verwendet werden, wenn nur eine Option angezeigt werden soll.

Beispiel 3: Initialisieren des Pfads des Asset-Ordners

Verwenden Sie die Eigenschaft path, um den Ordnernamen festzulegen, der beim Rendern der Zielauswahl automatisch angezeigt wird.

Verwenden der Zielauswahl using-destination-selector

Sobald die Zielauswahl eingerichtet ist und Sie für die Verwendung mit Ihrer Adobe Experience Manager as a Cloud Service-Anwendung authentifiziert sind, können Sie Assets auswählen oder verschiedene andere Vorgänge durchführen, um Ihre Assets im Repository zu suchen.

Suchleiste search-bar

Mit der Zielauswahl können Sie eine Volltextsuche nach Assets im ausgewählten Repository durchführen. Wenn Sie zum Beispiel den Suchbegriff wave in die Suchleiste eingeben, werden alle Assets angezeigt, die den Suchbegriff wave in einer der Metadateneigenschaften enthalten.

Sortierung sorting

Sie können Assets in der Zielauswahl nach Namen, Dimension oder Größe eines Assets sortieren. Sie können die Assets auch in auf- oder absteigender Reihenfolge sortieren.

Assets-Repository assets-repo

Mit der Zielauswahl können Sie auch Daten des Repositorys Ihrer Wahl anzeigen, das in der AEM-Anwendung verfügbar ist. Sie können die Eigenschaft repositoryID verwenden, um den Pfad des Zielordners zu initialisieren, den Sie in der ersten Instanz der Zielauswahl anzeigen möchten.

Suffix oder Präfix hinzufügen add-suffix-or-prefix

Dies ist ein Beispiel für die Eigenschaft optionsFormSetup. Sie können sie verwenden, um die Auswahl zu bestätigen, und sie wird an das Ereignis onConfirm weitergegeben.

Einee Ordner erstellen create-new-folder

Damit können Sie einen Ordner im Zielordner Ihrer Anwendung Adobe Experience Manager as a Cloud Service erstellen.

Ansichtstypen types-of-view

Mit der Zielauswahl können Sie das Asset in vier verschiedenen Ansichten anzeigen:

Info info

Über das Informations- oder Infosymbol können Sie die Metadaten des ausgewählten Assets anzeigen. Sie enthalten verschiedene Details wie Dimensionen, Größe, Beschreibung, Pfad, Änderungsdatum und Erstellungsdatum. Die Metadateninformationen werden beim Hochladen, Kopieren oder Erstellen eines Assets bereitgestellt.

Ordner auswählen select-folder

Mit der Schaltfläche „Ordner auswählen“ können Sie Assets für verschiedene Vorgänge auswählen, die mit Eigenschaften in der Zielauswahl verbunden sind.