Micro-front-bestemmingskiezer
Gemaakt voor:
- Beheerder
- Gebruiker
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:
- Eenvoudige integratie met alle Adobe- of niet-Adobe-toepassingen met Vanilla JavaScript-bibliotheek.
- Eenvoudig te handhaven aangezien de updates aan het pakket van de Selecteur van de Bestemming automatisch worden opgesteld aan de Selecteur van de Bestemming beschikbaar voor uw toepassing. Uw toepassing hoeft geen updates uit te voeren om de laatste wijzigingen te laden.
- Gemak van aanpassing aangezien er eigenschappen beschikbaar zijn die de vertoning van de Selecteur van de Bestemming binnen uw toepassing controleren.
- In volledige tekst zoeken om snel naar mappen te navigeren om elementen vanuit uw toepassing te uploaden.
- Mogelijkheid om mappen te maken, mappen te sorteren in oplopende of aflopende volgorde en ze weer te geven in de lijst-, raster-, galerij- of watervalweergave.
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
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 -
- De verificatiedetails definiëren
- Toegang krijgen tot de Assets as a Cloud Service-opslagplaats
- De weergave-eigenschappen voor de doelkiezer configureren
U kunt verificatie uitvoeren zonder enkele IMS-eigenschappen te definiëren, als:
- U integreert een Adobe toepassing op Verenigde Shell.
- Er is al een IMS-token gegenereerd voor verificatie.
Vereisten
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:
- imsOrg
- imsToken
- apikey
Installatie
De Selecteur van de bestemming is beschikbaar via zowel ESM CDN (bijvoorbeeld, esm.sh/ kabel) als UMDversie.
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
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.
Array<string>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
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
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:
imsOrg -toets is vereist om te verifiëren of de organisatie waartoe u toegang hebt, onder Adobe IMS valt of niet.imsToken is niet vereist als u de SUSI-stroom gebruikt. Dit is echter vereist als u de niet-SUSI-flow gebruikt.apiKey is niet vereist als u de SUSI-stroom gebruikt. Dit is echter vereist in niet-SUSI-stromen.rootPath kan ook in de vorm van inkapseling worden gebruikt. Op basis van het volgende pad, /content/dam/marketing/subfolder/ , kunt u met Doelselectie bijvoorbeeld niet door een bovenliggende map bladeren, maar alleen de onderliggende mappen.onCreateFolder kunt u een pictogram toevoegen waarmee een nieuwe map in de toepassing wordt toegevoegd.viewType wordt gebruikt om de weergaven op te geven die u gebruikt om elementen weer te geven.viewType . u kunt een of meer weergaven opgeven om elementen weer te geven. Beschikbare viewTypeOptions zijn: Lijstweergave, Rasterweergave, Galerieweergave, Watervalweergave en Boomweergave.Object<{ id?: string, defaultMessage?: string, description?: string}>i18nSymbols -proxy. Als u een waarde door deze interface doorgeeft, overschrijft u de standaardvertalingen die worden geleverd en gebruikt u in plaats daarvan uw eigen vertaling. Om de opheffing uit te voeren, moet u een geldig 🔗 voorwerp van de Beschrijver van het Bericht tot de sleutel van i18nSymbols overgaan die u wilt met voeten treden.intl.locale . Bijvoorbeeld: intl={{ locale: "es-es" }}de gesteunde scènekoorden volgen ISO 639 - Codesvoor de vertegenwoordiging van namen van taalnormen.
Lijst met ondersteunde landinstellingen: Engels - 'en-us' (standaard) Spaans - 'es-es' Duits - 'de-de' Frans - 'fr-fr' Italiaans - 'it-it' Japans - 'ja-jp' Koreaans - 'ko-kr' Portugees - 'pt-br' Chinees (traditioneel) - 'zh-cn' Chinees (Taiwan) - 'zh-tw'
Voorbeelden voor het gebruik van de eigenschappen van de doelkiezer
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
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
- A: bar van het Onderzoek
- B: Sorterend
- C: Assets
- D: voeg achtervoegsel of prefixtoe
- E: creeer nieuwe omslag
- F: Mening
- G: Info
- H: Uitgezochte omslag
Zoekbalk
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
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
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
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
Hiermee kunt u als Cloud Service een map maken in de doelmap van de Adobe Experience Manager -map.
Weergavetypen
Met de optie Doelselectie kunt u het element in vier verschillende weergaven weergeven:
-
-
-
-
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
De Uitgezochte omslagknoop laat u activa selecteren voor diverse verrichtingen verbonden aan eigenschappenop bestemmingsselecteur uitvoeren.