Inhaltsfragment-Selektor – Verwandte Eigenschaften content-fragment-selector-related-properties
Über den Micro-Frontend-Inhaltsfragment-Selektor können Sie Inhaltsfragmente im Repository durchsuchen bzw. suchen und in Ihrer Anwendung verwenden.
Mit den folgenden Eigenschaften können Sie anpassen, wie der Inhaltsfragment-Selektor gerendert wird und wie er verwendet werden kann.
Eigenschaften des Inhaltsfragment-Selektors content-fragment-selector-properties
refContentFragmentSelector-Instanz, die den Zugriff auf bereitgestellte Funktionen wie reload ermöglicht.apiKeydigitalData.page.attributes.apiKey. Wird nur für das Tracking verwendet - nicht für API-Aufrufe. Wird dies nicht angegeben, wird es von der imsToken (client_id) abgeleitet, die auf den Standardwert des Pakets zurückfällt.imsTokenrepoIdallowedRepositoryIdsdefaultRepoIdrepoId nicht angegeben wird. Wenn repoId festgelegt ist, wird der Repository-Selektor ausgeblendet und dieser Wert ignoriert.orgIdlocaleenvEnv für zulässige Umgebungsnamen.filters{ folder: "/content/dam" }/content/dam angezeigt.repoFiltersVerwenden Sie , wenn der Selektor mehrere Repositorys verfügbar macht, aber jedes unterschiedliche Filter benötigt (z. B. Status: Entwurf für eine Autoreninstanz, während andere Status: Veröffentlicht, Geändert verwenden).
Wenn das aktive Repository einen Eintrag hat, ersetzt es Filter für dieses Repository vollständig (die Standardwerte werden nicht in zusammengeführt). Daher muss jede Überschreibung den vollständigen benötigten Filtersatz deklarieren. Repositorys ohne Eintrag greifen auf Filter zurück. Wenn Sie also auf
repoFilters verzichten, bleibt das vorhandene Verhalten erhalten. Die Überschreibung wird automatisch erneut angewendet, wenn der Benutzer das Repository wechselt. Jeder Eintrag unterstützt dieselben schreibgeschützten Markierungen wie Filter.isOpenfalsenoWrapfalsetrue gesetzt, wird der Fragmentselektor direkt in den übergeordneten Container eingebettet. Nützlich für die Integration der -Auswahl in benutzerdefinierte Layouts oder Workflows.onSelectionChangeContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => voidonDismissonSubmitContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => voidthemeselectionTypesinglemaxItemsmultiple von selectionType ausgewählt werden können. Wenn nicht anders angegeben, ist eine unbegrenzte Auswahl zulässig. Nicht anwendbar für den Einzelauswahlmodus.dialogSizefullscreenrunningInUnifiedShellselectedFragments[]hipaaEnabledfalseinventoryViewtableinventoryViewToggleEnabledfalseselectFieldsfalsetrue wählt der Benutzer die Felder aus, die für jedes ausgewählte Fragment verfügbar gemacht werden sollen, und die ausgewählten Felder werden als selectedFields pro Fragment auf den onSelectionChange- und onSubmit-Payloads zurückgegeben. Wenn false (Standard) wird der Schritt übersprungen und selectedFields in jedem Fragment weggelassen.variationsFiltersPasst das Varianten-Dropdown-Menü an (nicht die Hauptliste - verwenden Sie dazu Filter). Heute wird nur der Status unterstützt, wobei „PUBLISHED“ der unterstützte Wert ist (z. B. { status: [„PUBLISHED“] }). Andere Schlüssel werden ignoriert. Lassen Sie die Eigenschaft aus, um alle Varianten anzuzeigen.
rememberStatefalsetrue, speichert der Selektor die aktiven Filter, gespeicherten Suchvorgänge und das zuletzt verwendete Repository in IndexedDB und stellt sie beim nächsten Laden automatisch wieder her. Opt-in - Bestehende Verbraucher benötigen keine Änderungen, wenn sie weggelassen werden.amsRepositoriesorgId für Benutzende mit mehreren Organisationen enthalten. Wenn sie weggelassen wird, wird die orgId-Eigenschaft der obersten Ebene verwendet, gefolgt von einer Adobe IMS-Suche. AMS-Repos verwenden immer die imsToken (kein Austausch von Cloud-Token). Abhängig von allowedRepositoryIds Filterung, wenn diese Eigenschaft ebenfalls bereitgestellt wird.ImsAuthProps-Eigenschaften imsauthprops-properties
Die ImsAuthProps-Eigenschaften definieren die Authentifizierungsinformationen und den Fluss, mit dem der Inhaltsfragment-Selektor ein imsToken abruft. Durch Festlegen dieser Eigenschaften können Sie steuern, wie sich der Authentifizierungsfluss verhält, und Listener für verschiedene Authentifizierungsereignisse registrieren.
imsClientIdimsScoperedirectUrlredirectUrl angegeben wird, verwendet ImsAuthService die zum Registrieren der imsClientId verwendete redirectUrl.modalModetrue festgelegt ist, wird der Authentifizierungsfluss in einem Popup-Fenster angezeigt. Wenn false festgelegt ist, wird der Authentifizierungsfluss bei vollständigem Neuladen der Seite angezeigt. Hinweis::_Für ein besseres Anwendererlebnis können Sie diesen Wert dynamisch steuern, wenn Popup-Fenster des Browsers deaktiviert sind.onImsServiceInitializedservice, ein Objekt, das den Adobe IMS-Dienst darstellt. Siehe ImsAuthService für weitere Informationen.onAccessTokenReceivedimsToken vom Adobe IMS-Authentifizierungsdienst empfangen wird. Diese Funktion akzeptiert einen Parameter namens imsToken, eine Zeichenfolge, die das Zugriffstoken darstellt.onAccessTokenExpiredonErrorReceivedEigenschaften von ImsAuthService imsauthservice-properties
Die Klasse ImsAuthService regelt den Authentifizierungsfluss für den Inhaltsfragment-Selektor. Sie ist für den Erhalt eines imsToken über den Adobe IMS-Authentifizierungsdienst verantwortlich. Das imsToken wird verwendet, um die Benutzerin oder den Benutzer zu authentifizieren und den Zugriff auf das Adobe Experience Manager (AEM) CS-Repository zu autorisieren. Der ImsAuthService verwendet die ImsAuthProps-Eigenschaften, um den Authentifizierungsfluss zu steuern und Listener für verschiedene Authentifizierungsereignisse zu registrieren. Sie können die praktische Funktion registerContentFragmentSelectorAuthService zum Registrieren der Instanz ImsAuthService beim Inhaltsfragment-Selektor verwenden. Die folgenden Funktionen sind in der Klasse ImsAuthService verfügbar. Wenn Sie jedoch die Funktion registerContentFragmentSelectorAuthService verwenden, müssen Sie diese Funktionen nicht direkt aufrufen.
isSignedInUsergetImsTokenimsToken für den aktuell angemeldeten Benutzer ab, der zum Authentifizieren von Anforderungen an andere Services verwendet werden kann, z. B. zum Generieren von Asset-Ausgabedarstellungen.signInImsAuthProps, um die Authentifizierung in einem Popup oder beim vollständigem Neuladen einer Seite anzuzeigen.signOutrefreshTokenTyp der Inhaltsfragmentauswahl contentfragmentselection-type
Der ContentFragmentSelection stellt die Struktur der Inhaltsfragmente dar, die vom Inhaltsfragmentselektor zurückgegeben werden, wenn ein Benutzer Fragmente auswählt.
Typdefinitionen type-definitions
ContentFragmentSelection 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;
}[];
ContentFragmentModel
type ContentFragmentModel = {
name: string;
id: string;
path?: string;
tagIds?: string[];
};
Eigenschaften properties
ContentFragmentSelection-Eigenschaften contentfragmentselection-properties
idpath/content/dam/my-project/article-fragment)titlemodelvariations["master", "mobile", "tablet"])statuspublishedBypublishedByFullNamepublishedDatemodifiedBymodifiedByFullNamemodifiedDatecreatedBycreatedByFullNamecreatedDateselectedFieldsRecord<string, unknown>ContentFragmentField["values"] wider d. h. jeder Wert ist ein Array von Primitiven (string[], boolean[], number[], …), deren Elementtyp vom Modelltyp des Felds abhängt. Nur vorhanden, wenn der Selektor mit selectFields={true} geöffnet wurde und der Benutzer mindestens ein Feld für dieses Fragment ausgewählt hat; andernfalls ausgelassen.selectedTemplateIdstring | null@aem-sites/fragment-selector). null bedeutet, dass die generische (Standard-)Vorlage explizit ausgewählt wurde - eine echte Auswahl, die weitergeleitet wird. Der Schlüssel wird vollständig ausgelassen wenn nichts ausgewählt wurde (z. B. wurde die Vorlagenauswahl für dieses Fragment nie geöffnet oder der Upstream-Umschalter zum Deaktivieren der Auswahl ist deaktiviert).ContentFragmentModel-Eigenschaften contentfragmentmodel-properties
nameidpath/conf/my-project/settings/dam/cfm/models/article)tagIdsAnwendungsbeispiel example-usage
Einfaches Beispiel 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);
}
});
}
}
);
Vollständige Beispielantwort 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"
}
TypeScript-Integration typescript-integration
Wenn Sie TypeScript verwenden, können Sie den Typ aus dem Paket importieren:
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;
});
};
Source-Code-Referenz source-code-reference
Die vollständige Typdefinition finden Sie im Quell-Code:
- Standort:
packages/@aem-sites/content-fragment-selector/src/types/index.ts - Repository: sites-content-fragment-selector