Micro-front-bestemmingskiezer Overview

Micro-Frontend de Selector van de Bestemming verstrekt een gebruikersinterface binnen uw toepassing die gemakkelijk met de Experience Manager Assets as a Cloud Service bewaarplaats integreert. U kunt zoeken naar of bladeren naar de juiste map in de Experience Manager Assets as a Cloud Service -opslagplaats en elementen van uw toepassing uploaden.

De gebruikersinterface Micro-Frontend wordt beschikbaar gesteld in uw toepassingservaring gebruikend het pakket van de Selecteur van de Bestemming. Eventuele updates van het pakket worden automatisch geïmporteerd en de meest recente geïmplementeerde doelkiezer wordt automatisch in de toepassing geladen.

De Selector van de bestemming verstrekt vele voordelen, zoals:

Het werkingsgebied van dit artikel moet aantonen hoe te om de Selecteur van de Bestemming met een Adobe toepassing onder Verenigde Shell te gebruiken of wanneer u reeds een imsToken hebt die voor authentificatie wordt geproduceerd. Deze workflows worden in dit artikel niet-SUSI-stromen genoemd.

Voer de volgende taken uit om de doelkiezer te integreren en te gebruiken in uw Experience Manager Assets as a Cloud Service -opslagplaats:

Doelkiezer integreren met Vanilla JS integration-with-vanilla-js

U kunt elke Adobe - of niet-Adobe-toepassing integreren met Experience Manager Assets als een Cloud Service -opslagplaats en elementen selecteren vanuit de toepassing.

De integratie wordt gedaan door het pakket van de Selecteur van de Bestemming in te voeren en met Assets as a Cloud Service te verbinden gebruikend de bibliotheek van Vanilla JavaScript. U moet een index.html of een geschikt bestand in uw toepassing bewerken op -

U kunt verificatie uitvoeren zonder enkele IMS-eigenschappen te definiëren, als:

Vereisten prerequisites

Definieer de voorwaarden in het index.html -bestand of een vergelijkbaar bestand in de implementatie van de toepassing om de verificatiegegevens te definiëren voor toegang tot de Experience Manager Assets als een Cloud Service -opslagplaats. Voorwaarden zijn:

Installatie installation

De Selecteur van de bestemming is beschikbaar via zowel ESM CDN (bijvoorbeeld, ​ esm.sh ​/​ kabel ​) als ​ UMD ​ versie.

In browsers die {versie 0} gebruiken UMD (geadviseerd):

In browsers die {versie 0} gebruiken UMD (geadviseerd):

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

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

In browsers met import maps steun gebruikend versie van ESM CDN:

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

In Deno/de Federatie van de Module van het Pakket gebruikend versie van ESM CDN:

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

Geselecteerd doel selected-destination

Doelkiezer ontvangt een callback van onItemSelect , onTreeToggleItem of onTreeSelectionChange met de geselecteerde map die het object (map, afbeelding, enzovoort) bevat.

Syntaxis van het Schema

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

In de volgende tabel worden enkele belangrijke eigenschappen van het geselecteerde doel beschreven.

Voor een volledige lijst van eigenschappen en gedetailleerd voorbeeld, bezoek ​ het Voorbeeld van de Code van de Selecteur van de Bestemming ​.

Voorbeeld voor de niet-SUSI-stroom non-ims-vanilla

In dit voorbeeld wordt getoond hoe u de doelkiezer kunt gebruiken met een niet-SUSI-flow wanneer u een Adobe -toepassing uitvoert onder Unified Shell of wanneer u imsToken al hebt gegenereerd voor verificatie.

Omvat het pakket van de Selecteur van de Bestemming in uw code gebruikend de script markering, zoals aangetoond in lijnen 6-15 van het hieronder voorbeeld. Nadat het script is geladen, is de algemene variabele PureJSSelectors beschikbaar voor gebruik. Bepaal de Eigenschappen van de Selecteur van de Bestemming 🔗 zoals aangetoond in lijnen 16-23. De eigenschappen imsOrg en imsToken zijn beide vereist voor verificatie in niet-SUSI-stroom. De eigenschap handleSelection wordt gebruikt om de geselecteerde elementen af te handelen. Om de Selector van de Bestemming terug te geven, roep de renderDestinationSelector functie zoals vermeld in lijn 17. De selecteur van de Bestemming wordt getoond in het <div> containerelement, zoals aangetoond in lijnen 21 en 22.

Als u deze stappen uitvoert, kunt u de doelkiezer gebruiken met een niet-SUSI-stroom in de Adobe -toepassing.

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

Voor gedetailleerd voorbeeld, bezoek {het Voorbeeld van de Code van de Selecteur van de Bestemming 0} 🔗.

Eigenschappen doelkiezer gebruiken destination-selector-properties

U kunt de eigenschappen van de Selector van de Bestemming gebruiken om de manier aan te passen de Selector van de Bestemming wordt teruggegeven. In de volgende tabel worden de eigenschappen weergegeven die u kunt gebruiken om de doelkiezer aan te passen en te gebruiken:

Voorbeelden voor het gebruik van de eigenschappen van de doelkiezer usage-examples

U kunt de Eigenschappen van de Selecteur van de Bestemming 🔗 in het index.html dossier bepalen om de vertoning van de Selecteur van de Bestemming binnen uw toepassing aan te passen.

Voorbeeld 1: Een map maken in de doelkiezer

Met Doelkiezer kunt u een map maken om elementen op de desbetreffende locatie te uploaden, verplaatsen of kopiëren.

Voorbeeld 2: weergavetype van doelkiezer opgeven

Met Doelselectie wordt een grote verscheidenheid aan elementen in vier verschillende weergaven weergegeven, waaronder de lijstweergave, de rasterweergave, de galerijweergave en de watervalweergave. U kunt de eigenschap viewType gebruiken om het standaardweergavetype op te geven. De eigenschap viewTypeOptions wordt samen met de eigenschap viewType gebruikt om andere weergavetypen op te geven, zodat andere opties voor weergavetype in een vervolgkeuzelijst kunnen worden weergegeven. Er kan één argument worden gebruikt voor het geval u slechts één optie wilt weergeven.

Voorbeeld 3: Pad initialiseren van Assets-map

Gebruik de eigenschap path om de mapnaam te definiëren die automatisch wordt weergegeven wanneer de doelkiezer wordt weergegeven.

Doelselectie gebruiken using-destination-selector

Als de doelkiezer is ingesteld en u bent geverifieerd dat u de doelkiezer als Adobe Experience Manager -toepassing kunt gebruiken, kunt u elementen selecteren of verschillende andere bewerkingen uitvoeren om te zoeken naar uw elementen in de opslagplaats. Cloud Service

Zoekbalk search-bar

Met de optie Doelselectie kunt u zoeken in volledige tekst naar elementen in de geselecteerde opslagplaats. Als u bijvoorbeeld het trefwoord wave in de zoekbalk typt, worden alle elementen met het trefwoord wave dat in een van de metagegevenseigenschappen wordt vermeld, weergegeven.

Sorteren sorting

U kunt elementen in de doelkiezer sorteren op naam, dimensie of grootte van een element. U kunt de elementen ook in oplopende of aflopende volgorde sorteren.

Assets-opslagplaats assets-repo

Met de optie Doelselectie kunt u ook naar keuze in de AEM-toepassing beschikbare gegevens in de opslagplaats bekijken. Met de eigenschap repositoryID kunt u het pad van de doelmap initialiseren dat u in de eerste instantie van de doelkiezer wilt weergeven.

Achtervoegsel of voorvoegsel toevoegen add-suffix-or-prefix

Dit is een voorbeeld van de eigenschap optionsFormSetup . U kunt dit gebruiken om de selectie te bevestigen; deze wordt doorgegeven aan de gebeurtenis onConfirm .

Een map maken create-new-folder

Hiermee kunt u als Cloud Service een map maken in de doelmap van de Adobe Experience Manager -map.

Weergavetypen types-of-view

Met de optie Doelselectie kunt u het element in vier verschillende weergaven weergeven:

Info info

Met het informatie- of infopictogram kunt u metagegevens van het geselecteerde element weergeven. Het bevat verschillende details, zoals afmetingen, grootte, beschrijving, pad, gewijzigde datum en datum. De metagegevens worden weergegeven tijdens het uploaden of kopiëren of het maken van een element.

Map selecteren select-folder

De Uitgezochte omslagknoop laat u activa selecteren voor diverse verrichtingen verbonden aan ​ eigenschappen ​ op bestemmingsselecteur uitvoeren.