Sélecteur de fragment de contenu - Propriétés connexes content-fragment-selector-related-properties
Le sélecteur de fragment de contenu micro front-end vous permet de parcourir ou de rechercher des fragments de contenu dans le référentiel et de les utiliser dans votre application.
Vous pouvez utiliser les propriétés suivantes pour personnaliser le rendu du sélecteur de fragment de contenu et son utilisation.
Propriétés du sélecteur de fragment de contenu content-fragment-selector-properties
refContentFragmentSelector, permettant l’accès aux fonctionnalités fournies telles que reload.apiKeydigitalData.page.attributes.apiKey. Utilisé uniquement pour le suivi, et non pour les appels API de données. Si elle n’est pas fournie, elle est dérivée de la imsToken (revendication client_id), en revenant à la valeur par défaut du package.imsTokenrepoIdallowedRepositoryIdsdefaultRepoIdrepoId n’est pas fourni. Si repoId est défini, le sélecteur de référentiel est masqué et cette valeur est ignorée.orgIdlocaleenvEnv pour les noms d’environnement autorisés.filters{ folder: "/content/dam" }/content/dam s’affichent.repoFiltersÀ utiliser lorsque le sélecteur expose plusieurs référentiels, mais que chacun a besoin de filtres différents (par exemple, Statut : Brouillon pour une instance de création, tandis que d’autres utilisent Statut : Publié, Modifié).
Lorsque le référentiel actif comporte une entrée, il remplace entièrement les filtres de ce référentiel (les valeurs par défaut ne sont pas fusionnées). Chaque remplacement doit donc déclarer le jeu de filtres complet dont il a besoin. Les référentiels sans entrée reviennent aux filtres. Par conséquent, l’omission de
repoFilters préserve le comportement existant. Le remplacement est réappliqué automatiquement lorsque l’utilisateur change de référentiel. Chaque entrée prend en charge les mêmes marqueurs en lecture seule que les filtres.isOpenfalsenoWrapfalsetrue, le sélecteur de fragments est directement incorporé au conteneur parent. Utile pour intégrer le sélecteur dans des mises en page ou des workflows personnalisés.onSelectionChangeContentFragmentSelection, domainName ? : string, tenantInfo ? : string, repoId ? : string, deliveryRepos ? : DeliveryRepository[] }) => voidonDismissonSubmitContentFragmentSelection, domainName ? : string, tenantInfo ? : string, repoId ? : string, deliveryRepos ? : DeliveryRepository[] }) => voidthemeselectionTypesinglemaxItemsselectionType est multiple. Lorsqu’elle n’est pas spécifiée, une sélection illimitée est autorisée. Non applicable pour le mode de sélection unique.dialogSizefullscreenrunningInUnifiedShellselectedFragments[]hipaaEnabledfalseinventoryViewtableinventoryViewToggleEnabledfalseselectFieldsfalsetrue, l’utilisateur sélectionne les champs à exposer pour chaque fragment sélectionné, et les champs sélectionnés sont renvoyés sous la forme d’un mappage de selectedFields par fragment sur les payloads onSelectionChange et onSubmit. Lorsqu’elle est false (par défaut), l’étape est ignorée et la selectedFields est omise de chaque fragment.variationsFiltersAjuste la liste déroulante des variations (et non la liste principale ; utilisez des filtres pour cela). Seul le statut est pris en charge aujourd’hui, avec la valeur « PUBLISHED » comme valeur prise en charge (par exemple, { status: [« PUBLISHED »] }). Les autres clés sont ignorées. Omettez la prop pour afficher toutes les variations.
rememberStatefalsetrue, le sélecteur conserve dans IndexedDB les filtres actifs, les recherches enregistrées et le référentiel utilisé en dernier et les restaure automatiquement lors du chargement suivant. Opt-in : les clients existants n’ont pas besoin de modifications lorsqu’ils sont omis.amsRepositoriesorgId facultatif pour les utilisateurs de plusieurs organisations. Si cet attribut est omis, la prop orgId de niveau supérieur est utilisée, puis une recherche Adobe IMS est effectuée. Les référentiels AMS utilisent toujours le imsToken brut (pas d’échange de jetons cloud). Fait l’objet d’un filtrage allowedRepositoryIds lorsque cette prop est également fournie.Propriétés ImsAuthProps imsauthprops-properties
Les propriétés ImsAuthProps définissent les informations d’authentification et le flux que le sélecteur de fragment de contenu utilise pour obtenir une imsToken. En définissant ces propriétés, vous pouvez contrôler le comportement du flux d’authentification et enregistrer des écouteurs pour divers événements d’authentification.
imsClientIdimsScoperedirectUrlredirectUrl n’est pas fourni, ImsAuthService utilisera l’URL de redirection utilisée pour enregistrer le imsClientIdmodalModetrue, le flux d’authentification s’affiche dans un pop-up. S’il est défini sur false, le flux d’authentification s’affiche lors d’un rechargement complet de la page. _Remarque :_pour une meilleure expérience utilisateur, vous pouvez contrôler dynamiquement cette valeur si le pop-up du navigateur est désactivé.onImsServiceInitializedservice, qui est un objet représentant le service Adobe IMS. Voir ImsAuthService pour plus d’informations.onAccessTokenReceivedimsToken est reçu du service d’authentification Adobe IMS. Cette fonction accepte un paramètre, imsToken, qui est une chaîne représentant le jeton d’accès.onAccessTokenExpiredonErrorReceivedPropriétés ImsAuthService imsauthservice-properties
La classe ImsAuthService gère le flux d’authentification pour le sélecteur de fragment de contenu. Il est chargé d’obtenir un imsToken du service d’authentification Adobe IMS. Le imsToken permet d’authentifier l’utilisateur et d’autoriser l’accès au référentiel CS de Adobe Experience Manager (AEM). ImsAuthService utilise les propriétés ImsAuthProps pour contrôler le flux d’authentification et enregistrer des écouteurs pour divers événements d’authentification. Vous pouvez utiliser la fonction registerContentFragmentSelectorAuthService pratique pour enregistrer l’instance ImsAuthService avec le sélecteur de fragment de contenu. Les fonctions suivantes sont disponibles dans la classe ImsAuthService. Cependant, si vous utilisez la fonction registerContentFragmentSelectorAuthService, vous n’avez pas besoin d’appeler directement ces fonctions.
isSignedInUsergetImsTokenimsToken d’authentification de l’utilisateur actuellement connecté, qui peuvent être utilisées pour authentifier les requêtes adressées à d’autres services, tels que la génération du rendu de ressource.signInImsAuthProps pour afficher l’authentification dans un pop-up ou un rechargement complet de la page.signOutrefreshTokenType de sélection de fragment de contenu contentfragmentselection-type
Le type de ContentFragmentSelection représente la structure des fragments de contenu renvoyés par le sélecteur de fragments de contenu lorsqu’un utilisateur sélectionne des fragments.
Définitions de type 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;
}[];
ModèleFragmentContenu
type ContentFragmentModel = {
name: string;
id: string;
path?: string;
tagIds?: string[];
};
Propriétés properties
Propriétés de ContentFragmentSelection contentfragmentselection-properties
idpath/content/dam/my-project/article-fragment)titlemodelvariations["master", "mobile", "tablet"])statuspublishedBypublishedByFullNamepublishedDatemodifiedBymodifiedByFullNamemodifiedDatecreatedBycreatedByFullNamecreatedDateselectedFieldsRecord<string, unknown>ContentFragmentField["values"] sous-jacent, c’est-à-dire que chaque valeur est un tableau de primitives (string[], boolean[], number[], etc.) dont le type d’élément dépend du type de modèle du champ. Présent uniquement lorsque le sélecteur a été ouvert avec selectFields={true} et l’utilisateur a sélectionné au moins un champ pour ce fragment ; omis dans le cas contraire.selectedTemplateIdstring | null@aem-sites/fragment-selector en amont). null signifie que le modèle générique (par défaut) a été explicitement sélectionné — une sélection réelle qui est transférée. La clé est entièrement omise lorsque rien n’a été choisi (par exemple, le sélecteur de modèle n’a jamais été ouvert pour ce fragment ou le bouton (bascule) de la fonctionnalité en amont qui active le sélecteur est désactivé).Propriétés du modèle de fragment de contenu contentfragmentmodel-properties
nameidpath/conf/my-project/settings/dam/cfm/models/article)tagIdsExemple d’utilisation example-usage
Exemple de 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);
}
});
}
}
);
Exemple de réponse complet 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"
}
Intégration de TypeScript typescript-integration
Si vous utilisez TypeScript, vous pouvez importer le type à partir du package :
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;
});
};
Référence du code Source source-code-reference
La définition de type complète se trouve dans le code source :
- Emplacement :
packages/@aem-sites/content-fragment-selector/src/types/index.ts - Référentiel : sites-content-fragment-selector