Selettore risorse micro front-end Overview

Versione
Collegamento articolo
AEM 6.5
Fai clic qui
AEM as a Cloud Service
Questo articolo

Il Selettore risorse micro front-end fornisce un’interfaccia utente che si integra facilmente con l’archivio di Experience Manager Assets as a Cloud Service in modo da poter sfogliare o cercare le risorse digitali disponibili nell’archivio e utilizzarle nell’esperienza di authoring dell’applicazione.

L’interfaccia utente micro front-end è resa disponibile nell’esperienza dell’applicazione utilizzando il pacchetto Selettore risorse. Eventuali aggiornamenti al pacchetto vengono importati automaticamente e l’ultimo Selettore risorse implementato viene caricato automaticamente all’interno dell’applicazione.

Panoramica

Il Selettore risorse offre molti vantaggi, tra cui:

  • Facilità di integrazione con qualsiasi applicazione Adobe o non Adobe utilizzando la libreria JavaScript Vanilla.

  • Facile manutenzione poiché gli aggiornamenti al pacchetto Selettore risorse vengono automaticamente distribuiti nel selettore risorse disponibile per l’applicazione. Non sono necessari aggiornamenti all’interno dell’applicazione per caricare le modifiche più recenti.

  • Facilità di personalizzazione grazie alle proprietà disponibili che controllano la visualizzazione del Selettore risorse all’interno dell’applicazione.

  • Filtri di ricerca full-text, predefiniti e personalizzati per passare rapidamente alle risorse da utilizzare nell’esperienza di authoring.

  • Possibilità di cambiare archivi all’interno di un’organizzazione IMS per la selezione delle risorse.

  • Possibilità di ordinare le risorse per nome, proporzioni e dimensioni e di visualizzarle nelle viste Elenco, Griglia, Galleria o Cascata.

L’obiettivo di questo articolo è dimostrare come utilizzare il Selettore risorse con un’applicazione 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 Selettore risorse con il tuo archivio Experience Manager Assets as a Cloud Service, esegui le seguenti attività:

Integra il Selettore risorse 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 risorse e connettendolo ad Assets as a Cloud Service tramite la libreria JavaScript Vanilla. È necessario modificare un index.html o qualsiasi file appropriato all’interno dell’applicazione per:

  • Definire i dettagli di autenticazione
  • Accedere all’archivio Assets as a Cloud Service
  • Configurare le proprietà di visualizzazione del Selettore risorse

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

I selettori di Assets sono disponibile tramite entrambe le versioni ESM CDN(ad esempio, esm.sh/skypack) e UMD.

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'

Tipo di risorsa selezionato selected-asset-type

Il tipo di risorsa selezionato è un array di oggetti che contiene le informazioni della risorsa quando si utilizzano le funzioni handleSelection, handleAssetSelection, e onDrop.

Sintassi dello schema

interface SelectedAsset {
    'repo:id': string;
    'repo:name': string;
    'repo:path': string;
    'repo:size': number;
    'repo:createdBy': string;
    'repo:createDate': string;
    'repo:modifiedBy': string;
    'repo:modifyDate': string;
    'dc:format': string;
    'tiff:imageWidth': number;
    'tiff:imageLength': number;
    'repo:state': string;
    computedMetadata: Record<string, any>;
    _links: {
        'http://ns.adobe.com/adobecloud/rel/rendition': Array<{
            href: string;
            type: string;
            'repo:size': number;
            width: number;
            height: number;
            [others: string]: any;
        }>;
    };
}

Nella tabella seguente vengono descritte alcune delle proprietà importanti dell’oggetto Risorsa selezionata.

Proprietà
Tipo
Spiegazione
repo:repositoryId
stringa
Identificatore univoco dell’archivio in cui è memorizzata la risorsa.
repo:id
stringa
Identificatore univoco della risorsa.
repo:assetClass
stringa
La classificazione della risorsa (ad esempio immagine o video, documento).
repo:name
stringa
Nome della risorsa, inclusa l’estensione del file.
repo:size
numero
Dimensione della risorsa in byte.
repo:path
stringa
Posizione della risorsa all’interno dell’archivio.
repo:ancestors
Array<string>
Array di elementi predecessori per la risorsa nell’archivio.
repo:state
stringa
Stato corrente della risorsa nell’archivio (ad esempio attiva, eliminata e così via).
repo:createdBy
stringa
Utente o sistema che ha creato la risorsa.
repo:createDate
stringa
La data e l’ora in cui è stata creata la risorsa.
repo:modifiedBy
stringa
Utente o sistema che ha modificato per ultimo la risorsa.
repo:modifyDate
stringa
La data e l’ora dell’ultima modifica apportata alla risorsa.
dc:format
stringa
Il formato della risorsa, ad esempio il tipo di file (ad esempio, JPEG, PNG e così via).
tiff:imageWidth
numero
Larghezza di una risorsa.
tiff:imageLength
numero
Altezza di una risorsa.
computedMetadata
Record<string, any>
Oggetto che rappresenta un bucket per tutti i metadati di tutti i tipi di risorsa (archivio, applicazione o metadati incorporati).
_collegamenti
Record<string, any>
Collegamenti ipermediali della risorsa associata. Include collegamenti a risorse quali metadati e rappresentazioni.
_links.http://ns.adobe.com/adobecloud/rel/rendition
Array<Object>
Array di oggetti contenenti informazioni sulle rappresentazioni della risorsa.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].href
stringa
URI della rappresentazione.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].type
stringa
Tipo MIME della rappresentazione.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].'repo:size'
numero
Dimensione della rappresentazione in byte.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].width
numero
Larghezza della rappresentazione.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].height
numero
Altezza della rappresentazione.

Per un elenco completo delle proprietà e un esempio dettagliato, consulta Esempio di codice del Selettore risorse.

Esempio di flusso non-SUSI non-susi-vanilla

Questo esempio illustra come utilizzare il selettore risorse con un flusso non SUSI durante l’esecuzione di un’applicazione Adobe in Unified Shell o quando disponi già di un imsToken generato per l’autenticazione.

Includi il pacchetto Asset Selector nel codice utilizzando script come mostrato nella righe 6-15 dell’esempio seguente. Una volta caricato lo script, la variabile globale PureJSSelectors è disponibile per l’uso. Definire il selettore risorse 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 risorse, chiama la funzione renderAssetSelector come indicato nella riga 17. Il Selettore risorse viene visualizzato nell’<div>elemento contenitore, come illustrato nelle righe 21 e 22.

Seguendo questi passaggi, puoi utilizzare il Selettore risorse con un flusso non-SUSI nella tua applicazione Adobe.

<!DOCTYPE html>
<html>
<head>
    <title>Asset 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 AssetSelector component
        const container = document.getElementById('asset-selector-container');
        // imsOrg and imsToken are required for authentication in non-SUSI flow
        const assetSelectorProps = {
            imsOrg: 'example-ims@AdobeOrg',
            imsToken: "example-imsToken",
            apiKey: "example-apiKey-associated-with-imsOrg",
            handleSelection: (assets: SelectedAssetType[]) => {},
        };
        // Call the `renderAssetSelector` available in PureJSSelectors globals to render AssetSelector
        PureJSSelectors.renderAssetSelector(container, assetSelectorProps);
    </script>
</head>

<body>
    <div id="asset-selector-container" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
    </div>
</body>

</html>

Per un esempio dettagliato, consulta Esempio di codice del Selettore risorse.

Utilizzare le proprietà del Selettore risorse asset-selector-properties

Puoi utilizzare le proprietà del Selettore risorse per personalizzarne il rendering. Nella tabella seguente sono elencate le proprietà che è possibile utilizzare per personalizzare e utilizzare il Selettore risorse.

Proprietà
Tipo
Obbligatorio
Predefiniti
Descrizione
barra
booleano
No
false
Se contrassegnato true, il rendering del selettore risorse viene eseguito nella barra a sinistra. Se è contrassegnato false, il selettore delle risorse viene renderizzato nella vista modale.
imsOrg
stringa
L’ID di Adobe Identity Management System (IMS) assegnato durante il provisioning di Adobe Experience Manager as a Cloud Service per l’organizzazione. Il imsOrg È necessario specificare la chiave per autenticare se l’organizzazione a cui stai accedendo è in Adobe IMS o meno.
imsToken
stringa
No
Token di connessione IMS utilizzato per l’autenticazione. imsToken è obbligatorio se si utilizza un flusso non SUSI.
apiKey
stringa
No
Chiave API utilizzata per accedere al servizio di individuazione AEM. apiKey è obbligatorio se si utilizza un flusso non SUSI.
rootPath
stringa
No
/content/dam/
Percorso della cartella da cui il selettore risorse visualizza le risorse. rootPath può essere utilizzato anche sotto forma di incapsulamento. Ad esempio, dato il seguente percorso: /content/dam/marketing/subfolder/, il selettore risorse non consente di spostarsi all’interno di alcuna cartella principale, ma visualizza solo le cartelle secondarie.
percorso
stringa
No
Percorso utilizzato per passare a una directory specifica di risorse durante il rendering del Selettore risorse.
filterSchema
array
No
Modello utilizzato per configurare le proprietà del filtro. Questa funzione è utile quando desideri limitare determinate opzioni di filtro nel Selettore risorse.
filterFormProps
Oggetto
No
Specifica le proprietà del filtro da utilizzare per perfezionare la ricerca. Ad esempio, tipo MIME JPG, PNG, GIF.
selectedAssets
Array <Object>
No
Specifica le risorse selezionate quando viene eseguito il rendering del Selettore risorse. È necessario un array di oggetti che contenga una proprietà ID delle risorse. Ad esempio, [{id: 'urn:234}, {id: 'urn:555'}] Deve essere disponibile una risorsa nella directory corrente. Se devi utilizzare una directory diversa, specifica anche un valore per la proprietà path.
acvConfig
Oggetto
No
La proprietà Visualizzazione della raccolta risorse che contiene un oggetto con una configurazione personalizzata per sostituire le impostazioni predefinite.
i18nSymbols
Object<{ id?: string, defaultMessage?: string, description?: string}>
No
Se le traduzioni OOTB non sono sufficienti per le esigenze dell’applicazione, puoi esporre un’interfaccia tramite la quale puoi trasmettere valori localizzati personalizzati tramite la proprietà 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
Oggetto
No
Il selettore risorse fornisce le traduzioni predefinite OOTB. È possibile selezionare la lingua di traduzione fornendo una stringa di lingua valida attraverso la proprietà 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’
repositoryId
stringa
No
''
Archivio da cui il Selettore risorse carica il contenuto.
additionalAemSolutions
Array<string>
No
[ ]
Ti consente di aggiungere un elenco di archivi AEM aggiuntivi. Se non vengono fornite informazioni in questa proprietà, vengono considerati solo la libreria di file multimediali o gli archivi di AEM Assets.
hideTreeNav
booleano
No
Specifica se mostrare o nascondere la barra laterale di navigazione della struttura delle risorse. Viene utilizzata solo nella vista modale e quindi questa proprietà non influisce sulla visualizzazione della barra.
onDrop
Funzione
No
La proprietà consente la funzionalità di rilascio di una risorsa.
dropOptions
{allowList?: Object}
No
Configura le opzioni di rilascio utilizzando un “elenco consentiti”.
colorScheme
stringa
No
Configura il tema (light o dark) per il Selettore risorse.
handleSelection
Funzione
No

Richiamata con un array di elementi di risorse quando queste sono selezionate e si fa clic sul pulsante Select nel modale. Questa funzione viene richiamata solo nella vista modale. Per la visualizzazione della barra, utilizza le funzioni handleAssetSelection o onDrop. Esempio:

handleSelection=(risorse: risorsa[])=> {…}

Per maggiori dettagli, consulta Tipo di risorsa selezionato.

handleAssetSelection
Funzione
No

Richiamata con un array di elementi durante la selezione o la deselezione delle risorse. Questa funzione è utile quando si desidera ascoltare le risorse selezionate dall’utente. Esempio:

handleSelection=(risorse: risorsa[])=> {…}

Per maggiori dettagli, consulta Tipo di risorsa selezionato.

onClose
Funzione
No
Richiamata quando viene premuto il pulsante Close nella vista modale. Questa è chiamata solo nella vista modal e ignorata nella vista rail.
onFilterSubmit
Funzione
No
Richiamata con gli elementi filtro poiché l’utente modifica criteri di filtro diversi.
selectionType
stringa
No
singolo
Configurazione per la selezione single o multiple di risorse alla volta.

Esempi per utilizzare le proprietà del Selettore risorse usage-examples

Puoi definire le proprietà del Selettore risorse nel file index.html per personalizzare la visualizzazione del Selettore risorse all’interno dell’applicazione.

Esempio 1: Selettore risorse nella visualizzazione della barra

rail-view-example

Se il valore di AssetSelector rail è impostato su false oppure non è menzionato nelle proprietà; per impostazione predefinita, il Selettore risorse viene visualizzato nella vista modale.

Esempio 2: finestra popover dei metadati

Utilizza varie proprietà per definire i metadati di una risorsa da visualizzare mediante un’icona Info. La finestra popover Iinfo fornisce un insieme di informazioni sulla risorsa o sulla cartella, tra cui titolo, dimensioni, data di modifica, posizione e descrizione di una risorsa. Nell’esempio seguente, per visualizzare i metadati di una risorsa vengono utilizzate diverse proprietà, ad esempio: proprietà repo:path che specifica la posizione di una risorsa.

metadata-popover-example

Esempio 3: proprietà filtro personalizzata nella visualizzazione della barra

Oltre alla ricerca sfaccettata, il Selettore risorse consente di personalizzare vari attributi per perfezionare la ricerca da Adobe Experience Manager as a Cloud Service applicazione. Per aggiungere filtri di ricerca personalizzati nell’applicazione, devi aggiungere il seguente codice. Nell’esempio seguente, la ricerca Type Filter che identifica il tipo di risorsa tra Immagini, Documenti o Video o il tipo di filtro aggiunto per la ricerca.

custom-filter-example-vanilla

Gestione della selezione di risorse tramite lo schema a oggetti handling-selection

La proprietà handleSelection viene utilizzata per gestire selezioni singole o multiple di risorse nel Selettore risorse. L’esempio seguente indica la sintassi di utilizzo di handleSelection.

handle-selection

Utilizzo del Selettore risorse using-asset-selector

Dopo aver configurato il Selettore risorse ed aver effettuato l’autenticazione per utilizzarlo con l’applicazione Adobe Experience Manager as a Cloud Service, puoi selezionare le risorse o eseguire varie altre operazioni per cercare le risorse all’interno dell’archivio.

using-asset-selector

Nascondi/Mostra pannello hide-show-panel

Per nascondere le cartelle nel menu di navigazione a sinistra, fai clic sull’icona Nascondi cartelle. Per annullare le modifiche, fai di nuovo clic sull’icona Nascondi cartelle.

Selettore archivio repository-switcher

Asset Selector consente inoltre di cambiare archivi per la selezione delle risorse. Puoi selezionare l’archivio desiderato dal menu a discesa disponibile nel pannello a sinistra. Le opzioni dell’archivio disponibili nell’elenco a discesa si basano sulla proprietà repositoryId definita nel file index.html. Si basa sugli ambienti dell’organizzazione IMS selezionata a cui accede l’utente che ha eseguito l’accesso. I consumatori possono trasmettere un repositoryID preferito e, in tal caso, il Selettore risorse interrompe il rendering del selettore archivio ed esegue il rendering solo delle risorse dall’archivio specificato.

Archivio risorse

Si tratta di una raccolta di cartelle di risorse che puoi utilizzare per eseguire le operazioni.

Filtri predefiniti filters

Il Selettore risorse fornisce anche opzioni di filtro predefinite per perfezionare i risultati della ricerca. Sono disponibili i seguenti filtri:

  • File type: include cartelle, file, immagini, documenti o video

  • MIME type: include JPG, GIF, PPTX, PNG, MP4, DOCX, TIFF, PDF, XLSX

  • Image Size: include larghezza minima/massima, altezza minima/massima dell’immagine

    rail-view-example

Ricerca personalizzata

Oltre alla ricerca full-text, Asset Selector consente di cercare le risorse all’interno dei file utilizzando la ricerca personalizzata. Puoi utilizzare filtri di ricerca personalizzati sia nella vista modale che nella vista della barra.

custom-search

Puoi anche creare un filtro di ricerca predefinito per salvare i campi che cerchi frequentemente e utilizzarli in un secondo momento. Per creare una ricerca personalizzata delle risorse, puoi utilizzare la proprietà filterSchema.

Barra di ricerca search-bar

Il selettore risorse 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 all’interno selettore risorse per nome, dimensione o dimensione di una risorsa. Puoi anche ordinare le risorse in ordine crescente o decrescente.

Tipi di visualizzazione types-of-view

Il selettore risorse consente di visualizzare la risorsa in quattro diverse visualizzazioni:

  • Vista a elenco : la vista a elenco mostra i file e le cartelle in modo scorrevole in una singola colonna.
  • vista griglia : la vista griglia mostra i file e le cartelle in modo scorrevole in una griglia di righe e colonne.
  • vista galleria : la vista galleria mostra i file o le cartelle in un elenco orizzontale bloccato al centro.
  • vista a cascata : la vista a cascata mostra file o cartelle sotto forma di un Bridge.
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab