Selector de fragmentos de contenido: propiedades relacionadas content-fragment-selector-related-properties
El Selector de fragmentos de contenido de Micro-FrontEnd le permite examinar o buscar fragmentos de contenido en el repositorio y utilizarlos en la aplicación.
Puede utilizar las siguientes propiedades para personalizar cómo se procesa el Selector de fragmentos de contenido y cómo se puede utilizar.
Propiedades del selector de fragmentos de contenido content-fragment-selector-properties
refContentFragmentSelector, que permite el acceso a la funcionalidad proporcionada como reload.apiKeydigitalData.page.attributes.apiKey. Solo se utiliza para el seguimiento, no para las llamadas a la API de datos. Si no se proporciona, se deriva de la notificación imsToken (client_id), y vuelve al paquete predeterminado.imsTokenrepoIdallowedRepositoryIdsdefaultRepoIdrepoId. Si se establece repoId, el selector del repositorio estará oculto y se omitirá este valor.orgIdlocaleenvEnv para ver los nombres de entorno permitidos.filters{ folder: "/content/dam" }/content/dam.repoFiltersSe utiliza cuando el selector expone varios repositorios, pero cada uno necesita filtros diferentes (por ejemplo, Estado: Borrador para una instancia de autor, mientras que otros utilizan Estado: Publicado, Modificado).
Cuando el repositorio activo tiene una entrada, reemplaza completamente los filtros para ese repositorio (los valores predeterminados no se combinan), de modo que cada invalidación debe declarar el conjunto de filtros completo que necesita. Los repositorios sin una entrada vuelven a los filtros, por lo que al omitir
repoFilters se conserva el comportamiento existente. La anulación se vuelve a aplicar automáticamente cuando el usuario cambia de repositorio. Cada entrada admite los mismos marcadores de solo lectura que los filtros.isOpenfalsenoWrapfalsetrue, el selector de fragmentos está incrustado directamente en el contenedor principal. Útil para integrar el selector en diseños o flujos de trabajo personalizados.onSelectionChangeContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => voidonDismissonSubmitContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => voidthemeselectionTypesinglemaxItemsselectionType es multiple. Cuando no se especifica, se permite la selección ilimitada. No aplicable al modo de selección única.dialogSizefullscreenrunningInUnifiedShellselectedFragments[]hipaaEnabledfalseinventoryViewtableinventoryViewToggleEnabledfalseselectFieldsfalsetrue, el usuario elige qué campos exponer para cada fragmento seleccionado, y los campos elegidos se devuelven como un mapa de selectedFields por fragmento en las cargas onSelectionChange y onSubmit. Al false (predeterminado), el paso se omite y selectedFields se omite en cada fragmento.variationsFiltersAjusta la lista desplegable de variaciones (no la lista principal; utilice filtros para ello). Hoy solo se admite el estado, con “PUBLISHED” como valor admitido (p. ej. { status: [“PUBLISHED”] }). Otras claves se ignoran. Omita la prop para mostrar todas las variaciones.
rememberStatefalsetrue, el selector conserva los filtros activos, las búsquedas guardadas y el repositorio utilizado por última vez en IndexedDB, y los restaura automáticamente en la siguiente carga. Inclusión: los consumidores existentes no requieren cambios cuando se omiten.amsRepositoriesorgId opcional para usuarios de varias organizaciones. Cuando se omite, se utiliza la propiedad orgId de nivel superior y, a continuación, una búsqueda de Adobe IMS. Los repositorios de AMS siempre usan el imsToken sin procesar (sin intercambio de token de nube). Sujeto al filtrado allowedRepositoryIds cuando esa prop también se proporciona.Propiedades De ImsAuthProps imsauthprops-properties
Las propiedades de ImsAuthProps definen la información de autenticación y el flujo que utiliza el Selector de fragmentos de contenido para obtener un imsToken. Al establecer estas propiedades, puede controlar cómo debe comportarse el flujo de autenticación y registrar los agentes de escucha para varios eventos de autenticación.
imsClientIdimsScoperedirectUrlredirectUrl, ImsAuthService usará la redirectUrl utilizada para registrar imsClientIdmodalModetrue, el flujo de autenticación se mostrará en una ventana emergente. Si se establece en false, el flujo de autenticación se mostrará en una recarga de página completa. _Note :_para un mejor UX, puede controlar dinámicamente este valor si el usuario tiene deshabilitada la ventana emergente del navegador.onImsServiceInitializedservice, que es un objeto que representa el servicio IMS de Adobe. Consulte ImsAuthService para obtener más detalles.onAccessTokenReceivedimsToken del servicio de autenticación IMS de Adobe. Esta función toma un parámetro, imsToken, que es una cadena que representa el token de acceso.onAccessTokenExpiredonErrorReceivedPropiedades De ImsAuthService imsauthservice-properties
La clase ImsAuthService administra el flujo de autenticación para el Selector de fragmentos de contenido. Es responsable de obtener un imsToken del servicio de autenticación IMS de Adobe. imsToken se usa para autenticar al usuario y autorizar el acceso al repositorio de Adobe Experience Manager (AEM) CS. ImsAuthService usa las propiedades ImsAuthProps para controlar el flujo de autenticación y registrar agentes de escucha para varios eventos de autenticación. Puede utilizar la práctica función registerContentFragmentSelectorAuthService para registrar la instancia ImsAuthService con el Selector de fragmentos de contenido. Las funciones siguientes están disponibles en la clase ImsAuthService. Sin embargo, si está utilizando la función registerContentFragmentSelectorAuthService, no necesita llamar a estas funciones directamente.
isSignedInUsergetImsTokenimsToken del usuario que ha iniciado sesión actualmente, que se puede utilizar para autenticar solicitudes en otros servicios, como la generación de la representación de recursos.signInImsAuthProps para mostrar la autenticación en una ventana emergente o en una recarga de página completa.signOutrefreshTokenTipo ContentFragmentSelection contentfragmentselection-type
El tipo ContentFragmentSelection representa la estructura de los fragmentos de contenido devueltos por el Selector de fragmentos de contenido cuando un usuario selecciona fragmentos.
Definiciones de tipo 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;
}[];
ModeloFragmentoContenido
type ContentFragmentModel = {
name: string;
id: string;
path?: string;
tagIds?: string[];
};
Propiedades properties
Propiedades de ContentFragmentSelection contentfragmentselection-properties
idpath/content/dam/my-project/article-fragment)titlemodelvariations["master", "mobile", "tablet"])statuspublishedBypublishedByFullNamepublishedDatemodifiedBymodifiedByFullNamemodifiedDatecreatedBycreatedByFullNamecreatedDateselectedFieldsRecord<string, unknown>ContentFragmentField["values"] subyacente; es decir, cada valor es una matriz de primitivas (string[], boolean[], number[], …) cuyo tipo de elemento depende del tipo de modelo del campo. Presente solamente cuando el selector se abrió con selectFields={true} y, el usuario seleccionó al menos un campo para este fragmento; se omite en caso contrario.selectedTemplateIdstring | null@aem-sites/fragment-selector). null significa que la plantilla genérica (predeterminada) se seleccionó explícitamente: una selección real que se reenvía. La clave es se omite por completo cuando no se eligió nada (por ejemplo, cuando el selector de plantillas nunca se abrió para este fragmento o cuando la función de desplazamiento ascendente está desactivada).Propiedades de ContentFragmentModel contentfragmentmodel-properties
nameidpath/conf/my-project/settings/dam/cfm/models/article)tagIdsUso de ejemplo example-usage
Ejemplo básico 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);
}
});
}
}
);
Respuesta de ejemplo 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"
}
Integración de TypeScript typescript-integration
Si utiliza TypeScript, puede importar el tipo desde el paquete:
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;
});
};
Referencia de código Source source-code-reference
La definición de tipo completa se encuentra en el código fuente:
- Ubicación:
packages/@aem-sites/content-fragment-selector/src/types/index.ts - Repositorio: sites-content-fragment-selector