Selettore di destinazione micro front-end
Creato per:
- Amministratore
- Utente
Il selettore di destinazione Microsoft-Frontend fornisce all'interno dell'applicazione un'interfaccia utente che si integra facilmente con l'archivio Experience Manager Assets as a Cloud Service. È possibile cercare o sfogliare la cartella appropriata all'interno dell'archivio Experience Manager Assets as a Cloud Service 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.
L'ambito di questo articolo consiste nel dimostrare come utilizzare il selettore di destinazione con un'applicazione Adobe in Unified Shell o quando si dispone 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 l'archivio Experience Manager Assets as a Cloud Service, eseguire le attività seguenti:
Integrare il selettore di destinazione utilizzando 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 all’as a Cloud Service di Assets utilizzando la libreria JavaScript di Vanilla. È necessario modificare un file index.html o qualsiasi file appropriato all'interno dell'applicazione in -
- 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
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
Il selettore di destinazione è disponibile sia tramite CDN ESM (ad esempio, esm.sh/skypack) che tramite la versione UMD.
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
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
In questo esempio viene illustrato come utilizzare il selettore di destinazione con un flusso non SUSI durante l'esecuzione di un'applicazione Adobe in Unified Shell o quando è già stato generato imsToken per l'autenticazione.
Includi il pacchetto Selettore di destinazione nel codice utilizzando il tag script, come mostrato nelle righe 6-15 dell'esempio seguente. Dopo il caricamento dello script, la variabile globale PureJSSelectors è disponibile per l'utilizzo. Definisci il selettore di destinazione proprietà come mostrato nelle 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, chiamare la funzione renderDestinationSelector come indicato nella riga 17. Il selettore di destinazione viene visualizzato nell'elemento contenitore <div>, come mostrato nelle righe 21 e 22.
Seguendo questi passaggi, è possibile utilizzare il selettore di destinazione con un flusso non SUSI nell'applicazione Adobe.
<!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
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 è necessaria per autenticare se l'organizzazione a cui si accede è 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 scorrere 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. 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
Puoi definire il selettore di destinazione proprietà nel file 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 la proprietà viewType. La proprietà viewTypeOptions viene utilizzata insieme alla proprietà viewType per definire altri tipi di visualizzazione in modo che le altre opzioni dei tipi 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 Assets
Utilizzare la proprietà path per definire il nome della cartella visualizzato automaticamente quando viene eseguito il rendering del selettore di destinazione.
Utilizzo del selettore di destinazione
Dopo aver configurato il selettore di destinazione e aver eseguito l'autenticazione per utilizzare il selettore di destinazione con Adobe Experience Manager come applicazione Cloud Service, è 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: Informazioni
- H: Seleziona cartella
Barra di ricerca
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
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 Assets
Il selettore delle destinazioni consente inoltre di visualizzare i dati dell’archivio scelto disponibili nell’applicazione AEM. È possibile utilizzare la proprietà repositoryID per inizializzare il percorso della cartella di destinazione da visualizzare nella prima istanza del selettore di destinazione.
Aggiungi suffisso o prefisso
È un esempio della proprietà optionsFormSetup. È possibile utilizzarlo per confermare la selezione, che viene passata all'evento onConfirm.
Crea una cartella
Ti consente di creare una cartella nella cartella di destinazione di Adobe Experience Manager come Cloud Service.
Tipi di visualizzazione
Il selettore delle destinazioni consente di visualizzare la risorsa in quattro diverse visualizzazioni:
-
-
-
-
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
Il pulsante Seleziona cartella consente di selezionare le risorse per eseguire varie operazioni associate a proprietà nel selettore di destinazione.