Documentación AEM as a Cloud Service Guía del usuario

Selector de recursos de Micro-Frontend Overview

Last update: Tue Jan 21 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

Administrador
Usuario

Prácticas recomendadas de búsqueda

Prácticas recomendadas de metadatos

Centro de contenido

Dynamic Media con funciones de OpenAPI

Documentación de desarrollador de AEM Assets

El Selector de recursos de Micro-Frontend proporciona una interfaz de usuario que se integra fácilmente con el repositorio de Experience Manager Assets para poder examinar o buscar recursos digitales disponibles en el repositorio y utilizarlos en la experiencia de creación de la aplicación.

La interfaz de usuario de Micro-Frontend está disponible en la experiencia de su aplicación mediante el paquete Selector de recursos. Las actualizaciones del paquete se importan automáticamente y el último Selector de recursos implementado se carga automáticamente en la aplicación.

Información general

El Selector de recursos ofrece muchas ventajas, como las siguientes:

Facilidad de integración con cualquiera de las aplicaciones Adobe o que no sean de Adobe que utilicen la biblioteca JavaScript convencional.
Son fáciles de mantener, ya que las actualizaciones del paquete del Selector de recursos se implementan automáticamente en el Selector de recursos disponible para su aplicación. No se requieren actualizaciones dentro de la aplicación para cargar las modificaciones más recientes.
Facilidad de personalización, ya que hay propiedades disponibles que controlan la visualización del Selector de recursos en la aplicación.
Filtros personalizados, de búsqueda de texto completo y listos para usar para navegar rápidamente a los recursos y utilizarlos en la experiencia de creación.
Capacidad para cambiar repositorios dentro de una organización IMS para la selección de recursos.
Capacidad para ordenar recursos por nombre, dimensiones y tamaño y verlos en la vista Lista, Cuadrícula, Galería o Cascada.

Requisitos previos prereqs

Debe asegurarse de que dispone de los siguientes métodos de comunicación:

La aplicación se está ejecutando en HTTPS.
La URL de la aplicación está en la lista de URL de redirección permitidas del cliente de IMS.
El flujo de inicio de sesión de IMS se configura y se representa mediante una ventana emergente en el explorador web. Por lo tanto, las ventanas emergentes deben habilitarse o permitirse en el explorador de destino.

Utilice los requisitos previos anteriores si necesita el flujo de trabajo de autenticación de IMS del Selector de recursos. Alternativamente, si ya está autenticado con el flujo de trabajo de IMS, puede añadir la información de IMS en su lugar.

Más información

IMPORTANT

Este repositorio está diseñado para servir como documentación suplementaria que describa las API disponibles y ejemplos de uso para la integración del Selector de recursos. Antes de intentar instalar o utilizar el Selector de recursos, asegúrese de que su organización tenga acceso al Selector de recursos como parte del perfil de Experience Manager Assets as a Cloud Service. Si no se le ha proporcionado acceso, no puede integrar ni utilizar estos componentes. Para solicitar el aprovisionamiento, el administrador del programa debe enviar un vale de asistencia marcado como P2 a Admin Console e incluir la siguiente información:

Nombres de dominio en los que está alojada la aplicación integradora.
Después del aprovisionamiento, se proporcionará a su organización imsClientId, imsScope y redirectUrl correspondientes a los entornos solicitados que son esenciales para la configuración del Selector de recursos. Sin estas propiedades válidas, no se pueden ejecutar los pasos de instalación.

Instalación installation

El Selector de recursos está disponibles a través de la CDN de ESM (por ejemplo, esm.sh/skypack) y la versión de UMD.

En navegadores que utilizan la Versión de UMD (recomendado):

<script src="https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/assets-selectors.js"></script>

<script>
  const { renderAssetSelector } = PureJSSelectors;
</script>

En navegadores con compatibilidad con import maps con Versión de CDN de ESM:

<script type="module">
  import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'
</script>

En la federación de módulos Deno/Webpack mediante Versión de CDN de ESM:

import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'

Uso del Selector de recursos using-asset-selector

Una vez configurado el Selector de recursos y autenticado para usar el Selector de recursos con su aplicación Adobe Experience Manager as a Cloud Service, puede seleccionar recursos o realizar otras operaciones para buscar los recursos dentro del repositorio.

using-asset-selector

A: Ocultar/Mostrar panel
B: Conmutador de repositorios
C: Recursos
D: Filtros
E: Barra de búsqueda
F: Ordenación
G: Ordenación en orden ascendente o descendente
H: Ver

Ocultar/Mostrar panel hide-show-panel

Para ocultar carpetas en el panel de navegación izquierdo, haga clic en el icono Ocultar carpetas. Para deshacer los cambios, haga clic en el icono Ocultar carpetas de nuevo.

Conmutador de repositorios repository-switcher

El Selector de recursos también le permite cambiar de repositorio para realizar la selección de recursos. Puede seleccionar el repositorio que desee en la lista desplegable disponible en el panel izquierdo. Las opciones del repositorio disponibles en la lista desplegable se basan en la propiedad repositoryId definida en el archivo index.html. Se basa en los entornos de la organización de IMS seleccionada a la que accede el usuario que ha iniciado sesión. Los consumidores pueden aprobar un repositoryID preferido y, en ese caso, el Selector de recursos deja de procesar el conmutador de repositorios y solo procesa los recursos del repositorio dado.

Repositorio de recursos

Es una colección de carpetas de recursos que puede utilizar para realizar operaciones.

Filtros listos para usar filters

El Selector de recursos también proporciona opciones de filtro listas para usar para restringir los resultados de búsqueda. Los filtros disponibles son los siguientes:

Estado: es el estado actual del recurso, que puede ser all, approved, rejected o no status.
Tipo de archivo: incluye folder, file, images, documents o video.

Estado de caducidad: señala la duración de la caducidad de los recursos. Puede marcar la casilla de verificación Expired para filtrar los recursos que han caducado o establecer el elemento Expiration Duration de un recurso para mostrar los recursos en función de la duración de su caducidad. Cuando un recurso ya ha caducado o está a punto de hacerlo, aparece un distintivo que lo indica. Además, puede decidir si desea permitir el uso (o arrastrar y soltar) de un recurso caducado. Más información sobre personalizar recursos caducados. De manera predeterminada, se muestra el distintivo Caducará pronto para los recursos que caduquen en los próximos 30 días. Sin embargo, puede configurar la caducidad mediante la propiedad expirationDate.

note tip
TIP
Si desea ver o filtrar recursos en función de su fecha de caducidad futura, mencione el intervalo de fechas futuras en el campo `Expiration Duration`. Muestra los recursos que tienen el distintivo caducará pronto.

Tipo MIME: incluye JPG, GIF, PPTX, PNG, MP4, DOCX, TIFF, PDF, XLSX.
Tamaño de la imagen: incluye la anchura mínima/máxima y la altura mínima/máxima de la imagen.

Búsqueda personalizada

Además de la búsqueda de texto completo, el Selector de recursos le permite buscar recursos dentro de los archivos mediante búsquedas personalizadas. Puede utilizar filtros de búsqueda personalizados en los modos Vista modal y Vista de carril.

custom-search

También puede crear un filtro de búsqueda predeterminado para guardar los campos que busca con frecuencia y utilizarlos más adelante. Para crear una búsqueda personalizada de sus recursos, puede utilizar la propiedad filterSchema.

Barra de búsqueda search-bar

El Selector de recursos le permite realizar una búsqueda de texto completo de los recursos del repositorio seleccionado. Por ejemplo, si escribe la palabra clave wave en la barra de búsqueda, se muestran todos los recursos con la palabra clave wave mencionada en cualquiera de las propiedades de metadatos.

Ordenación sorting

Puede ordenar los recursos en el Selector de recursos por nombre, dimensiones o tamaño de un recurso. También puede ordenar los recursos en orden ascendente o descendente.

Tipos de vista types-of-view

El Selector de recursos le permite ver el recurso en cuatro vistas diferentes:

Vista de lista: la vista de lista muestra los archivos y carpetas desplazables en una sola columna.
Vista de cuadrícula: la vista de cuadrícula muestra archivos y carpetas desplazables en una cuadrícula de filas y columnas.
Vista de galería: la vista de galería muestra los archivos o carpetas en una lista horizontal bloqueada en el centro.
Vista de cascada La vista de cascada muestra archivos o carpetas en forma de Bridge.

Gráfico de información general

Más información sobre las funcionalidades clave key-capabilities-asset-selector

Integrar el gráfico del Selector de recursos {width="70px"}
Integrar el selector de recursos

Conozca varias funcionalidades para integrar el Selector de recursos con varias aplicaciones.

Integrar el Selector de recursos con el gráfico de aplicaciones de Adobe {width="70px"}
Integrar el selector de recursos con aplicaciones de Adobe

Descubra cómo integrar el Selector de recursos con varias aplicaciones de Adobe.

Integrar el gráfico del Selector de recursos {width="70px"}
Integrar el Selector de recursos con aplicaciones de terceros

Descubra las funcionalidades para integrar el Selector de recursos con aplicaciones que no sean de Adobe.

Integrar el gráfico del Selector de recursos {width="70px"}
Integrar el Selector de recursos con las API abiertas de Dynamic Media

Obtenga información sobre cómo integrar el Selector de recursos con las API abiertas de Dynamic Media.

Gráfico de propiedades del Selector de recursos {width="70px"}
Propiedades del Selector de recursos

Conozca los conceptos básicos de la personalización de varios componentes del Selector de recursos, como filtros, selección de recursos, recursos caducados y mucho más.

Gráfico de ejemplos del Selector de recursos {width="70px"}
Ejemplos del Selector de recursos