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
refContentFragmentSelector, che consente l’accesso alle funzionalità fornite, ad esempio reload.apiKeydigitalData.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.imsTokenrepoIdallowedRepositoryIdsdefaultRepoIdrepoId non è fornito. Se repoId è impostato, il selettore dell’archivio è nascosto e questo valore viene ignorato.orgIdlocaleenvEnv per i nomi di ambiente consentiti.filters{ folder: "/content/dam" }/content/dam verranno visualizzati.repoFiltersUsare 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.isOpenfalsenoWrapfalsetrue, il selettore di frammenti è incorporato direttamente nel contenitore principale. Utile per integrare il selettore in layout o flussi di lavoro personalizzati.onSelectionChangeContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => voidonDismissonSubmitContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => voidthemeselectionTypesinglemaxItemsselectionType è multiple. Se non specificato, è consentita la selezione illimitata. Non applicabile per la modalità di selezione singola.dialogSizefullscreenrunningInUnifiedShellselectedFragments[]hipaaEnabledfalseinventoryViewtableinventoryViewToggleEnabledfalseselectFieldsfalsetrue, 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.variationsFiltersConsente 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.
rememberStatefalsetrue, 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.amsRepositoriesorgId 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.
imsClientIdimsScoperedirectUrlredirectUrl non viene fornito, ImsAuthService utilizzerà il redirectUrl utilizzato per registrare imsClientIdmodalModetrue, 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.onImsServiceInitializedservice, che è un oggetto che rappresenta il servizio Adobe IMS. Per ulteriori dettagli, vedere ImsAuthService.onAccessTokenReceivedimsToken dal servizio di autenticazione Adobe IMS. Questa funzione accetta un parametro, imsToken, che è una stringa che rappresenta il token di accesso.onAccessTokenExpiredonErrorReceivedProprietà 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.
isSignedInUsergetImsTokenimsToken per l’utente attualmente connesso, che può essere utilizzata per autenticare le richieste ad altri servizi, ad esempio per generare la rappresentazione delle risorse.signInImsAuthProps per mostrare l’autenticazione in un popup o in un ricaricamento dell’intera pagina.signOutrefreshTokenTipo 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
idpath/content/dam/my-project/article-fragment)titlemodelvariations["master", "mobile", "tablet"])statuspublishedBypublishedByFullNamepublishedDatemodifiedBymodifiedByFullNamemodifiedDatecreatedBycreatedByFullNamecreatedDateselectedFieldsRecord<string, unknown>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.selectedTemplateIdstring | null@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
nameidpath/conf/my-project/settings/dam/cfm/models/article)tagIdsEsempio 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:
- Posizione:
packages/@aem-sites/content-fragment-selector/src/types/index.ts - Archivio: sites-content-fragment-selector