DokumentationAEM as a Cloud ServiceBenutzerhandbuch

Micro-Frontend-Asset-Selektor Overview

Last update: Wed Apr 09 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Admin
  • Benutzende
Neu Dynamic Media Prime und Ultimate
Neu AEM Assets Ultimate
Neu AEM Assets-Integration mit Edge Delivery Services
Neu Erweiterbarkeit der Benutzeroberfläche
Neu Aktivieren von Dynamic Media Prime und Ultimate
Best Practices für die Suche
Best Practices für Metadaten
Content Hub
Dynamic Media mit OpenAPI-Funktionen
Entwicklerdokumentation zu AEM Assets

Der Micro-Front-End-Asset-Selektor bietet eine Benutzeroberfläche, die sich problemlos in das Experience Manager Assets-Repository integrieren lässt, sodass Sie die im Repository verfügbaren digitalen Assets durchsuchen und für die Erstellung von Applikationen verwenden können.

Die Micro-Front-End-Benutzeroberfläche wird über das Asset-Selektor-Paket in Ihrer Applikation verfügbar gemacht. Alle Aktualisierungen des Pakets werden automatisch importiert, und der zuletzt bereitgestellte Asset-Selektor wird automatisch in Ihrer Applikation geladen.

Übersicht

Der Asset-Selektor bietet viele Vorteile, z. B.:

  • Einfache Integration in Adobe- oder Adobe-fremde Anwendungen unter Verwendung der Vanilla JavaScript-Bibliothek.
  • Einfach zu verwalten, da Aktualisierungen des Assets-Wähler-Pakets automatisch für den Asset-Selektor bereitgestellt werden, der für Ihre Applikation verfügbar ist. Es sind keine Aktualisierungen innerhalb Ihrer Applikation erforderlich, um die neuesten Änderungen zu laden.
  • Einfachere Anpassung, da Eigenschaften verfügbar sind, die die Anzeige des Asset-Selektors in Ihrer Applikation steuern.
  • Volltextsuche, vordefinierte und benutzerdefinierte Filter, um schnell zu Assets zu navigieren, die für das Authoring-Erlebnis verwendet werden können.
  • Möglichkeit, innerhalb einer IMS-Organisation zur Asset-Auswahl zwischen Repositorys zu wechseln.
  • Möglichkeit, Assets nach Namen, Abmessungen und Größe zu sortieren und in der Listen-, Raster-, Galerie- oder Wasserfallansicht anzuzeigen.

Voraussetzungen prereqs

Sie müssen die folgenden Kommunikationsmethoden sicherstellen:

  • Die Hostanwendung wird auf HTTPS ausgeführt.
  • Sie können die Anwendung nicht auf localhost ausführen. Wenn Sie den Asset-Wähler auf Ihrem lokalen Computer integrieren möchten, müssen Sie eine benutzerdefinierte Domain erstellen, z. B. [https://<your_campany>.localhost.com:<port_number>], und diese benutzerdefinierte Domain dem redirectUrl list hinzufügen.
  • Sie können die Client-ID konfigurieren und der AEM Cloud Service-Umgebungsvariablen mit den entsprechenden imsClientId hinzufügen.
  • Die Liste der IMS-Bereiche muss in der Umgebungskonfiguration definiert werden.
  • Die URL der Anwendung befindet sich in der Zulassungsliste der Umleitungs-URLs des IMS-Clients.
  • Der IMS-Anmeldefluss wird mithilfe eines Popup-Fensters im Webbrowser konfiguriert und gerendert. Daher sollten Popup-Fenster im Ziel-Browser aktiviert oder zugelassen werden.

Die oben genannten Voraussetzungen müssen erfüllt sein, wenn Sie einen IMS-Authentifizierungs-Workflow des Asset-Wählers benötigen. Wenn Sie bereits mit dem IMS-Workflow authentifiziert sind, können Sie stattdessen die IMS-Informationen hinzufügen.

Mehr anzeigen

IMPORTANT
Dieses Repository dient als zusätzliche Dokumentation, die die verfügbaren APIs und Anwendungsbeispiele für die Integration des Asset-Wählers beschreibt. Bevor Sie versuchen, den Asset-Wähler zu installieren oder zu verwenden, stellen Sie sicher, dass Ihr Unternehmen Zugriff auf den Asset-Wähler im Experience Manager Assets as a Cloud Service-Profil erhalten hat. Wenn diese Komponenten noch nicht bereitgestellt wurden, können Sie sie weder integrieren noch verwenden. Um die Bereitstellung anzufordern, sollten Ihre Programm-Admins ein Support-Ticket erstellen, das von der Admin Console als P2 gekennzeichnet ist, und die folgenden Informationen einschließen:
  • Domain-Namen, auf denen die integrierende Anwendung gehostet wird.
  • Nach der Bereitstellung wird Ihrem Unternehmen entsprechend den angeforderten Umgebungen, die für die Konfiguration des Asset-Wählers erforderlich sind, imsClientId, imsScope und eine redirectUrl bereitgestellt. Ohne diese gültigen Eigenschaften können Sie die Installationsschritte nicht ausführen.

Installation installation

Der Asset-Wähler 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):

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

Verwenden des Asset-Selektors using-asset-selector

Sobald der Asset-Selektor eingerichtet ist und Sie für die Verwendung mit Ihrem Adobe Experience Manager als Cloud Service-Applikation authentifiziert sind, können Sie Assets auswählen oder verschiedene andere Vorgänge durchführen, um Ihre Assets im Repository zu suchen.

using-asset-selector

Panel zum Aus-/Einblenden hide-show-panel

Um Ordner im linken Navigationsbereich auszublenden, klicken Sie auf das Symbol Ordner ausblenden. Um die Änderungen rückgängig zu machen, klicken Sie erneut auf das Symbol Ordner ausblenden.

Repository-Umschalter repository-switcher

Mit dem Asset-Selektor können Sie auch Repositorys für die Asset-Auswahl wechseln. Sie können das gewünschte Repository aus der Dropdown-Liste im linken Bedienfeld auswählen. Die in der Dropdown-Liste verfügbaren Repository-Optionen basieren auf der repositoryId-Eigenschaft, die in der index.html-Datei definiert ist. Sie basiert auf der Umgebung der ausgewählten IMS-Organisation, auf die die angemeldeten Benutzenden zugreifen können. Nutzerinnen und Nutzer können eine bevorzugte repositoryID übergeben. In diesem Fall stoppt der Asset-Selektor das Rendern des Repository-Umschalters und rendert Assets nur aus dem angegebenen Repository.

Assets-Repository

Es handelt sich um eine Sammlung von Asset-Ordnern, mit denen Sie Vorgänge durchführen können.

Vorkonfigurierte Filter filters

Der Asset-Selektor bietet außerdem vordefinierte Filteroptionen, mit denen Sie Ihre Suchergebnisse verfeinern können. Die folgenden Filter sind verfügbar:

  • Status: enthält den aktuellen Status des Assets, entweder all, approved, rejected oder no status.

  • Dateityp: enthält folder, file, images, documents oder video.

  • Ablaufstatus: erwähnt die Assets basierend auf ihrer Gültigkeitsdauer. Sie können entweder das Kontrollkästchen Expired aktivieren, um abgelaufene Assets zu filtern, oder Expiration Duration eines Assets so einstellen, dass Assets basierend auf ihrer Ablaufdauer angezeigt werden. Wenn ein Asset bereits abgelaufen ist oder kurz vor seinem Ablauf steht, wird ein Zeichen angezeigt, das darauf hinweist. Darüber hinaus können Sie steuern, ob Sie die Verwendung (oder das Ziehen per Drag-and-Drop) eines abgelaufenen Assets zulassen möchten. Weitere Informationen zum Anpassen abgelaufener Assets. Standardmäßig wird für Assets, die in den nächsten 30 Tagen ablaufen, das Zeichen Läuft bald ab angezeigt. Sie können die Gültigkeitsdauer jedoch mit der Eigenschaft expirationDate konfigurieren.

    note tip
    TIP
    Wenn Sie Assets anhand ihres künftigen Ablaufdatums anzeigen oder filtern möchten, geben Sie den künftigen Datumsbereich im Feld Expiration Duration an. Es werden die Assets mit dem Zeichen Läuft bald ab angezeigt.

  • MIME-Typ: enthält JPG, GIF, PPTX, PNG, MP4, DOCX, TIFF, PDF, XLSX.

  • Bildgröße:: umfasst minimale/maximale Breite, minimale/maximale Höhe des Bildes.

    rail-view-example

Benutzerdefinierte Suche

Neben der Volltextsuche ermöglicht der Asset-Selektor die Suche nach Assets innerhalb von Dateien mithilfe einer benutzerdefinierten Suche. Sie können benutzerdefinierte Suchfilter sowohl im Modal- als auch im Leistenansichtsmodus verwenden.

custom-search

Sie können auch einen Standardsuchfilter erstellen, um die häufig gesuchten Felder zu speichern, sodass Sie sie später verwenden können. Um eine benutzerdefinierte Suche für Ihre Assets zu erstellen, können Sie die filterSchema-Eigenschaft verwenden.

Mit dem Asset-Wähler 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 im Asset-Selektor nach Namen, Abmessungen oder Größe eines Assets sortieren. Sie können die Assets auch in auf- oder absteigender Reihenfolge sortieren.

Ansichtstypen types-of-view

Mit dem Asset-Selektor können Sie das Asset in vier verschiedenen Ansichten anzeigen:

  • Listenansicht Listenansicht: Die Listenansicht zeigt scrollbare Dateien und Ordner in einer Spalte an.
  • Rasteransicht Rasteransicht: Die Rasteransicht zeigt scrollbare Dateien und Ordner in einem Raster aus Zeilen und Spalten an.
  • Galerieansicht Galerieansicht: Die Galerie-Ansicht zeigt Dateien oder Ordner in einer zentrierten, horizontalen Liste an.
  • Wasserfallansicht Wasserfallansicht: Die Wasserfallansicht zeigt Dateien oder Ordner in Form einer Brücke an.

Weitere Informationen zu wichtigen Funktionen key-capabilities-asset-selector

Grafik zum Integrieren des Asset-Wählers {width="70px"}
Integrieren des Asset-Wählers

Erfahren Sie mehr über verschiedene Funktionen zur Integration des Asset-Wählers in zahlreiche Anwendungen.

Grafik zum Integrieren des Asset-Wählers in Adobe-Anwendungen {width="70px"}
Integrieren des Asset-Wählers in Adobe-Anwendungen

Entdecken Sie, wie Sie den Asset-Wähler in verschiedene Adobe-Anwendungen integrieren können.

Grafik zum Integrieren des Asset-Wählers {width="70px"}
Integrieren des Asset-Wählers in Anwendungen von Drittanbietern

Entdecken Sie die Funktionen zum Integrieren des Asset-Wählers in Adobe-fremde Anwendungen.

Grafik zum Integrieren des Asset-Wählers {width="70px"}
Integrieren des Asset-Wählers in Dynamic Media-OpenAPIs

Erfahren Sie, wie Sie den Asset-Wähler in Dynamic Media-OpenAPIs integrieren.

Grafik zu den Eigenschaften des Asset-Wählers {width="70px"}
Eigenschaften des Asset-Wählers

Erfahren Sie mehr über die Grundlagen zum Anpassen verschiedener Komponenten des Asset-Wählers, wie Filter, Auswahl von Assets und abgelaufene Assets.

Grafik zu Beispielen für den Asset-Wähler {width="70px"}
Beispiele für den Asset-Wähler

Lernen Sie, die Verwendung von Eigenschaften auf praktische Weise zu verstehen.

Grafik zum Anpassen des Asset-Wählers {width="70px"}
Anpassungen des Asset-Wählers

Konfigurieren und passen Sie verschiedene Komponenten des Asset-Wählers basierend auf Ihrer Benutzerfreundlichkeit an.

Grafik zum Hochladen in den Asset-Wähler {width="70px"}
Hochladen in den Asset-Wähler

Erfahren Sie, wie Sie Dateien oder Ordner aus Ihrem lokalen Dateisystem oder aus einem Dateisystem von Drittanbietern in den Asset-Wähler hochladen können.

Grafik zu Sammlungen des Asset-Wählers {width="70px"}
Sammlungen des Asset-Wählers

Erfahren Sie, wie Sie Sammlungen im Asset-Wähler mithilfe des Experience Manager-Repositorys verwenden.

Related Articles
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab