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

Propiedad
Tipo
Requerido
Predeterminado
Descripción
ref
FragmentSelectorRef
No
Referencia a la instancia ContentFragmentSelector, que permite el acceso a la funcionalidad proporcionada como reload.
apiKey
cadena
No
Clave de API notificada a Analytics el digitalData.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.
imsToken
cadena
No
Token de IMS utilizado para la autenticación. Si no se proporciona, se iniciará el flujo de inicio de sesión de IMS.
repoId
cadena
No
ID del repositorio utilizado para el selector de fragmentos. Cuando se proporciona, el selector se conecta automáticamente al repositorio especificado y la lista desplegable de repositorios está oculta. Si no se proporciona, el usuario puede seleccionar un repositorio de la lista de repositorios disponibles a los que tiene acceso.
allowedRepositoryIds
cadena[]
No
Lista de ID de repositorio para filtrar repositorios y fragmentos de contenido en el Selector de fragmentos de contenido. Cuando se proporcionan ID de repositorio, solo estos repositorios serán visibles en el selector de repositorios. Si no se proporciona o la matriz está vacía, todos los repositorios a los que el usuario tiene acceso estarán disponibles.
defaultRepoId
cadena
No
ID del repositorio que se seleccionará de forma predeterminada cuando se muestre el selector de repositorios. Solo se usa cuando no se proporciona repoId. Si se establece repoId, el selector del repositorio estará oculto y se omitirá este valor.
orgId
cadena
No
ID de organización utilizado para la autenticación. Si no se proporciona, el usuario puede seleccionar un repositorio de diferentes organizaciones a las que tiene acceso. Si el usuario no tiene acceso a ningún repositorio u organización, el contenido no se carga.
locale
cadena
No
“en-US”
Configuración regional.
env
cadena
No
Entorno de implementación. Consulte el tipo Env para ver los nombres de entorno permitidos.
filters
FragmentFilter
No
{ folder: "/content/dam" }
Filtros que se aplicarán a la lista de fragmentos de contenido. De forma predeterminada, se mostrarán los fragmentos de /content/dam.
repoFilters
Registro<string, FragmentFilterWithReadonlySupport>
No
El filtro por repositorio anula las claves introducidas por el ID del repositorio.
Se 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.
isOpen
booleano
No
false
Indicador que controla si el selector está abierto o cerrado.
noWrap
booleano
No
false
Determina si el Selector de fragmentos se procesa sin un cuadro de diálogo de ajuste. Cuando se establece en true, el selector de fragmentos está incrustado directamente en el contenedor principal. Útil para integrar el selector en diseños o flujos de trabajo personalizados.
onSelectionChange
({ contentFragments: ContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => void
No
Función de llamada de retorno activada cada vez que cambia la selección de fragmentos de contenido. Proporciona los fragmentos, el nombre de dominio, la información de inquilino, el ID de repositorio y los repositorios de envío seleccionados actualmente.
onDismiss
() => void
No
Función de llamada de retorno activada cuando se realiza la acción de descartar (por ejemplo, cerrar el selector).
onSubmit
({ contentFragments: ContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => void
No
Función de llamada de retorno activada cuando el usuario confirma su selección. Recibe los fragmentos de contenido, el nombre de dominio, la información del inquilino, el ID de repositorio y los repositorios de envío seleccionados.
theme
“claro” u “oscuro”
No
Tema para el selector de fragmentos. De forma predeterminada, se establece en el tema de entorno unifiedShell.
selectionType
“single” o “multiple”
No
single
El tipo de selección se puede utilizar para restringir la selección del Selector de fragmentos.
maxItems
número
No
Número máximo de elementos que se pueden seleccionar cuando selectionType es multiple. Cuando no se especifica, se permite la selección ilimitada. No aplicable al modo de selección única.
dialogSize
“fullscreen” o “fullscreenTakeover”
No
fullscreen
Prop opcional para controlar el tamaño del cuadro de diálogo.
runningInUnifiedShell
booleano
No
Indica si DestinationSelector se está ejecutando en UnifiedShell o de forma independiente.
selectedFragments
ContentFragmentIdentifier[]
No
[]
Selección inicial de fragmentos de contenido que se preseleccionarán cuando se abra el selector.
hipaaEnabled
booleano
No
false
Indica si el cumplimiento de HIPAA está habilitado.
inventoryView
InventoryViewType
No
table
Tipo de vista predeterminada de inventario que se utilizará en el selector.
inventoryViewToggleEnabled
booleano
No
false
Indica si la opción de vista de inventario está habilitada, lo que permite al usuario cambiar entre las vistas de tabla y de cuadrícula.
selectFields
booleano
No
false
Indica si el paso de selección de campos está habilitado. Cuando true, 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.
variationsFilters
objeto
No
Opcional.
Ajusta 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.
rememberState
booleano
No
false
Cuando true, 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.
amsRepositories
Matriz<{ label: string; value: string; orgId?: string }>
No
Lista opcional de repositorios de AMS para incluir en el selector de repositorios. Están concatenados con repositorios en la nube desde el servicio de detección. Cada entrada puede incluir un(a) orgId 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.

Nombre de la propiedad
Descripción
imsClientId
Valor de cadena que representa el ID de cliente de IMS utilizado con fines de autenticación. Este valor lo proporciona Adobe y es específico de su organización de Adobe AEM CS.
imsScope
Describe los ámbitos utilizados en la autenticación. Los ámbitos determinan el nivel de acceso que la aplicación tiene a los recursos de su organización. Los ámbitos múltiples se pueden separar con comas.
redirectUrl
Representa la dirección URL a la que se redirige al usuario después de la autenticación. Este valor se suele establecer en la dirección URL actual de la aplicación. Si no se proporciona redirectUrl, ImsAuthService usará la redirectUrl utilizada para registrar imsClientId
modalMode
Un booleano que indica si el flujo de autenticación debe mostrarse en un modal (emergente) o no. Si se establece en true, 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.
onImsServiceInitialized
Una función de llamada de retorno que se llama cuando se inicializa el servicio de autenticación IMS de Adobe. Esta función toma un parámetro, service, que es un objeto que representa el servicio IMS de Adobe. Consulte ImsAuthService para obtener más detalles.
onAccessTokenReceived
Una función de llamada de retorno que se llama cuando se recibe un imsToken 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.
onAccessTokenExpired
Función de llamada de retorno a la que se llama cuando ha caducado un token de acceso. Esta función se utiliza generalmente para almacenar en déclencheur un nuevo flujo de autenticación para obtener un nuevo token de acceso.
onErrorReceived
Función de llamada de retorno a la que se llama cuando se produce un error durante la autenticación. Esta función toma dos parámetros: el tipo de error y el mensaje de error. El tipo de error es una cadena que representa el tipo de error y el mensaje de error es una cadena que representa el mensaje de error.

Propiedades 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.

Nombre de función
Descripción
isSignedInUser
Determina si el usuario ha iniciado sesión en el servicio y devuelve un valor booleano en consecuencia.
getImsToken
Recupera la autenticación imsToken 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.
signIn
Inicia el proceso de inicio de sesión del usuario. Esta función utiliza ImsAuthProps para mostrar la autenticación en una ventana emergente o en una recarga de página completa.
signOut
Cierra la sesión del usuario del servicio, invalidando su token de autenticación y obligándole a iniciar sesión de nuevo para acceder a los recursos protegidos. Al invocar esta función, se volverá a cargar la página actual.
refreshToken
Actualiza el token de autenticación del usuario que ha iniciado sesión, lo que evita que caduque y garantiza un acceso ininterrumpido a los recursos protegidos. Devuelve un nuevo token de autenticación que puede utilizarse para solicitudes posteriores.

Tipo 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

Propiedad
Tipo
Requerido
Descripción
id
cadena
Identificador único del fragmento de contenido
path
cadena
Ruta de acceso completa al fragmento en DAM (por ejemplo, /content/dam/my-project/article-fragment)
title
cadena
Mostrar título del fragmento de contenido
model
ModeloFragmentoContenido
Información completa del modelo de fragmento de contenido
variations
cadena[]
Matriz de nombres de variación disponibles para este fragmento (por ejemplo, ["master", "mobile", "tablet"])
status
cadena
Estado de publicación del fragmento (por ejemplo, “PUBLICADO”, “MODIFICADO”, “BORRADOR”, “NUEVO”, “NO PUBLICADO”)
publishedBy
cadena
Correo electrónico/nombre de usuario del usuario que publicó el fragmento
publishedByFullName
cadena
Nombre completo del usuario que publicó el fragmento
publishedDate
número
sin definir
modifiedBy
cadena
Correo electrónico/nombre de usuario del usuario que modificó el fragmento por última vez
modifiedByFullName
cadena
Nombre completo del usuario que modificó el fragmento por última vez
modifiedDate
número
Marca de tiempo (en milisegundos) de la última modificación del fragmento
createdBy
cadena
Correo electrónico/nombre de usuario del usuario que creó el fragmento
createdByFullName
cadena
Nombre completo del usuario que creó el fragmento
createdDate
número
Marca de tiempo (en milisegundos) cuando se creó el fragmento
selectedFields
Record<string, unknown>
No
Mapa de nombre de campo → valor de campo para los campos que el usuario seleccionó en el paso de selección de campo. Las claves son nombres de campo; valores reflejan la matriz 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.
selectedTemplateId
string | null
No
El ID de la plantilla de HTML elegida para este fragmento en el selector de plantillas del panel Detalles rápidos (flujo ascendente @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

Propiedad
Tipo
Requerido
Descripción
name
cadena
Nombre para mostrar del modelo de fragmento de contenido
id
cadena
Identificador único del modelo
path
cadena
No
Ruta de acceso completa a la definición del modelo (por ejemplo, /conf/my-project/settings/dam/cfm/models/article)
tagIds
cadena[]
No
Matriz de ID de etiqueta asociados al modelo

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

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