Documentazione AEM as a Cloud Service Guida utente

Selettore risorse micro front-end Overview

Last update: Thu Jul 25 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

Amministratore
Utente

Il Selettore risorse micro front-end fornisce un’interfaccia utente che si integra facilmente con l’archivio di Experience Manager Assets 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 le applicazioni Adobe o non Adobe che utilizzano la libreria Vanilla JavaScript.
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.

Prerequisiti prereqs

Devi accertarti di utilizzare i seguenti metodi di comunicazione:

L'applicazione è in esecuzione su HTTPS.
L’URL dell’applicazione si trova nell’elenco Consentiti degli URL di reindirizzamento del client IMS.
Il flusso di accesso IMS viene configurato e renderizzato utilizzando un pop-up sul browser web. Pertanto, i popup devono essere abilitati o consentiti nel browser di destinazione.

Se hai bisogno del flusso di lavoro di autenticazione IMS di Asset Selector, utilizza i prerequisiti precedenti. In alternativa, se sei già autenticato con il flusso di lavoro IMS, puoi aggiungere le informazioni IMS.

IMPORTANT

Questo archivio funge da documentazione supplementare che descrive le API disponibili e alcuni esempi di utilizzo per l’integrazione di Asset Selector. Prima di installare o utilizzare il Selettore risorse, assicurati che all’organizzazione sia stato fornito l’accesso al Selettore risorse come parte del profilo Experience Manager Assets as a Cloud Service. Se non è stato eseguito il provisioning di, non è possibile integrare o utilizzare questi componenti. Per richiedere il provisioning, l’amministratore del programma deve generare un ticket di supporto contrassegnato come P2 da Admin Console e includere le seguenti informazioni:

Nomi di dominio in cui è ospitata l’applicazione che integra.
Dopo il provisioning, all'organizzazione verranno forniti imsClientId, imsScope e un redirectUrl corrispondenti agli ambienti richiesti che sono essenziali per la configurazione di Asset Selector. Senza tali proprietà valide, non è possibile eseguire i passaggi di installazione.

Installazione installation

Il selettore risorse è disponibile tramite CDN ESM (ad esempio, esm.sh/skypack) e versione 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'

Integra il Selettore risorse utilizzando Vanilla JS integration-using-vanilla-js

È possibile integrare qualsiasi applicazione Adobe o non Adobe con l'archivio Experience Manager Assets e selezionare le risorse dall'interno dell'applicazione. Consulta Integrazione di Asset Selector con varie applicazioni.

L’integrazione viene eseguita importando il pacchetto Selettore risorse e connettendolo ad Assets as a Cloud Service tramite la libreria JavaScript Vanilla. 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 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.

Integrare Asset Selector con varie applicazioni asset-selector-integration-with-apps

È possibile integrare Asset Selector (Selettore risorse) con diverse applicazioni, tra cui:

Integrare Asset Selector con un'applicazione Adobe
Integrare Asset Selector con un’applicazione non basata su Adobi
Integrazione per Dynamic Medie con funzionalità OpenAPI

Integrazione con un'applicazione Adobe

Prerequisiti prereqs-adobe-app

Utilizzare i seguenti prerequisiti se si integra Asset Selector con un'applicazione Adobe:

Metodi di comunicazione
imsOrg
imsToken
apikey

Integrare Asset Selector con un'applicazione Adobe adobe-app-integration-vanilla

Nell'esempio seguente viene illustrato l'utilizzo di Asset Selector durante l'esecuzione di un'applicazione Adobe in Unified Shell o quando è già stato generato imsToken per l'autenticazione.

Includi il pacchetto Asset Selector nel codice utilizzando il tag script, come mostrato nelle righe 6-15 dell'esempio seguente. Una volta caricato lo script, la variabile globale PureJSSelectors è disponibile per l’uso. Definisci il selettore risorse proprietà come mostrato nelle righe 16-23. Le proprietà imsOrg e imsToken sono entrambe necessarie per l'autenticazione nell'applicazione Adobe. 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 è possibile utilizzare Asset Selector con l'applicazione Adobe.

code language-html line-numbers

code language-html line-numbers
<!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 Adobe application 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>

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

accordion

ImsAuthProps

Le proprietà ImsAuthProps definiscono le informazioni di autenticazione e il flusso utilizzati da Asset Selector per ottenere un imsToken. Impostando queste proprietà è possibile controllare il comportamento del flusso di autenticazione e registrare i listener per vari eventi di autenticazione.

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2
Nome proprietà	Descrizione
`imsClientId`	Valore stringa che rappresenta l’ID client IMS utilizzato a scopo di autenticazione. Questo valore è fornito da Adobe ed è specifico per l’organizzazione AEM CS Adobe.
`imsScope`	Descrive gli ambiti utilizzati nell'autenticazione. Gli ambiti determinano il livello di accesso dell'applicazione alle risorse dell'organizzazione. Più ambiti possono essere separati da virgole.
`redirectUrl`	Rappresenta l'URL a cui l'utente viene reindirizzato dopo l'autenticazione. Questo valore viene in genere impostato sull’URL corrente dell’applicazione. Se non viene fornito `redirectUrl`, `ImsAuthService` utilizza il redirectUrl utilizzato per registrare `imsClientId`
`modalMode`	Valore booleano che indica se il flusso di autenticazione deve essere visualizzato o meno in un modale (pop-up). Se è impostato su `true`, il flusso di autenticazione viene visualizzato in un popup. Se è impostato su `false`, il flusso di autenticazione viene visualizzato in un ricaricamento dell'intera pagina. Nota: per una migliore interfaccia utente, è possibile controllare dinamicamente questo valore se la finestra popup del browser dell'utente è disabilitata.
`onImsServiceInitialized`	Funzione di callback chiamata quando viene inizializzato il servizio di autenticazione Adobe IMS. Questa funzione accetta un parametro, `service`, che è un oggetto che rappresenta il servizio Adobe IMS. Per ulteriori dettagli, vedere `ImsAuthService`.
`onAccessTokenReceived`	Funzione di callback chiamata quando viene ricevuto un `imsToken` dal servizio di autenticazione Adobe IMS. Questa funzione accetta un parametro, `imsToken`, che è una stringa che rappresenta il token di accesso.
`onAccessTokenExpired`	Funzione di callback chiamata quando un token di accesso è scaduto. Questa funzione viene in genere utilizzata per attivare un nuovo flusso di autenticazione per ottenere un nuovo token di accesso.
`onErrorReceived`	Funzione di callback chiamata quando si verifica un errore durante l'autenticazione. Questa funzione accetta due parametri: il tipo di errore e il messaggio di errore. Il tipo di errore è una stringa che rappresenta il tipo di errore e il messaggio di errore è una stringa che rappresenta il messaggio di errore.

accordion

ServizioAuthIms

La classe ImsAuthService gestisce il flusso di autenticazione per Asset Selector. È responsabile dell'ottenimento di un imsToken dal servizio di autenticazione Adobe IMS. imsToken viene utilizzato per autenticare l'utente e autorizzare l'accesso a Adobe Experience Manager come archivio Assets Cloud Service. ImsAuthService utilizza le proprietà ImsAuthProps per controllare il flusso di autenticazione e registrare i listener per vari eventi di autenticazione. È possibile utilizzare la comoda funzione registerAssetsSelectorsAuthService per registrare l'istanza ImsAuthService con Asset Selector. Le seguenti funzioni sono disponibili nella classe ImsAuthService. Tuttavia, se si utilizza la funzione registerAssetsSelectorsAuthService, non è necessario chiamare queste funzioni direttamente.

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
Nome funzione	Descrizione
`isSignedInUser`	Determina se l'utente è attualmente connesso al servizio e restituisce di conseguenza un valore booleano.
`getImsToken`	Recupera l'autenticazione `imsToken` per l'utente attualmente connesso, che può essere utilizzata per autenticare le richieste ad altri servizi, ad esempio per generare la _rappresentazione della risorsa.
`signIn`	Avvia il processo di accesso per l'utente. Questa funzione utilizza `ImsAuthProps` per mostrare l'autenticazione in un popup o in un ricaricamento dell'intera pagina
`signOut`	Firma l’utente fuori dal servizio, invalidando il token di autenticazione e richiedendo di nuovo l’accesso per accedere alle risorse protette. Richiamando questa funzione verrà ricaricata la pagina corrente.
`refreshToken`	Aggiorna il token di autenticazione per l'utente attualmente connesso, evitando la scadenza e garantendo l'accesso ininterrotto alle risorse protette. Restituisce un nuovo token di autenticazione che può essere utilizzato per le richieste successive.

accordion

Convalida con il token IMS fornito

code language-none

<script>
    const apiToken="<valid IMS token>";
    function handleSelection(selection) {
    console.log("Selected asset: ", selection);
    };
    function renderAssetSelectorInline() {
    console.log("initializing Asset Selector");
    const props = {
    "repositoryId": "delivery-p64502-e544757.adobeaemcloud.com",
    "apiKey": "ngdm_test_client",
    "imsOrg": "<IMS org>",
    "imsToken": apiToken,
    handleSelection,
    hideTreeNav: true
    }
    const container = document.getElementById('asset-selector-container');
    PureJSSelectors.renderAssetSelector(container, props);
    }
    $(document).ready(function() {
    renderAssetSelectorInline();
    });
</script>

accordion

Registra callback al servizio IMS

code language-none

// object `imsProps` to be defined as below
let imsProps = {
    imsClientId: <IMS Client Id>,
        imsScope: "openid",
        redirectUrl: window.location.href,
        modalMode: true,
        adobeImsOptions: {
            modalSettings: {
            allowOrigin: window.location.origin,
},
        useLocalStorage: true,
},
onImsServiceInitialized: (service) => {
            console.log("onImsServiceInitialized", service);
},
onAccessTokenReceived: (token) => {
            console.log("onAccessTokenReceived", token);
},
onAccessTokenExpired: () => {
            console.log("onAccessTokenError");
// re-trigger sign-in flow
},
onErrorReceived: (type, msg) => {
            console.log("onErrorReceived", type, msg);
},
}

Integrazione con un'applicazione non Adobe

Prerequisiti prereqs-non-adobe-app

Se integri Asset Selector con un’applicazione non di Adobe, utilizza i seguenti prerequisiti:

Metodi di comunicazione
imsClientId
imsScope
redirectUrl
imsOrg
apikey

Asset Selector supporta l'autenticazione nell'archivio Experience Manager Assets tramite le proprietà di Identity Management System (IMS), ad esempio imsScope o imsClientID, durante l'integrazione con un'applicazione non Adobe.

accordion
Configurare il selettore risorse per un<>applicazione non di Adobe
Per configurare Asset Selector per un’applicazione non di Adobe, devi innanzitutto registrare un ticket di supporto per il provisioning, seguito dai passaggi di integrazione. Registrazione di un ticket di supporto Passaggi per registrare un ticket di supporto tramite l’Admin Console: Aggiungi Selettore risorse con AEM Assets nel titolo del ticket. Nella descrizione, includi i seguenti dettagli: Experience Manager Assets come URL Cloud Service (ID programma e ID ambiente). Nomi di dominio in cui è ospitata l’applicazione web non Adobe.

accordion

Configurare il selettore risorse per un<>applicazione non di Adobe

Per configurare Asset Selector per un’applicazione non di Adobe, devi innanzitutto registrare un ticket di supporto per il provisioning, seguito dai passaggi di integrazione.

Registrazione di un ticket di supporto
Passaggi per registrare un ticket di supporto tramite l’Admin Console:

Aggiungi Selettore risorse con AEM Assets nel titolo del ticket.
Nella descrizione, includi i seguenti dettagli:
- Experience Manager Assets come URL Cloud Service (ID programma e ID ambiente).
- Nomi di dominio in cui è ospitata l’applicazione web non Adobe.

accordion

Passaggi di integrazione

Utilizza questo file index.html di esempio per l’autenticazione durante l’integrazione di Asset Selector con un’applicazione non di Adobe.

Accedere al pacchetto Asset Selector utilizzando il tag Script, come illustrato nella riga 9 alla riga 11 del file index.html di esempio.

La riga da 14 a la riga 38 dell'esempio descrive le proprietà del flusso IMS, ad esempio imsClientId, imsScope e redirectURL. La funzione richiede di definire almeno una delle proprietà imsClientId e imsScope. Se non si definisce un valore per redirectURL, verrà utilizzato l'URL di reindirizzamento registrato per l'ID client.

Poiché non è stato generato alcun imsToken, utilizzare le funzioni registerAssetsSelectorsAuthService e renderAssetSelectorWithAuthFlow, come mostrato nella riga 40 alla riga 50 del file index.html di esempio. Utilizzare la funzione registerAssetsSelectorsAuthService prima di renderAssetSelectorWithAuthFlow per registrare imsToken con il selettore risorse. Adobe consiglia di chiamare registerAssetsSelectorsAuthService quando si crea un'istanza del componente.

Definisci l'autenticazione e altre proprietà relative all'accesso as a Cloud Service di Assets nella sezione const props, come mostrato nella riga 54 alla riga 60 del file index.html di esempio.

La variabile globale PureJSSelectors, menzionata nella riga 65, viene utilizzata per eseguire il rendering del selettore risorse nel browser Web.

Il rendering del selettore risorse viene eseguito sull'elemento contenitore <div>, come indicato nella riga 74 alla riga 81. Nell'esempio viene utilizzata una finestra di dialogo per visualizzare il selettore risorse.

code language-html line-numbers

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Asset Selectors</title>
    <link rel="stylesheet" href="index.css">
    <script id="asset-selector"
        src="https://experience.adobe.com/solutions/CQ-assets-selectors/assets/resources/asset-selectors.js"></script>
    <script>

        const imsProps = {
            imsClientId: "<obtained from IMS team>",
            imsScope: "openid, <other scopes>",
            redirectUrl: window.location.href,
            modalMode: true, // false to open in a full page reload flow
            onImsServiceInitialized: (service) => {
                // invoked when the ims service is initialized and is ready
                console.log("onImsServiceInitialized", service);
            },
            onAccessTokenReceived: (token) => {
                console.log("onAccessTokenReceived", token);
            },
            onAccessTokenExpired: () => {
                console.log("onAccessTokenError");
                // re-trigger sign-in flow
            },
            onErrorReceived: (type, msg) => {
                console.log("onErrorReceived", type, msg);
            },
        }

        function load() {
            const registeredTokenService = PureJSSelectors.registerAssetsSelectorsAuthService(imsProps);
            imsInstance = registeredTokenService;
        };

        // initialize the IMS flow before attempting to render the asset selector
        load();


        //function that will render the asset selector
            const otherProps = {
            // any other props supported by asset selector
            }
            const assetSelectorProps = {
                "imsOrg": "imsorg",
                ...otherProps
            }
             // container element on which you want to render the AssetSelector/DestinationSelector component
            const container = document.getElementById('asset-selector');

            /// Use the PureJSSelectors in globals to render the AssetSelector/DestinationSelector component
            PureJSSelectors.renderAssetSelectorWithAuthFlow(container, assetSelectorProps, () => {
                const assetSelectorDialog = document.getElementById('asset-selector-dialog');
                assetSelectorDialog.showModal();
            });
        }
    </script>

</head>
<body class="asset-selectors">
    <div>
        <button onclick="renderAssetSelectorWithAuthFlowFlow()">Asset Selector - Select Assets with Ims Flow</button>
    </div>
        <dialog id="asset-selector-dialog">
            <div id="asset-selector" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
            </div>
        </dialog>
    </div>
</body>

</html>

accordion

Impossibile accedere all<>archivio di consegna

note tip
TIP
Se hai integrato il selettore delle risorse utilizzando il flusso di lavoro Registra, ma non riesci ancora ad accedere all’archivio di consegna, assicurati che i cookie del browser siano puliti. In caso contrario, nella console verrà visualizzato `invalid_credentials All session cookies are empty` errore.

Integrazione per Dynamic Medie con funzionalità OpenAPI

Prerequisiti prereqs-polaris

Se integri Asset Selector con Dynamic Medie con le funzionalità OpenAPI, utilizza i seguenti prerequisiti:

Metodi di comunicazione
Per accedere a Dynamic Medie con funzionalità OpenAPI, è necessario disporre di licenze per:
- Archivio Assets (ad esempio, Experience Manager Assets as a Cloud Service).
- AEM-Dynamic Medie
Solo le risorse approvate sono disponibili per l'utilizzo per garantire la coerenza del brand.

Integrazione per Dynamic Medie con funzionalità OpenAPI adobe-app-integration-polaris

L’integrazione del selettore delle risorse con il processo OpenAPI di Dynamic Medie prevede diversi passaggi, tra cui la creazione di un URL Dynamic Media personalizzato o pronto per scegliere l’URL Dynamic Media, ecc.

accordion

Integrare Asset Selector per Dynamic Medie con funzionalità OpenAPI

Le proprietà rootPath e path non devono far parte di Dynamic Medie con funzionalità OpenAPI. È invece possibile configurare la proprietà aemTierType. Di seguito è riportata la sintassi della configurazione:

code language-none
`aemTierType:[1: "delivery"]`

Questa configurazione ti consente di visualizzare tutte le risorse approvate senza cartelle o come struttura semplice. Per ulteriori informazioni, passa alla proprietà aemTierType in Proprietà selettore risorse

accordion

Creare un URL di consegna dinamico da risorse approvate

Una volta configurato il Selettore risorse, viene utilizzato uno schema di oggetti per creare un URL di consegna dinamico dalle risorse selezionate.
Ad esempio, uno schema di un oggetto da un array di oggetti che viene ricevuto al momento della selezione di una risorsa:

code language-none
`{ "dc:format": "image/jpeg", "repo:assetId": "urn:aaid:aem:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", "repo:name": "image-7.jpg", "repo:repositoryId": "delivery-pxxxx-exxxxxx.adobe.com", ... }`

Tutte le risorse selezionate sono gestite dalla funzione handleSelection che agisce come oggetto JSON. Ad esempio, JsonObj. L’URL di consegna dinamico viene creato combinando i gestori seguenti:

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
Oggetto	JSON
Host	`assetJsonObj["repo:repositoryId"]`
Directory principale API	`/adobe/dynamicmedia/deliver`
asset-id	`assetJsonObj["repo:assetId"]`
seo-name	`assetJsonObj["repo:name"].split(".").slice(0,-1).join(".")`
formato	`.jpg`

Specifiche API di consegna risorse approvate

Formato URL:
https://<delivery-api-host>/adobe/dynamicmedia/deliver/<asset-id>/<seo-name>.<format>?<image-modification-query-parameters>

Dove:

Host: https://delivery-pxxxxx-exxxxxx.adobe.com
La radice API è "/adobe/dynamicmedia/deliver"
<asset-id> è l'identificatore della risorsa
<seo-name> è il nome di una risorsa
<format> è il formato di output
<image modification query parameters> come supporto dalla specifica API di consegna delle risorse approvate

API di consegna risorse approvate

L’URL di consegna dinamico ha la seguente sintassi:
https://<delivery-api-host>/adobe/assets/deliver/<asset-id>/<seo-name>, dove

Host: https://delivery-pxxxxx-exxxxxx.adobe.com
La radice API per la consegna della rappresentazione originale è "/adobe/assets/deliver"
<asset-id> è l'identificatore della risorsa
<seo-name> è il nome della risorsa che potrebbe avere o meno un'estensione

accordion

Pronto a scegliere l<>URL di consegna dinamico

table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
Oggetto	JSON
Host	`assetJsonObj["repo:repositoryId"]`
Directory principale API	`/adobe/assets/deliver`
asset-id	`assetJsonObj["repo:assetId"]`
seo-name	`assetJsonObj["repo:name"]`

Di seguito sono riportati i due modi per attraversare l’oggetto JSON:

URL di consegna dinamico

Miniatura: le miniature possono essere immagini e le risorse sono PDF, video, immagini e così via. Tuttavia, puoi utilizzare gli attributi di altezza e larghezza della miniatura di una risorsa come rappresentazione dinamica della consegna.
Per le risorse di tipo PDF è possibile utilizzare il seguente set di rappresentazioni:
Una volta selezionato un PDF nella barra laterale, il contesto di selezione offre le informazioni seguenti. Di seguito è riportato il modo per scorrere l’oggetto JSON:

È possibile fare riferimento a selection[0].....selection[4] per l'array del collegamento della rappresentazione dalla schermata precedente. Ad esempio, le proprietà chiave di una delle rappresentazioni delle miniature includono:

code language-none

{
    "height": 319,
    "width": 319,
    "href": "https://delivery-pxxxxx-exxxxx-cmstg.adobeaemcloud.com/adobe/assets/urn:aaid:aem:8560f3a1-d9cf-429d-a8b8-d81084a42d41/as/algorithm design.jpg?accept-experimental=1&width=319&height=319&preferwebp=true",
    "type": "image/webp"
}

Nella schermata precedente, se è necessario PDF, l’URL di consegna del rendering originale del PDF deve essere incorporato nell’esperienza di destinazione e non nella relativa miniatura. Ad esempio https://delivery-pxxxxx-exxxxx-cmstg.adobeaemcloud.com/adobe/assets/urn:aaid:aem:8560f3a1-d9cf-429d-a8b8-d81084a42d41/original/as/algorithm design.pdf?accept-experimental=1

Video: Puoi utilizzare l'URL del lettore video per le risorse dei tipi di video che utilizzano un iFrame incorporato. Nell’esperienza di destinazione puoi utilizzare le seguenti rappresentazioni di array:

code language-none

{
    "height": 319,
    "width": 319,
    "href": "https://delivery-pxxxxx-exxxxx-cmstg.adobeaemcloud.com/adobe/assets/urn:aaid:aem:2fdef732-a452-45a8-b58b-09df1a5173cd/as/asDragDrop.2.jpg?accept-experimental=1&width=319&height=319&preferwebp=true",
    "type": "image/webp"
}

Lo snippet di codice nella schermata precedente è un esempio di risorsa video. Include l’array di collegamenti per le rappresentazioni. selection[5] nell'estratto è l'esempio della miniatura dell'immagine che può essere utilizzata come segnaposto della miniatura video nell'esperienza di destinazione. selection[5] nell'array delle rappresentazioni è per il lettore video. Serve un HTML e può essere impostato come src dell'iframe. Supporta lo streaming con bitrate adattivo, ovvero la distribuzione del video ottimizzata per il web.

Nell'esempio precedente, l'URL del lettore video è https://delivery-pxxxxx-exxxxx-cmstg.adobeaemcloud.com/adobe/assets/urn:aaid:aem:2fdef732-a452-45a8-b58b-09df1a5173cd/play?accept-experimental=1

accordion

Interfaccia utente di Asset Selector per Dynamic Medie con funzionalità OpenAPI

Dopo l’integrazione con il selettore delle risorse micro-front-end di Adobe, nell’archivio Experience Manager Assets puoi visualizzare solo la struttura delle risorse approvate.

Dynamic Medie con funzionalità OpenAPI, interfaccia utente

A: Nascondi/Mostra pannello
B: Assets
C: Ordinamento
D: Filtri
E: Barra di ricerca
F: Ordinamento crescente o decrescente
G: Annulla selezione
H: selezionare una o più risorse

accordion

accordion
Configurare filtri personalizzati
Il selettore risorse per Dynamic Medie con funzionalità OpenAPI consente di configurare proprietà personalizzate e i filtri basati su di esse. La proprietà `filterSchema` viene utilizzata per configurare tali proprietà. La personalizzazione può essere esposta come `metadata.<metadata bucket>.<property name>.` in base al quale è possibile configurare i filtri, dove `metadata` sono le informazioni di una risorsa `embedded` è il parametro statico utilizzato per la configurazione e `<propertyname>` è il nome del filtro che si sta configurando Per la configurazione, le proprietà definite al livello `jcr:content/metadata/` sono esposte come `metadata.<metadata bucket>.<property name>.` per i filtri che si desidera configurare. Ad esempio, in Asset Selector for Dynamic Medie con funzionalità OpenAPI, una proprietà su `asset jcr:content/metadata/client_name:market` viene convertita in `metadata.embedded.client_name:market` per la configurazione del filtro. Per ottenere il nome, è necessario eseguire un’attività una tantum. Effettua una chiamata API di ricerca per la risorsa e ottieni il nome della proprietà (essenzialmente il bucket).

Configurare filtri personalizzati

Il selettore risorse per Dynamic Medie con funzionalità OpenAPI consente di configurare proprietà personalizzate e i filtri basati su di esse. La proprietà filterSchema viene utilizzata per configurare tali proprietà. La personalizzazione può essere esposta come metadata.<metadata bucket>.<property name>. in base al quale è possibile configurare i filtri, dove

metadata sono le informazioni di una risorsa
embedded è il parametro statico utilizzato per la configurazione e
<propertyname> è il nome del filtro che si sta configurando

Per la configurazione, le proprietà definite al livello jcr:content/metadata/ sono esposte come metadata.<metadata bucket>.<property name>. per i filtri che si desidera configurare.

Ad esempio, in Asset Selector for Dynamic Medie con funzionalità OpenAPI, una proprietà su asset jcr:content/metadata/client_name:market viene convertita in metadata.embedded.client_name:market per la configurazione del filtro.

Per ottenere il nome, è necessario eseguire un’attività una tantum. Effettua una chiamata API di ricerca per la risorsa e ottieni il nome della proprietà (essenzialmente il bucket).

Proprietà 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

Falso

Se contrassegnato come true, il rendering del selettore risorse viene eseguito in una visualizzazione della barra a sinistra. Se è contrassegnato false, il rendering del selettore risorse viene eseguito nella vista modale.

imsOrg

Stringa

Sì

L’ID di Adobe Identity Management System (IMS) assegnato durante il provisioning di Adobe Experience Manager as a Cloud Service per l’organizzazione. La chiave imsOrg è necessaria per autenticare se l'organizzazione a cui si accede è in Adobe IMS o meno.

imsToken

Stringa

Token di connessione IMS utilizzato per l’autenticazione. imsToken è obbligatorio se si utilizza un'applicazione Adobe per l'integrazione.

apiKey

Stringa

Chiave API utilizzata per accedere al servizio di individuazione AEM. apiKey è richiesto se si utilizza un'integrazione dell'applicazione Adobe.

filterSchema

Array

Modello utilizzato per configurare le proprietà del filtro. Questa funzione è utile quando desideri limitare determinate opzioni di filtro nel Selettore risorse.

filterFormProps

Oggetto

Specifica le proprietà del filtro da utilizzare per perfezionare la ricerca. Per! ad esempio, tipo MIME JPG-GIF, PNG,.

selectedAssets

Array <Object>

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

Proprietà Visualizzazione raccolta risorse che contiene un oggetto contenente una configurazione personalizzata per ignorare le impostazioni predefinite. Inoltre, questa proprietà viene utilizzata con la proprietà rail per abilitare la visualizzazione della barra del visualizzatore risorse.

i18nSymbols

Object<{ id?: string, defaultMessage?: string, description?: string}>

Se le traduzioni OOTB non sono sufficienti per le esigenze dell'applicazione, è possibile esporre un'interfaccia tramite la quale è possibile passare i propri 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

Il selettore risorse fornisce le traduzioni OOTB predefinite. È 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

Archivio da cui il Selettore risorse carica il contenuto.

additionalAemSolutions

Array<string>

[ ]

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

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

La proprietà consente la funzionalità di rilascio di una risorsa.

dropOptions

{allowList?: Object}

Configura le opzioni di rilascio utilizzando un “elenco consentiti”.

colorScheme

Stringa

Configura il tema (light o dark) per il Selettore risorse.

handleSelection

Funzione

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

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

Richiamata quando viene premuto il pulsante Close nella vista modale. Questa è chiamata solo nella vista modal e ignorata nella vista rail.

onFilterSubmit

Funzione

Richiamata con gli elementi filtro poiché l’utente modifica criteri di filtro diversi.

selectionType

Stringa

Celibe/Nubile

Configurazione per la selezione single o multiple di risorse alla volta.

trascinamentoOpzioni.inserisco nell'elenco Consentiti di

booleano

La proprietà viene utilizzata per consentire o negare il trascinamento di risorse non selezionabili.

aemTierType

Stringa

Consente di scegliere se visualizzare le risorse dal livello di consegna, dal livello di authoring o da entrambi. Sintassi

: aemTierType:[0]: "author" 1: "delivery"

Ad esempio, se vengono utilizzati entrambi ["author","delivery"], il commutatore dell'archivio visualizza le opzioni sia per l'autore che per la consegna.

handleNavigateToAsset

Funzione

È una funzione di callback per gestire la selezione di una risorsa.

noWrap

Booleano

La proprietà noWrap consente di eseguire il rendering del selettore risorse nel pannello della barra laterale. Se questa proprietà non è menzionata, per impostazione predefinita viene eseguita la visualizzazione Finestra di dialogo.

dimensioneFinestraDiDialogo

acquisizione di piccole, medie, grandi, a schermo intero o intero

Stringa

Facoltativo

È possibile controllare il layout specificandone le dimensioni utilizzando le opzioni specificate.

colorScheme

Chiaro o scuro

Questa proprietà viene utilizzata per impostare il tema di un'applicazione Asset Selector. Puoi scegliere tra tema chiaro o scuro.

filterRepoList

Funzione

È possibile utilizzare la funzione di callback filterRepoList che chiama l'archivio Experience Manager e restituisce un elenco filtrato di archivi.

expiryOptions

Funzione

È possibile utilizzare tra le due proprietà seguenti: getExpiryStatus che fornisce lo stato di una risorsa scaduta. La funzione restituisce EXPIRED, EXPIRING_SOON o NOT_EXPIRED in base alla data di scadenza di una risorsa fornita. Consulta personalizzare le risorse scadute. È inoltre possibile utilizzare allowSelectionAndDrag in cui il valore della funzione può essere true o false. Quando il valore è impostato su false, la risorsa scaduta non può essere selezionata o trascinata nell'area di lavoro.

showToast

Consente al selettore risorse di visualizzare un messaggio popup personalizzato per la risorsa scaduta.

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 o non è menzionato nelle proprietà, per impostazione predefinita Asset Selector viene visualizzato nella visualizzazione modale. La proprietà acvConfig consente alcune configurazioni approfondite, come il trascinamento della selezione. Visita abilita o disabilita il trascinamento della selezione per informazioni sull'utilizzo della proprietà acvConfig.

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 con facet, Assets Selector consente di personalizzare vari attributi per perfezionare la ricerca da Adobe Experience Manager come applicazione Cloud Service. Aggiungi il seguente codice per aggiungere filtri di ricerca personalizzati nell’applicazione. 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

Snippet di codice di configurazione funzionale code-snippets

Definire i prerequisiti nel file index.html o in un file simile nell'implementazione dell'applicazione per definire i dettagli di autenticazione per accedere all'archivio Experience Manager Assets. Al termine, puoi aggiungere snippet di codice in base alle tue esigenze.

È possibile aggiungere il seguente frammento di codice nell'oggetto assetSelectorProps per personalizzare il pannello dei filtri:

filterSchema: [
    {
    header: 'File Type',
    groupKey: 'TopGroup',
    fields: [
    {
    element: 'checkbox',
    name: 'type',
    options: [
    {
    label: 'Images',
    value: '<comma separated mimetypes, without space, that denote all images, for e.g., image/>',
    },
    {
    label: 'Videos',
    value: '<comma separated mimetypes, without space, that denote all videos for e.g., video/,model/vnd.mts,application/mxf>'
    }
    ]
    }
    ]
    },
    {
    fields: [
    {
    element: 'checkbox',
    name: 'type',
    options: [
    { label: 'JPG', value: 'image/jpeg' },
    { label: 'PNG', value: 'image/png' },
    { label: 'TIFF', value: 'image/tiff' },
    { label: 'GIF', value: 'image/gif' },
    { label: 'MP4', value: 'video/mp4' }
    ],
    columns: 3,
    },
    ],
    header: 'Mime Types',
    groupKey: 'MimeTypeGroup',
    }},
    {
    fields: [
    {
    element: 'checkbox',
    name: 'property=metadata.application.xcm:keywords.value',
    options: [
    { label: 'Fruits', value: 'fruits' },
    { label: 'Vegetables', value: 'vegetables'}
    ],
    columns: 3,
    },
    ],
    header: 'Food Category',
    groupKey: 'FoodCategoryGroup',
    }
],

Puoi personalizzare la visualizzazione dei dettagli di una risorsa facendo clic sull'icona . Esegui il codice seguente:

// Create an object infoPopoverMap and set the property `infoPopoverMap` with it in assetSelectorProps
const infoPopoverMap = (map) => {
// for example, to skip `path` from the info popover view
let defaultPopoverData = PureJSSelectors.getDefaultInfoPopoverData(map);
return defaultPopoverData.filter((i) => i.label !== 'Path'
};
assetSelectorProps.infoPopoverMap = infoPopoverMap;

Attiva o disattiva la modalità di trascinamento della selezione enable-disable-drag-and-drop

Aggiungi le seguenti proprietà a assetSelectorProp per abilitare la modalità di trascinamento. Per disattivare il trascinamento, sostituire il parametro true con false.

rail: true,
acvConfig: {
dragOptions: {
allowList: {
'*': true,
},
},
selectionType: 'multiple'
}

// the drop handler to be implemented
function drop(e) {
e.preventDefault();
// following helps you get the selected assets – an array of objects.
const data = JSON.parse(e.dataTransfer.getData('collectionviewdata'));
}

Selezione di Assets selection-of-assets

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

Per configurare la selezione di una o più risorse, effettua le seguenti operazioni:

acvConfig: {
selectionType: 'multiple' // 'single' for single selection
}
// the `handleSelection` callback, always gets you the array of selected assets

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: {
        'https://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

Descrizione

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.

_collegamenti.https://ns.adobe.com/adobecloud/rel/rendition

Array<Object>

Array di oggetti contenenti informazioni sulle rappresentazioni della risorsa.

_collegamenti.https://ns.adobe.com/adobecloud/rel/rendition[].href

stringa

URI della rappresentazione.

_collegamenti.https://ns.adobe.com/adobecloud/rel/rendition[].type

stringa

Tipo MIME della rappresentazione.

_collegamenti.https://ns.adobe.com/adobecloud/rel/rendition[].repo:size'

numero

Dimensione della rappresentazione in byte.

_collegamenti.https://ns.adobe.com/adobecloud/rel/rendition[].width

numero

Larghezza della rappresentazione.

_collegamenti.https://ns.adobe.com/adobecloud/rel/rendition[].height

numero

Altezza della rappresentazione.

Personalizzare le risorse scadute customize-expired-assets

Il selettore risorse consente di controllare l’utilizzo di una risorsa scaduta. Puoi personalizzare la risorsa scaduta con un distintivo In scadenza che ti aiuterà a conoscere in anticipo le risorse che scadranno entro 30 giorni dalla data corrente. Inoltre, questo può essere personalizzato in base al requisito. Puoi anche consentire la selezione di una risorsa scaduta nell’area di lavoro o viceversa. La personalizzazione di una risorsa scaduta può essere eseguita utilizzando alcuni snippet di codice in vari modi:

expiryOptions: {
    getExpiryStatus: getExpiryStatus;
}

Selezione di una risorsa scaduta selection-of-expired-asset

Puoi personalizzare l’utilizzo di una risorsa scaduta per renderla selezionabile o non selezionabile. Puoi personalizzare se desideri consentire o meno il trascinamento di una risorsa scaduta nell’area di lavoro del Selettore risorse. A questo scopo, utilizza i seguenti parametri per rendere una risorsa non selezionabile sull’area di lavoro:

expiryOptions:{
    allowSelectionAndDrop: false;
}

Impostazione della durata di una risorsa scaduta set-duration-of-expired-asset

Il seguente frammento di codice ti aiuta a impostare il badge In scadenza per le risorse che scadranno nei prossimi cinque giorni:

/**
  const getExpiryStatus = async (asset) => {
  if (!asset.expirationDate) {
    return null;
  }
  const currentDate = new Date();
  const millisecondsInDay = 1000 * 60 * 60 * 24;
  const fiveDaysFromNow = new Date(value: currentDate.getTime() + 5 * millisecondsInDay);
  const expirationDate = new Date(asset.expirationDate);
  if (expirationDate.getTime() < currentDate.getTime()) {
    return 'EXPIRED';
  } else if (expirationDate.getTime() < fiveDaysFromNow.getTime()) {
    return 'EXPIRING_SOON';
  } else {
    return 'NOT_EXPIRED';
  }
};

Fai riferimento all’esempio seguente per comprendere come funziona la proprietà per recuperare la data e l’ora correnti:

const currentData = new Date();
currentData.getTime(),

restituisce 1718779013959 come nel formato di data 2024-06-19T06:36:53.959Z.

La proprietà showToast viene utilizzata per personalizzare il messaggio popup da visualizzare su una risorsa scaduta.

Sintassi:

{
    type: 'ERROR', 'NEUTRAL', 'INFO', 'SUCCESS',
    message: '<message to be shown>',
    timeout: optional,
}

Il timeout predefinito è di 500 millisecondi. Mentre, è possibile modificarlo in base al requisito. Inoltre, se si passa il valore timeout: 0, l'avviso popup rimane aperto fino a quando non si fa clic sul pulsante incrociato.

Di seguito è riportato un esempio per visualizzare un messaggio popup quando è necessario non consentire la selezione di una cartella e visualizzare un messaggio corrispondente:

const showToast = {
    type: 'ERROR',
    message: 'Folder cannot be selected',
    timeout: 5000,
}

Utilizza il seguente frammento di codice per visualizzare un messaggio popup per l’utilizzo di una risorsa scaduta:

messaggio popup

Filtro di chiamata contestuale contextual-invocation-filter

Il selettore risorse consente di aggiungere un filtro per la selezione dei tag. Supporta un gruppo di tag che combina tutti i tag pertinenti a un particolare gruppo di tag. Inoltre, ti consente di selezionare altri tag corrispondenti alla risorsa che stai cercando. Inoltre, puoi anche impostare i gruppi di tag predefiniti sotto il filtro di chiamata contestuale, che vengono utilizzati principalmente da te in modo che siano accessibili da te in movimento.

Per abilitare il filtro di assegnazione tag nella ricerca, è necessario aggiungere lo snippet di codice di chiamata contestuale.

È obbligatorio utilizzare la proprietà name corrispondente al tipo di gruppo di tag (property=xcm:keywords.id=).

Sintassi:

const filterSchema=useMemo(() => {
    return: [
        {
            element: 'taggroup',
            name: 'property=xcm:keywords.id='
        },
    ];
}, []);

Per aggiungere gruppi di tag nel pannello filtri, è necessario aggiungere almeno un gruppo di tag come impostazione predefinita. Inoltre, utilizza lo snippet di codice seguente per aggiungere i tag predefiniti preselezionati dal gruppo di tag.

export const WithAssetTags = (props) = {
const [selectedTags, setSelectedTags] = useState (
new Set(['orientation', 'color', 'facebook', 'experience-fragments:', 'dam', 'monochrome'])
const handleSelectTags = (selected) => {
setSelectedTags (new Set (selected)) ;
};
const filterSchema = useMemo ((); => {
    return {
        schema: [
            ｛
                fields: [
                    {
                    element: 'checkbox',
                    name: 'property=xcm:keywords=',
                    defaultValue: Array. from(selectedTags),
                    options: assetTags,
                    orientation: 'vertical',
                    },
                ],
    header: 'Asset Tags',
    groupkey: 'AssetTagsGroup',
        ],
    },
｝；
}, [selectedTags]);

filtro gruppo tag

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

Disabilitazione della selezione di Assets disable-selection

La funzione Disattiva selezione viene utilizzata per nascondere o disabilitare la selezione delle risorse o cartelle. La casella di controllo di selezione viene nascosta dalla scheda o dalla risorsa, che ne impedisce la selezione. Per utilizzare questa funzione, puoi dichiarare la posizione di una risorsa o cartella che desideri disabilitare in un array. Ad esempio, se vuoi disattivare la visualizzazione di una cartella in prima posizione, puoi aggiungere il seguente codice:
disableSelection: [0]:folder

Puoi fornire all’array un elenco di tipi mime (ad esempio immagine, cartella, file o altri tipi mime come immagine/jpeg) che desideri disabilitare. I tipi MIME dichiarati sono mappati negli attributi data-card-type e data-card-mimetype di una risorsa.

Inoltre, Assets con selezione disabilitata è trascinabile. Per disattivare il trascinamento di un particolare tipo di risorsa, puoi utilizzare la proprietà dragOptions.allowList.

La sintassi per disabilitare la selezione è la seguente:

(args)=> {
    return(
        <ASDialogWrapper
            {...args}
            disableSelection={args.disableSelection}
            handleAssetSelection={action('handleAssetSelection')}
            handleSelection={action('handleSelection')}
            selectionType={args.selectionType}
        />
    );
}

NOTE

Nel caso di una risorsa, la casella di controllo di selezione è nascosta, mentre nel caso di una cartella, la cartella non è selezionabile ma viene ancora visualizzata la navigazione della cartella indicata.

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

A: Nascondi/Mostra pannello
B: Selettore archivio
C: Risorse
D: Filtri
E: Barra di ricerca
F: Ordinamento
G: Ordinamento crescente o decrescente
H: Visualizzazione

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 sull’ambiente dell’organizzazione IMS selezionata a cui accede l’utente connesso. 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:

Stato: include lo stato corrente della risorsa tra all, approved, rejected o no status.
Il tipo di file: include folder, file, images, documents o video.

Stato scadenza: fa riferimento alle risorse in base alla relativa durata di scadenza. È possibile selezionare la casella di controllo Expired per filtrare le risorse scadute oppure impostare Expiration Duration per visualizzare le risorse in base alla loro durata di scadenza. Quando una risorsa è già scaduta o sta per scadere, viene visualizzato un badge che illustra la stessa cosa. Inoltre, puoi controllare se consentire l’utilizzo (o il trascinamento) di una risorsa scaduta. Ulteriori informazioni su personalizzare le risorse scadute. Per impostazione predefinita, il badge In scadenza viene visualizzato per le risorse che scadono nei successivi 30 giorni. È tuttavia possibile configurare la scadenza utilizzando la proprietà expirationDate.

note tip
TIP
Se desideri visualizzare o filtrare le risorse in base alla loro data di scadenza futura, indica l'intervallo di date futuro nel campo `Expiration Duration`. Visualizza le risorse con il badge in scadenza.

Tipo MIME: include JPG, GIF, PPTX, PNG, MP4, DOCX, TIFF, PDF, XLSX.
Dimensioni immagine: include la larghezza minima/massima e l'altezza minima/massima dell'immagine.

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:

La visualizzazione elenco visualizza i file e le cartelle scorrevoli in un'unica colonna.
La visualizzazione griglia visualizza i file e le cartelle scorrevoli in una griglia di righe e colonne.
La visualizzazione raccolta visualizza i file o le cartelle in un elenco orizzontale con blocco centrale.
La vista a cascata visualizza file o cartelle sotto forma di Bridge.