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

Propriété
Type
Requis
Valeur par défaut
Description
ref
FragmentSelectorRef
Non
Référence à l’instance ContentFragmentSelector, permettant l’accès aux fonctionnalités fournies telles que reload.
apiKey
chaîne
Non
Clé d’API signalée à Analytics sur digitalData.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.
imsToken
chaîne
Non
Jeton IMS utilisé pour l’authentification. S’il n’est pas fourni, le flux de connexion IMS est lancé.
repoId
chaîne
Non
ID de référentiel utilisé pour le sélecteur de fragments. Lorsqu’il est fourni, le sélecteur se connecte automatiquement au référentiel spécifié et la liste déroulante du référentiel est masquée. S’il n’est pas fourni, l’utilisateur peut sélectionner un référentiel dans la liste des référentiels auxquels il a accès.
allowedRepositoryIds
chaîne[]
Non
Liste des identifiants de référentiel pour filtrer les référentiels et les fragments de contenu dans le sélecteur de fragments de contenu. Lorsqu’ils sont fournis avec des identifiants de référentiel, seuls ces référentiels sont visibles dans le sélecteur de référentiel. Si ce paramètre n’est pas fourni ou si le tableau est vide, tous les référentiels auxquels l’utilisateur a accès sont disponibles.
defaultRepoId
chaîne
Non
Identifiant du référentiel qui sera sélectionné par défaut lorsque le sélecteur de référentiel s’affiche. Utilisé uniquement lorsque repoId n’est pas fourni. Si repoId est défini, le sélecteur de référentiel est masqué et cette valeur est ignorée.
orgId
chaîne
Non
Identifiant de l’organisation utilisé pour l’authentification. S’il n’est pas fourni, l’utilisateur peut sélectionner un référentiel parmi les différentes organisations auxquelles il a accès. Si l’utilisateur ou l’utilisatrice n’a accès à aucun référentiel ou organisation, le contenu n’est pas chargé.
locale
chaîne
Non
« en-US »
Paramètre régional.
env
chaîne
Non
Environnement de déploiement. Voir le type de Env pour les noms d’environnement autorisés.
filters
FragmentFilter
Non
{ folder: "/content/dam" }
Filtres à appliquer sur la liste des fragments de contenu. Par défaut, les fragments situés sous /content/dam s’affichent.
repoFilters
Enregistrement<chaîne, FragmentFilterWithReadonlySupport>
Non
Remplacements de filtres par référentiel indexés par l’ID de référentiel.
À 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.
isOpen
booléen
Non
false
Indicateur utilisé pour spécifier si le sélecteur est ouvert ou fermé.
noWrap
booléen
Non
false
Détermine si le sélecteur de fragments est rendu sans boîte de dialogue d’encapsulation. Lorsqu’il est défini sur true, 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.
onSelectionChange
({ contentFragments : ContentFragmentSelection, domainName ? : string, tenantInfo ? : string, repoId ? : string, deliveryRepos ? : DeliveryRepository[] }) => void
Non
Fonction de rappel déclenchée à chaque modification de la sélection de fragments de contenu. Fournit les fragments actuellement sélectionnés, le nom de domaine, les informations du client, l’identifiant de référentiel et les référentiels de diffusion.
onDismiss
() => void
Non
Fonction de rappel déclenchée lorsque l’action d’ignorance est effectuée (par exemple, fermeture du sélecteur).
onSubmit
({ contentFragments : ContentFragmentSelection, domainName ? : string, tenantInfo ? : string, repoId ? : string, deliveryRepos ? : DeliveryRepository[] }) => void
Non
Fonction de rappel déclenchée lorsque l’utilisateur confirme sa sélection. Reçoit les fragments de contenu sélectionnés, le nom de domaine, les informations du client, l’identifiant de référentiel et les référentiels de diffusion.
theme
« clair » ou « sombre »
Non
Thème du sélecteur de fragments. Par défaut, il est défini sur le thème de l’environnement unifiedShell.
selectionType
« single » ou « multiple »
Non
single
Le type de sélection peut être utilisé pour restreindre la sélection du sélecteur de fragments.
maxItems
nombre
Non
Nombre maximal d’éléments pouvant être sélectionnés lorsque selectionType 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.
dialogSize
« fullscreen » ou « fullscreenTakeover »
Non
fullscreen
Prop facultative pour contrôler la taille de la boîte de dialogue.
runningInUnifiedShell
booléen
Non
Si DestinationSelector s’exécute sous UnifiedShell ou en mode autonome.
selectedFragments
ContentFragmentIdentifier[]
Non
[]
Sélection initiale des fragments de contenu à présélectionner à l’ouverture du sélecteur.
hipaaEnabled
booléen
Non
false
Indique si la conformité HIPAA est activée.
inventoryView
InventoryViewType
Non
table
Type de vue par défaut du stock à utiliser dans le sélecteur.
inventoryViewToggleEnabled
booléen
Non
false
Indique si le bouton (bascule) de la vue d’inventaire est activé, ce qui permet à l’utilisateur de basculer entre les vues tableau et grille.
selectFields
booléen
Non
false
Indique si l’étape de sélection du champ est activée. Une fois true, 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.
variationsFilters
object
Non
Facultatif.
Ajuste 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.
rememberState
booléen
Non
false
Une fois true, 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.
amsRepositories
Tableau<{ label: string; valeur: string; orgId?: string }>
Non
Liste facultative des référentiels AMS à inclure dans le sélecteur de référentiel. Ils sont concaténés avec des référentiels cloud à partir du service de découverte. Chaque entrée peut inclure un orgId 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.

Nom de la propriété
Description
imsClientId
Valeur de chaîne représentant l’identifiant client IMS utilisé à des fins d’authentification. Cette valeur est fournie par Adobe et est spécifique à votre organisation Adobe AEM CS.
imsScope
Décrit les portées utilisées dans l’authentification. Les portées déterminent le niveau d’accès de l’application aux ressources de votre organisation. Plusieurs portées peuvent être séparées par des virgules.
redirectUrl
Représente l’URL de redirection de l’utilisateur après l’authentification. Cette valeur est généralement définie sur l’URL actuelle de l’application. Si un redirectUrl n’est pas fourni, ImsAuthService utilisera l’URL de redirection utilisée pour enregistrer le imsClientId
modalMode
Valeur booléenne indiquant si le flux d’authentification doit être affiché dans une fenêtre modale (pop-up) ou non. S’il est défini sur true, 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é.
onImsServiceInitialized
Une fonction de rappel appelée lors de l’initialisation du service d’authentification Adobe IMS. Cette fonction accepte un paramètre, service, qui est un objet représentant le service Adobe IMS. Voir ImsAuthService pour plus d’informations.
onAccessTokenReceived
Une fonction de rappel appelée lorsqu’un imsToken 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.
onAccessTokenExpired
Fonction de rappel appelée lorsqu’un jeton d’accès a expiré. Cette fonction est généralement utilisée pour déclencher un nouveau flux d’authentification afin d’obtenir un nouveau jeton d’accès.
onErrorReceived
Une fonction de rappel appelée lorsqu’une erreur se produit lors de l’authentification. Cette fonction utilise deux paramètres : le type d’erreur et le message d’erreur. Le type d’erreur est une chaîne représentant le type d’erreur et le message d’erreur est une chaîne représentant le message d’erreur.

Proprié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.

Nom de la fonction
Description
isSignedInUser
Détermine si l’utilisateur est actuellement connecté au service et renvoie une valeur booléenne en conséquence.
getImsToken
Récupère les imsToken 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.
signIn
Lance le processus de connexion de l’utilisateur. Cette fonction utilise le ImsAuthProps pour afficher l’authentification dans un pop-up ou un rechargement complet de la page.
signOut
Déconnecte l’utilisateur du service, invalide son jeton d’authentification et exige qu’il se reconnecte pour accéder aux ressources protégées. Appeler cette fonction recharge la page active.
refreshToken
Actualise le jeton d’authentification de l’utilisateur actuellement connecté, ce qui empêche son expiration et garantit un accès ininterrompu aux ressources protégées. Renvoie un nouveau jeton d’authentification pouvant être utilisé pour les requêtes suivantes.

Type 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

Propriété
Type
Requis
Description
id
chaîne
Oui
Identifiant unique du fragment de contenu
path
chaîne
Oui
Chemin d’accès complet au fragment dans la gestion des ressources numériques (par exemple, /content/dam/my-project/article-fragment)
title
chaîne
Oui
Afficher le titre du fragment de contenu
model
ModèleFragmentContenu
Oui
Informations complètes sur le modèle de fragment de contenu
variations
chaîne[]
Oui
Tableau des noms de variation disponibles pour ce fragment (par exemple, ["master", "mobile", "tablet"])
status
chaîne
Oui
Statut de publication du fragment (par exemple, « PUBLIÉ », « MODIFIÉ », « BROUILLON », « NOUVEAU », « DÉPUBLIÉ »)
publishedBy
chaîne
Oui
Adresse électronique/nom d’utilisateur de l’utilisateur qui a publié le fragment
publishedByFullName
chaîne
Oui
Nom complet de l’utilisateur qui a publié le fragment
publishedDate
nombre
non défini
Oui
modifiedBy
chaîne
Oui
Adresse e-mail/nom d’utilisateur de la dernière modification du fragment
modifiedByFullName
chaîne
Oui
Nom complet de la dernière personne ayant modifié le fragment
modifiedDate
nombre
Oui
Date et heure (en millisecondes) de la dernière modification du fragment
createdBy
chaîne
Oui
Adresse électronique/nom d’utilisateur de l’utilisateur qui a créé le fragment
createdByFullName
chaîne
Oui
Nom complet de l’utilisateur qui a créé le fragment
createdDate
nombre
Oui
Date et heure (en millisecondes) de la création du fragment
selectedFields
Record<string, unknown>
Non
Mappage de nom-champ → valeur-champ pour les champs sélectionnés par l’utilisateur à l’étape de sélection de champ. Les clés sont des noms de champ ; les valeurs reflètent le tableau de 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.
selectedTemplateId
string | null
Non
Identifiant du modèle HTML choisi pour ce fragment dans le sélecteur de modèles du panneau Détails rapides (@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

Propriété
Type
Requis
Description
name
chaîne
Oui
Nom d’affichage du modèle de fragment de contenu
id
chaîne
Oui
Identifiant unique du modèle
path
chaîne
Non
Chemin d’accès complet à la définition du modèle (par exemple, /conf/my-project/settings/dam/cfm/models/article)
tagIds
chaîne[]
Non
Tableau d’ID de balises associés au modèle

Exemple 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 :

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