Selettore di destinazione micro front-end Overview
Il selettore di destinazione Micro-Frontend fornisce all’interno dell’applicazione un’interfaccia utente che si integra facilmente con Experience Manager Assets as a Cloud Service archivio. È possibile cercare o selezionare la cartella appropriata all'interno del Experience Manager Assets as a Cloud Service archiviare e caricare le risorse dall’applicazione.
L’interfaccia utente di Micro-Frontend è resa disponibile nell’esperienza dell’applicazione utilizzando il pacchetto Selettore di destinazione. Eventuali aggiornamenti al pacchetto vengono importati automaticamente e l’ultimo selettore di destinazione distribuito viene caricato automaticamente all’interno dell’applicazione.
Il selettore delle destinazioni offre molti vantaggi, ad esempio:
- Facilità di integrazione con qualsiasi applicazione Adobe o non Adobe utilizzando la libreria JavaScript Vanilla.
- Manutenzione semplice: gli aggiornamenti al pacchetto Selettore di destinazione vengono automaticamente distribuiti nel selettore di destinazione disponibile per l’applicazione. Non sono necessari aggiornamenti all’interno dell’applicazione per caricare le modifiche più recenti.
- Possibilità di personalizzazione grazie alle proprietà disponibili che controllano la visualizzazione del selettore di destinazione all'interno dell'applicazione.
- Ricerca testuale per passare rapidamente alle cartelle e caricare le risorse dall’applicazione.
- Possibilità di creare cartelle, ordinare le cartelle in ordine crescente o decrescente e visualizzarle in visualizzazione Elenco, Griglia, Raccolta o Cascata.
Lo scopo di questo articolo è quello di dimostrare come utilizzare il Selettore di destinazione con un Adobe in Unified Shell o quando disponi già di un imsToken generato per l’autenticazione. In questo articolo, questi flussi di lavoro sono denominati flussi non-SUSI.
Per integrare e utilizzare il Selettore di destinazione con il Experience Manager Assets as a Cloud Service archivio:
Integrare il selettore di destinazione utilizzando Vanilla JS integration-with-vanilla-js
È possibile integrare qualsiasi Adobe o applicazioni non Adobe nell’archivio Experience Manager Assets as a Cloud Service e selezionare le risorse dall’interno dell’applicazione.
L’integrazione viene eseguita importando il pacchetto Selettore di destinazione e collegandosi alle risorse as a Cloud Service tramite la libreria JavaScript di Vanilla. È necessario modificare un index.html
o qualsiasi file appropriato all'interno dell'applicazione a -
- Definire i dettagli di autenticazione
- Accedere all’archivio Assets as a Cloud Service
- Configurare le proprietà di visualizzazione del Selettore di destinazione
Puoi eseguire l’autenticazione senza definire alcune delle proprietà IMS se:
- Stai integrando un’applicazione Adobe su Unified Shell.
- Hai già generato un token IMS per l’autenticazione.
Prerequisiti prerequisites
Definisci i prerequisiti in un file index.html
o simile nell’implementazione dell’applicazione per definire i dettagli di autenticazione per accedere all’archivio di Experience Manager Assets as a Cloud Service. I prerequisiti includono:
- imsOrg
- imsToken
- apikey
Installazione installation
Il selettore delle destinazioni è disponibile tramite CDN ESM (ad esempio, esm.sh/skypack) e UMD versione.
Nei browser che utilizzano la versione UMD (scelta consigliata):
Nei browser che utilizzano la versione UMD (scelta consigliata):
<script src="https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/assets-selectors.js"></script>
<script>
const { renderAssetSelector } = PureJSSelectors;
</script>
Nei browser con supporto di import maps
che utilizzano la versione ESM CDN:
<script type="module">
import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'
</script>
Nella federazione di moduli Deno/Webpack utilizzando la versione ESM CDN:
import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'
Destinazione selezionata selected-destination
Il selettore di destinazione riceve un callback da onItemSelect
, onTreeToggleItem
, o onTreeSelectionChange
con la directory selezionata che contiene l’oggetto (directory, immagine e così via).
Sintassi dello 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; };
}
Nella tabella seguente vengono descritte alcune delle proprietà importanti della destinazione selezionata.
Array<string>
Per un elenco completo delle proprietà e un esempio dettagliato, visita Esempio di codice del selettore di destinazione.
Esempio di flusso non-SUSI non-ims-vanilla
In questo esempio viene illustrato come utilizzare il selettore di destinazione con un flusso non SUSI durante l'esecuzione di un Adobe in Unified Shell o quando disponi già di imsToken
generato per l’autenticazione.
Includi il pacchetto del selettore di destinazione nel codice utilizzando script
come mostrato nella righe 6-15 dell’esempio seguente. Una volta caricato lo script, PureJSSelectors
variabile globale disponibile per l’uso. Definire il selettore di destinazione proprietà come mostrato nella righe 16-23. In un flusso non-SUSI, entrambe le proprietà imsOrg
e imsToken
sono necessarie per l’autenticazione. La proprietà handleSelection
è utilizzata per gestire le risorse selezionate. Per eseguire il rendering del selettore di destinazione, chiama il renderDestinationSelector
funzione come indicato in riga 17. Il selettore di destinazione viene visualizzato nel <div>
elemento contenitore, come mostrato righe 21 e 22.
Seguendo questi passaggi, puoi utilizzare il Selettore di destinazione con un flusso non SUSI nel tuo Adobe applicazione.
<!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>
Ad esempio, visita Esempio di codice del selettore di destinazione.
Utilizzare le proprietà del selettore di destinazione destination-selector-properties
Puoi utilizzare le proprietà del Selettore di destinazione per personalizzare il rendering del Selettore di destinazione. Nella tabella seguente sono elencate le proprietà che è possibile utilizzare per personalizzare e utilizzare il selettore di destinazione:
imsOrg
È necessario specificare la chiave per autenticare se l’organizzazione a cui stai accedendo è in Adobe IMS o meno.imsToken
non è richiesto se si utilizza il flusso SUSI. Tuttavia, è necessario se si utilizza il flusso non SUSI.apiKey
non è richiesto se si utilizza il flusso SUSI. Tuttavia, è richiesto nel flusso non SUSI.rootPath
può essere utilizzato anche sotto forma di incapsulamento. Ad esempio, dato il seguente percorso: /content/dam/marketing/subfolder/
, il selettore di destinazione non consente di spostarsi tra le cartelle principali, ma visualizza solo le cartelle secondarie.onCreateFolder
consente di aggiungere un’icona che aggiunge una nuova cartella nell’applicazione.viewType
viene utilizzata per specificare le visualizzazioni utilizzate per visualizzare le risorse.viewType
proprietà. puoi specificare una o più viste per visualizzare le risorse. Sono disponibili le seguenti opzioni viewTypeOptions: List view, Grid view, Gallery view, Waterfall view e Tree view.Object<{ id?: string, defaultMessage?: string, description?: string}>
i18nSymbols
. Il passaggio di un valore tramite questa interfaccia sostituisce le traduzioni predefinite fornite e utilizza le tue. Per eseguire la sostituzione, è necessario passare un oggetto valido del Descrittore del messaggio alla chiave di i18nSymbols
che desideri sostituire.intl.locale
. Ad esempio: intl={{ locale: "es-es" }}
Le stringhe di lingua supportate seguono i Codici - ISO 639 per la rappresentazione di nomi di lingue standard.
Elenco delle lingue supportate: Inglese - ‘en-us’ (impostazione predefinita) Spagnolo - ‘es-es’ Tedesco - ‘de-de’ Francese - ‘fr-fr’ Italiano - ‘it-it’ Giapponese - ‘ja-jp’ Coreano - ‘ko-kr’ Portoghese - ‘pt-br’ cinese (tradizionale) - ‘zh-cn’ Cinese (Taiwan) - ‘zh-tw’
Esempi per utilizzare le proprietà del Selettore di destinazione usage-examples
Puoi definire il Selettore di destinazione proprietà nel index.html
per personalizzare la visualizzazione del Selettore di destinazione all'interno dell'applicazione.
Esempio 1: creare una cartella nel selettore di destinazione
Il selettore di destinazione consente di creare una cartella per caricare, spostare o copiare le risorse nella posizione specifica.
Esempio 2: specificare il tipo di visualizzazione del selettore di destinazione
Il selettore delle destinazioni mostra un’ampia gamma di risorse in quattro diverse viste, tra cui Vista a elenco, Vista griglia, Vista galleria e Vista cascata. Per specificare il tipo di visualizzazione predefinito, è possibile utilizzare viewType
proprietà. Il viewTypeOptions
la proprietà viene utilizzata insieme a viewType
proprietà per definire altri tipi di visualizzazione in modo che le altre opzioni del tipo di visualizzazione possano essere visualizzate in un elenco a discesa. Un singolo argomento può essere utilizzato nel caso in cui si desideri visualizzare una sola opzione.
Esempio 3: inizializzare il percorso della cartella delle risorse
Utilizza il path
per definire il nome della cartella visualizzato automaticamente durante il rendering del selettore di destinazione.
Utilizzo del selettore di destinazione using-destination-selector
Una volta configurato il Selettore di destinazione, sei autenticato per utilizzarlo insieme al Adobe Experience Manager as a Cloud Service dell’applicazione, è possibile selezionare le risorse o eseguire varie altre operazioni per cercare le risorse all’interno dell’archivio.
- A: Barra di ricerca
- B: Ordinamento
- C: Risorse
- D: Aggiungi suffisso o prefisso
- E: Crea nuova cartella
- F: Visualizza
- G: Info
- H: Seleziona cartella
Barra di ricerca search-bar
Il selettore di destinazione consente di eseguire una ricerca full-text delle risorse all’interno dell’archivio selezionato. Ad esempio, se digiti la parola chiave wave
nella barra di ricerca, vengono mostrate tutte le risorse con la parola chiave wave
menzionata in una qualsiasi delle proprietà dei metadati.
Ordinamento sorting
Puoi ordinare le risorse in Selettore destinazione per nome, dimensione o dimensione di una risorsa. Puoi anche ordinare le risorse in ordine crescente o decrescente.
Archivio risorse assets-repo
Il selettore di destinazione consente inoltre di visualizzare i dati dell’archivio di tua scelta disponibili nell’applicazione AEM. È possibile utilizzare repositoryID
per inizializzare il percorso della cartella di destinazione da visualizzare nella prima istanza del selettore di destinazione.
Aggiungi suffisso o prefisso add-suffix-or-prefix
È un esempio di optionsFormSetup
proprietà. È possibile utilizzarlo per confermare la selezione, che viene trasmessa al onConfirm
evento.
Crea una cartella . create-new-folder
Ti consente di creare una cartella nella cartella di destinazione del Adobe Experience Manager as a Cloud Service.
Tipi di visualizzazione types-of-view
Il selettore delle destinazioni consente di visualizzare la risorsa in quattro diverse visualizzazioni:
- : la vista a elenco mostra i file e le cartelle in modo scorrevole in una singola colonna.
- : la vista griglia mostra i file e le cartelle in modo scorrevole in una griglia di righe e colonne.
- : la vista galleria mostra i file o le cartelle in un elenco orizzontale bloccato al centro.
- : la vista a cascata mostra file o cartelle sotto forma di un Bridge.
Info info
L’icona delle informazioni o info consente di visualizzare i metadati della risorsa selezionata. Include vari dettagli come dimensioni, dimensioni, descrizione, percorso, data di modifica e data di creazione. Le informazioni sui metadati vengono fornite durante il caricamento, la copia o la creazione di una risorsa.
Selezione cartella select-folder
Il pulsante Seleziona cartella consente di selezionare le risorse per eseguire varie operazioni associate a proprietà sul selettore di destinazione.