Selettore frammento di contenuto - Proprietà correlate content-fragment-selector-related-properties

Il selettore dei frammenti di contenuto micro-front-end consente di sfogliare o cercare frammenti di contenuto nell’archivio e utilizzarli nell’applicazione.

Puoi utilizzare le seguenti proprietà per personalizzare il rendering del selettore dei frammenti di contenuto e il modo in cui può essere utilizzato.

Proprietà selettore frammento di contenuto content-fragment-selector-properties

Proprietà
Tipo
Obbligatorio
Predefiniti
Descrizione
ref
FragmentSelectorRef
No
Riferimento all’istanza ContentFragmentSelector, che consente l’accesso alle funzionalità fornite, ad esempio reload.
apiKey
stringa
No
Chiave API segnalata ad Analytics su digitalData.page.attributes.apiKey. Utilizzato solo per il tracciamento: non per le chiamate API di dati. Se non viene specificato, deriva dall’attestazione imsToken (client_id), che utilizza come valore predefinito il pacchetto.
imsToken
stringa
No
Token IMS utilizzato per l’autenticazione. Se non viene fornito, verrà avviato il flusso di accesso IMS.
repoId
stringa
No
ID archivio utilizzato per il selettore frammento. Se fornito, il selettore si connette automaticamente all’archivio specificato e il menu a discesa dell’archivio è nascosto. Se non viene fornito, l’utente può selezionare un archivio dall’elenco degli archivi disponibili a cui ha accesso.
allowedRepositoryIds
stringa[]
No
Elenco di ID dell’archivio per filtrare archivi e frammenti di contenuto nel selettore dei frammenti di contenuto. Se vengono forniti gli ID dell’archivio, solo questi archivi saranno visibili nel selettore dell’archivio. Se non viene fornito un array vuoto, saranno disponibili tutti gli archivi a cui l’utente ha accesso.
defaultRepoId
stringa
No
ID archivio che verrà selezionato per impostazione predefinita quando viene visualizzato il selettore dell’archivio. Utilizzato solo quando repoId non è fornito. Se repoId è impostato, il selettore dell’archivio è nascosto e questo valore viene ignorato.
orgId
stringa
No
ID organizzazione utilizzato per l’autenticazione. Se non viene fornito, l’utente può selezionare un archivio da diverse organizzazioni a cui ha accesso. Se l’utente non ha accesso ad alcun archivio o organizzazione, il contenuto non verrà caricato.
locale
stringa
No
“en-US”
Lingua.
env
stringa
No
Ambiente di implementazione. Vedere il tipo Env per i nomi di ambiente consentiti.
filters
FiltroFrammento
No
{ folder: "/content/dam" }
Filtri da applicare all’elenco dei frammenti di contenuto. Per impostazione predefinita, i frammenti in /content/dam verranno visualizzati.
repoFilters
Record<stringa, FragmentFilterWithReadonlySupport>
No
Le sostituzioni del filtro per archivio sono impostate in base all’ID archivio.
Usare quando il selettore espone più archivi, ma ciascuno di essi necessita di filtri diversi (ad esempio Stato: Bozza per un’istanza Autore mentre altri usano Stato: Pubblicato, Modificato).
Quando il repository attivo ha una voce, sostituisce completamente i filtri per tale repository (i valori predefiniti non vengono uniti in), pertanto ogni sostituzione deve dichiarare il set di filtri completo di cui ha bisogno. Gli archivi senza una voce tornano ai filtri, quindi omettendo repoFilters si mantiene il comportamento esistente. L’esclusione viene riapplicata automaticamente quando l’utente cambia archivio. Ogni voce supporta gli stessi marcatori di sola lettura dei filtri.
isOpen
booleano
No
false
Contrassegno flag per controllare se il selettore è aperto o chiuso.
noWrap
booleano
No
false
Determina se il rendering del selettore frammento viene eseguito senza una finestra di dialogo di ritorno a capo. Se è impostato su true, il selettore di frammenti è incorporato direttamente nel contenitore principale. Utile per integrare il selettore in layout o flussi di lavoro personalizzati.
onSelectionChange
({ contentFragments: ContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => void
No
La funzione di callback si attiva ogni volta che cambia la selezione dei frammenti di contenuto. Fornisce i frammenti selezionati, il nome di dominio, le informazioni sul tenant, l’ID dell’archivio e gli archivi di consegna.
onDismiss
() => void
No
Funzione di callback attivata quando viene eseguita l’azione di esclusione (ad esempio, chiudendo il selettore).
onSubmit
({ contentFragments: ContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => void
No
La funzione di callback si attiva quando l’utente conferma la selezione. Riceve i frammenti di contenuto selezionati, il nome di dominio, le informazioni sul tenant, l’ID archivio e gli archivi di consegna.
theme
“chiaro” o “scuro”
No
Tema per il selettore di frammenti. Per impostazione predefinita, è impostato sul tema dell’ambiente unifiedShell.
selectionType
“singolo” o “multiplo”
No
single
Il tipo di selezione può essere utilizzato per limitare la selezione per il selettore di frammenti.
maxItems
numero
No
Numero massimo di elementi selezionabili quando selectionType è multiple. Se non specificato, è consentita la selezione illimitata. Non applicabile per la modalità di selezione singola.
dialogSize
“fullscreen” o “fullscreenTakeover”
No
fullscreen
Proprietà opzionale per controllare la dimensione della finestra di dialogo.
runningInUnifiedShell
booleano
No
Indica se DestinationSelector è in esecuzione in UnifiedShell o standalone.
selectedFragments
ContentFragmentIdentifier[]
No
[]
Selezione iniziale dei frammenti di contenuto da preselezionare all’apertura del selettore.
hipaaEnabled
booleano
No
false
Indica se la conformità HIPAA è abilitata.
inventoryView
TipoVistaInventario
No
table
Tipo di visualizzazione predefinito del magazzino da utilizzare nel selettore.
inventoryViewToggleEnabled
booleano
No
false
Indica se l’interruttore della visualizzazione inventario è attivato, consentendo all’utente di passare dalla visualizzazione tabella alla visualizzazione griglia e viceversa.
selectFields
booleano
No
false
Indica se il passaggio di selezione dei campi è abilitato. Quando true, l’utente seleziona i campi da esporre per ciascun frammento selezionato e i campi scelti vengono restituiti come mappa per frammento selectedFields nei payload onSelectionChange e onSubmit. Quando false (impostazione predefinita), il passaggio viene ignorato e selectedFields viene omesso da ogni frammento.
variationsFilters
oggetto
No
Facoltativo.
Consente di regolare il menu a discesa della variante (non l’elenco principale, utilizzare i filtri per tale variante). Al momento è supportato solo lo stato, con il valore “PUBLISHED” (esempio: { status: [“PUBLISHED”] }). Le altre chiavi vengono ignorate. Ometti la proprietà per mostrare tutte le varianti.
rememberState
booleano
No
false
Quando true, il selettore mantiene i filtri attivi dell’utente, le ricerche salvate e l’ultimo archivio utilizzato in IndexedDB e li ripristina automaticamente al caricamento successivo. Opt-in: i consumatori esistenti non richiedono modifiche se omessi.
amsRepositories
Array<{ etichetta: stringa; valore: stringa; orgId?: stringa }>
No
Elenco facoltativo di archivi AMS da includere nel selettore dell’archivio. Questi sono concatenati con archivi cloud del servizio di individuazione. Ogni voce può includere un orgId facoltativo per gli utenti di più organizzazioni. Se omesso, viene utilizzato l’orgId prop di livello superiore, quindi una ricerca Adobe IMS. Gli archivi AMS utilizzano sempre imsToken non elaborato (nessuno scambio di token cloud). Soggetto al filtro allowedRepositoryIds quando viene fornita anche la proprietà.

Proprietà ImsAuthProps imsauthprops-properties

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

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 la tua organizzazione Adobe AEM CS.
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 redirectUrl non viene fornito, ImsAuthService utilizzerà 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. _Note :_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.

Proprietà ImsAuthService imsauthservice-properties

La classe ImsAuthService gestisce il flusso di autenticazione per il selettore frammento di contenuto. È responsabile dell’ottenimento di un imsToken dal servizio di autenticazione Adobe IMS. imsToken viene utilizzato per autenticare l’utente e autorizzare l’accesso all’archivio Adobe Experience Manager (AEM) CS. 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 registerContentFragmentSelectorAuthService per registrare l’istanza ImsAuthService con il Selettore frammento di contenuto. Le seguenti funzioni sono disponibili nella classe ImsAuthService. Tuttavia, se si utilizza la funzione registerContentFragmentSelectorAuthService, non è necessario chiamare queste funzioni direttamente.

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 delle risorse.
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.

Tipo ContentFragmentSelection contentfragmentselection-type

Il tipo ContentFragmentSelection rappresenta la struttura dei frammenti di contenuto restituiti dal selettore frammenti di contenuto quando un utente seleziona i frammenti.

Definizioni dei tipi type-definitions

SelezioneFrammentoContenuto contentfragmentselection

type ContentFragmentSelection = {
    id: string;
    path: string;
    title: string;
    model: ContentFragmentModel;
    variations: string[];
    status: string;
    publishedBy: string;
    publishedByFullName: string;
    publishedDate: number | undefined;
    modifiedBy: string;
    modifiedByFullName: string;
    modifiedDate: number;
    createdBy: string;
    createdByFullName: string;
    createdDate: number;
    selectedFields?: Record<string, unknown>;
    selectedTemplateId?: string | null;
}[];

ModelloFrammentoContenuto

type ContentFragmentModel = {
    name: string;
    id: string;
    path?: string;
    tagIds?: string[];
};

Proprietà properties

Proprietà ContentFragmentSelection contentfragmentselection-properties

Proprietà
Tipo
Obbligatorio
Descrizione
id
stringa
Identificatore univoco del frammento di contenuto
path
stringa
Percorso completo del frammento nel DAM (ad esempio, /content/dam/my-project/article-fragment)
title
stringa
Visualizza titolo del frammento di contenuto
model
ModelloFrammentoContenuto
Informazioni complete sul modello per frammenti di contenuto
variations
stringa[]
Array di nomi di varianti disponibili per questo frammento (ad esempio, ["master", "mobile", "tablet"])
status
stringa
Stato di pubblicazione del frammento (ad esempio “PUBBLICATO”, “MODIFICATO”, “BOZZA”, “NUOVO”, “NON PUBBLICATO”)
publishedBy
stringa
E-mail/nome utente dell’utente che ha pubblicato il frammento
publishedByFullName
stringa
Nome completo dell’utente che ha pubblicato il frammento
publishedDate
number
non definito
modifiedBy
stringa
E-mail/nome utente dell’ultimo utente che ha modificato il frammento
modifiedByFullName
stringa
Nome completo dell’ultimo utente che ha modificato il frammento
modifiedDate
numero
Marca temporale (in millisecondi) dell’ultima modifica apportata al frammento
createdBy
stringa
E-mail/nome utente dell’utente che ha creato il frammento
createdByFullName
stringa
Nome completo dell’utente che ha creato il frammento
createdDate
numero
Marca temporale (in millisecondi) quando è stato creato il frammento
selectedFields
Record<string, unknown>
No
Mappa di nome campo → valore campo per i campi scelti dall’utente nel passaggio di selezione dei campi. Le chiavi sono nomi di campo; i valori rispecchiano l’array ContentFragmentField["values"] sottostante, ovvero ogni valore è un array di primitive (string[], boolean[], number[], …) il cui tipo di elemento dipende dal tipo di modello del campo. Presente solo quando il selettore è stato aperto con selectFields={true} e l’utente ha scelto almeno un campo per questo frammento; altrimenti omesso.
selectedTemplateId
string | null
No
ID del modello HTML scelto per questo frammento nel selettore di modelli del pannello Dettagli rapidi (a monte @aem-sites/fragment-selector). null indica che il modello generico (predefinito) è stato selezionato in modo esplicito, ovvero una selezione reale che viene inoltrata. La chiave è omessa del tutto quando non è stato scelto nulla (ad esempio il selettore di modelli non è mai stato aperto per questo frammento o la funzione a monte di attivazione/disattivazione del selettore è disattivata).

Proprietà ContentFragmentModel contentfragmentmodel-properties

Proprietà
Tipo
Obbligatorio
Descrizione
name
stringa
Nome visualizzato del modello per frammenti di contenuto
id
stringa
Identificatore univoco del modello
path
stringa
No
Percorso completo della definizione del modello (ad esempio, /conf/my-project/settings/dam/cfm/models/article)
tagIds
stringa[]
No
Array di ID tag associati al modello

Esempio di utilizzo example-usage

Esempio di base basic-example

PureJSContentFragmentSelectors.renderContentFragmentSelectorWithAuthFlow(
    container,
    {
        orgId: "YOUR_ORG_ID@AdobeOrg",
        onSubmit: ({ contentFragments, domainName, repoId }) => {
            // contentFragments is of type ContentFragmentSelection
            contentFragments.forEach(fragment => {
                console.log('Fragment ID:', fragment.id);
                console.log('Fragment Path:', fragment.path);
                console.log('Fragment Title:', fragment.title);
                console.log('Model Name:', fragment.model?.name);
                console.log('Model Path:', fragment.model?.path);
                console.log('Variations:', fragment.variations);
                console.log('Status:', fragment.status);
                console.log('Published By:', fragment.publishedBy);
                console.log('Published By Full Name:', fragment.publishedByFullName);
                console.log('Published Date:', new Date(fragment.publishedDate));
                console.log('Modified By:', fragment.modifiedBy);
                console.log('Modified By Full Name:', fragment.modifiedByFullName);
                console.log('Modified Date:', new Date(fragment.modifiedDate));
                console.log('Created By:', fragment.createdBy);
                console.log('Created By Full Name:', fragment.createdByFullName);
                console.log('Created Date:', new Date(fragment.createdDate));
                // Only present when the selector was opened with `selectFields={true}`
                // and the user picked at least one field for this fragment.
                if (fragment.selectedFields) {
                    console.log('Selected Fields:', fragment.selectedFields);
                }
                // Only present when a template was chosen in the Quick Details panel;
                // `null` means the generic (default) template was picked.
                if (fragment.selectedTemplateId !== undefined) {
                    console.log('Selected Template Id:', fragment.selectedTemplateId);
                }
            });
        }
    }
);

Risposta di esempio completa complete-example-response

{
    contentFragments: [
        {
            id: "fragment-uuid-123",
            path: "/content/dam/my-project/article-fragment",
            title: "My Article Fragment",
            model: {
                name: "Article",
                id: "model-id-456",
                path: "/conf/my-project/settings/dam/cfm/models/article",
                tagIds: ["tag:product", "tag:news"]
            },
            variations: ["master", "mobile", "tablet"],
            status: "PUBLISHED",
            publishedBy: "user@adobetest.com",
            publishedByFullName: "John Doe",
            publishedDate: 1765728541321,
            modifiedBy: "editor@adobe.com",
            modifiedByFullName: "Jane Editor",
            modifiedDate: 1765728541320,
            createdBy: "abc12345@adobe.com",
            createdByFullName: "Peter Editor",
            createdDate: 1754035541525,
            // Returned per-fragment when the selector was opened with
            // `selectFields={true}` and the user picked fields for it.
            // Each value mirrors the underlying ContentFragmentField["values"]
            // array — usually a single-element array of the field's primitive
            // type. Multi-valued fields contain multiple entries.
            selectedFields: {
                title: ["My Article Fragment"],
                body: ["Lorem ipsum dolor sit amet…"],
                featured: [true]
            },
            // Returned per-fragment when a template was chosen in the Quick
            // Details panel. `null` means the generic (default) template;
            // omitted entirely when no template was chosen.
            selectedTemplateId: "template-abc-123"
        },
        {
            id: "fragment-uuid-789",
            path: "/content/dam/my-project/blog-post",
            title: "Sample Blog Post",
            model: {
                name: "Blog Post",
                id: "model-id-789",
                path: "/conf/my-project/settings/dam/cfm/models/blog-post",
                tagIds: ["tag:blog"]
            },
            variations: ["master"],
            status: "MODIFIED",
            publishedBy: "user@adobe.com",
            publishedByFullName: "John Doe",
            publishedDate: 1765728541321,
            modifiedBy: "admin@adobe.com",
            modifiedByFullName: "Admin User",
            modifiedDate: 1765728541322,
            createdBy: "admin@adobe.com",
            createdByFullName: "Admin User",
            createdDate: 1754035541525
        }
    ],
    domainName: "author-pXXXXX-eYYYYY.adobeaemcloud.com",
    repoId: "repository-id",
    tenantInfo: "tenant-info"
}

Integrazione TypeScript typescript-integration

Se si utilizza TypeScript, è possibile importare il tipo dal pacchetto:

import type {
    ContentFragmentSelection,
    ContentFragmentModel
} from '@aem-sites/content-fragment-selector';

// Use in your code
const handleSubmit = (data: {
    contentFragments: ContentFragmentSelection
}) => {
    // TypeScript will provide full type checking
    data.contentFragments.forEach(fragment => {
        const title: string = fragment.title;
        const modelName: string = fragment.model.name;
    });
};

Riferimento codice Source source-code-reference

La definizione completa del tipo si trova nel codice sorgente:

recommendation-more-help
experience-manager-cloud-service-help-main-toc