Selector de recursos de Micro-Frontend

Última actualización: 2023-12-14
  • Creado para:
  • Admin
    User
Versión Vínculo del artículo
AEM 6.5 Haga clic aquí
AEM as a Cloud Service Este artículo

El Selector de recursos de Micro-Frontend proporciona una interfaz de usuario que se integra fácilmente con el repositorio de Experience Manager Assets as a Cloud Service 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 de Adobe o que no sean de Adobe mediante la biblioteca JavaScript de Vanilla.

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

El ámbito de este artículo es demostrar cómo utilizar el Selector de recursos con una aplicación de Adobe bajo Unified Shell o cuando ya tiene un imsToken generado para la autenticación. Estos flujos de trabajo se denominan flujo no SUSI en este artículo.

Realice las siguientes tareas para integrar y utilizar el Selector de recursos con su repositorio de Experience Manager Assets as a Cloud Service:

Integración del Selector de recursos mediante Vanilla JS

Puede integrar cualquier Adobe o aplicación sin Adobe con Experience Manager Assets como un repositorio de Cloud Service y seleccione recursos desde la aplicación.

La integración se realiza importando el paquete Selector de recursos y conectándose a los Assets as a Cloud Service mediante la biblioteca JavaScript de Vanilla. Debe editar un index.html o cualquier archivo apropiado dentro de su aplicación para:

  • Definición de los detalles de autenticación
  • Acceso al repositorio Assets as a Cloud Service
  • Configurar las propiedades de visualización del Selector de recursos

Puede realizar la autenticación sin definir algunas de las propiedades de IMS, si:

  • Está integrando una aplicación de Adobe en Unified Shell.
  • Ya ha generado un token de IMS para la autenticación.

Requisitos previos

Defina los requisitos previos en el archivo de index.html o un archivo similar dentro de la implementación de la aplicación para definir los detalles de la autenticación para acceder al repositorio de Experience Manager Assets as a Cloud Service. Los requisitos previos incluyen:

  • imsOrg
  • imsToken
  • apikey

Instalación

Los selectores de recursos están disponibles a través de la CDN de ESM (por ejemplo, esm.sh/skypack) y versión 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'

Tipo de recurso seleccionado

El tipo de recurso seleccionado es una matriz de objetos que contiene la información del recurso al utilizar las funciones handleSelection, handleAssetSelection, y onDrop.

Sintaxis de esquema

interface SelectedAsset {
    'repo:id': string;
    'repo:name': string;
    'repo:path': string;
    'repo:size': number;
    'repo:createdBy': string;
    'repo:createDate': string;
    'repo:modifiedBy': string;
    'repo:modifyDate': string;
    'dc:format': string;
    'tiff:imageWidth': number;
    'tiff:imageLength': number;
    'repo:state': string;
    computedMetadata: Record<string, any>;
    _links: {
        'http://ns.adobe.com/adobecloud/rel/rendition': Array<{
            href: string;
            type: string;
            'repo:size': number;
            width: number;
            height: number;
            [others: string]: any;
        }>;
    };
}

En la tabla siguiente se describen algunas de las propiedades importantes del objeto Recurso seleccionado.

Propiedad Tipo Explicación
repo:repositoryId cadena Identificador único del repositorio en el que se almacena el recurso.
repo:id cadena Identificador único del recurso.
repo:assetClass cadena La clasificación del recurso (por ejemplo, imagen o vídeo, documento).
repo:name cadena Nombre del recurso, incluida la extensión de archivo.
repo:size número El tamaño del recurso en bytes.
repo:path cadena La ubicación del recurso dentro del repositorio.
repo:ancestors Array<string> Matriz de elementos antecesores del recurso en el repositorio.
repo:state cadena Estado actual del recurso en el repositorio (por ejemplo, activo, eliminado, etc.).
repo:createdBy cadena El usuario o sistema que creó el recurso.
repo:createDate cadena La fecha y la hora en que se creó el recurso.
repo:modifiedBy cadena Usuario o sistema que modificó el recurso por última vez.
repo:modifyDate cadena La fecha y la hora en que se modificó el recurso por última vez.
dc:format cadena El formato del recurso, como el tipo de archivo (por ejemplo, JPEG, PNG, etc.).
tiff:imageWidth número La anchura de un recurso.
tiff:imageLength número Altura de un recurso.
computedMetadata Record<string, any> Un objeto que representa un cubo para todos los metadatos del recurso de todo tipo (repositorio, aplicación o metadatos incrustados).
_links Record<string, any> Vínculos de hipermedia para el recurso asociado. Incluye vínculos para recursos como metadatos y representaciones.
_links.http://ns.adobe.com/adobecloud/rel/rendition Array<Object> Matriz de objetos que contiene información sobre las representaciones del recurso.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].href cadena URI de la representación.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].type cadena Tipo MIME de la representación.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].'repo:size' número El tamaño de la representación en bytes.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].width número La anchura de la representación.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].height número Altura de la representación.

Para obtener una lista completa de las propiedades y un ejemplo detallado, visite Ejemplo de código del selector de recursos.

Ejemplo de flujo no SUSI

En este ejemplo se muestra cómo utilizar el Selector de recursos con un flujo que no sea SUSI al ejecutar una aplicación de Adobe en Unified Shell o cuando ya tiene imsToken generado para la autenticación.

Incluya el paquete Selector de recursos en su código mediante el script , como se muestra en líneas 6-15 del ejemplo siguiente. Una vez cargado el script, la variable global PureJSSelectors está disponible para su uso. Definición del selector de recursos propiedades como se muestra en líneas 16-23. Las propiedades de imsOrg y imsToken son necesarias para la autenticación en un flujo que no es SUSI. La propiedad de handleSelection se utiliza para gestionar los recursos seleccionados. Para procesar el Selector de recursos, llame a la función de renderAssetSelector como se menciona en línea 17. El Selector de recursos se muestra en el elemento contenedor de <div>, como se muestra en las líneas 21 y 22.

Al seguir estos pasos, puede utilizar el Selector de recursos con un flujo que no sea SUSI en su aplicación de Adobe.

<!DOCTYPE html>
<html>
<head>
    <title>Asset Selector</title>
    <script src="https://experience.adobe.com/solutions/CQ-assets-selectors/assets/resources/assets-selectors.js"></script>
    <script>
        // get the container element in which we want to render the AssetSelector component
        const container = document.getElementById('asset-selector-container');
        // imsOrg and imsToken are required for authentication in non-SUSI flow
        const assetSelectorProps = {
            imsOrg: 'example-ims@AdobeOrg',
            imsToken: "example-imsToken",
            apiKey: "example-apiKey-associated-with-imsOrg",
            handleSelection: (assets: SelectedAssetType[]) => {},
        };
        // Call the `renderAssetSelector` available in PureJSSelectors globals to render AssetSelector
        PureJSSelectors.renderAssetSelector(container, assetSelectorProps);
    </script>
</head>

<body>
    <div id="asset-selector-container" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
    </div>
</body>

</html>

Para ver un ejemplo detallado, visite Ejemplo de código del selector de recursos.

Usar propiedades del Selector de recursos

Puede utilizar las propiedades del Selector de recursos para personalizar la forma en que se procesa el Selector de recursos. En la tabla siguiente se enumeran las propiedades que puede utilizar para personalizar y utilizar el Selector de recursos.

Propiedad Tipo Requerido Predeterminado Descripción
carril booleano No false Si está marcado true, el Selector de recursos se representa en una vista del carril izquierdo. Si está marcado false, el Selector de recursos se procesará en la vista modal.
imsOrg cadena ID del sistema Identity Management de Adobe (IMS) asignado durante el aprovisionamiento Adobe Experience Manager as a Cloud Service para su organización. El imsOrg La clave es necesaria para autenticar si la organización a la que accede se encuentra en Adobe IMS o no.
imsToken cadena No Token de portador de IMS utilizado para la autenticación. imsToken es necesario si utiliza el flujo que no es SUSI.
apiKey cadena No Clave de API utilizada para acceder al servicio AEM Discovery. apiKey es necesario si utiliza el flujo que no es SUSI.
rootPath cadena No /content/dam/ Ruta de la carpeta desde la que el Selector de recursos muestra los recursos. rootPath también se puede utilizar en forma de encapsulación. Por ejemplo, dada la siguiente ruta, /content/dam/marketing/subfolder/Sin embargo, el Selector de recursos no le permite atravesar ninguna carpeta principal, sino que solo muestra las carpetas secundarias.
ruta cadena No Ruta que se utiliza para navegar a un directorio específico de recursos cuando se procesa el Selector de recursos.
filterSchema matriz No Modelo que se utiliza para configurar las propiedades del filtro. Esto resulta útil cuando desea limitar ciertas opciones de filtro en el Selector de recursos.
filterFormProps Objeto No Especifique las propiedades del filtro que debe utilizar para restringir la búsqueda. Por ejemplo, JPG de tipo MIME, PNG, GIF.
selectedAssets Matriz <Object> No Especificar los recursos seleccionados cuando se procese el selector de recursos. Se requiere una matriz de objetos que contenga una propiedad id de los recursos. Por ejemplo, [{id: 'urn:234}, {id: 'urn:555'}] Un recurso debe estar disponible en el directorio actual. Si necesita utilizar un directorio diferente, proporcione un valor para la propiedad de path también.
acvConfig Objeto No Propiedad de vista de colección de recursos que contiene un objeto con una configuración personalizada para anular los valores predeterminados.
i18nSymbols Object<{ id?: string, defaultMessage?: string, description?: string}> No Si las traducciones de OOTB no son suficientes para las necesidades de la aplicación, puede exponer una interfaz a través de la cual puede pasar sus propios valores localizados personalizados a través del prop i18nSymbols. Al pasar un valor a través de esta interfaz, se anulan las traducciones predeterminadas proporcionadas y, en su lugar, se utilizan las suyas. Para realizar la anulación, debe pasar un objeto Descriptor del mensaje válido a la clave de i18nSymbols que desee anular.
intl Objeto No El Selector de recursos proporciona traducciones OOTB predeterminadas. Puede seleccionar el idioma de traducción proporcionando una cadena de configuración regional válida a través del prop intl.locale. Por ejemplo: intl={{ locale: "es-es" }}

Las cadenas de configuración regional admitidas siguen los Códigos ISO 639 para la representación de los estándares de nombres de idiomas.

Lista de configuraciones regionales admitidas: Inglés - ‘en-us’ (predeterminado) Español - ‘es-es’ Alemán - ‘de-de’ Francés - ‘fr-fr’ Italiano - ‘it-it’ Japonés - ‘ja-jp’ Coreano - ‘ko-kr’ Portugués - ‘pt-br’ Chino (tradicional) - ‘zh-cn’ Chino (Taiwán) - ‘zh-tw’
repositoryId cadena No '' Repositorio desde el que el Selector de recursos carga el contenido.
additionalAemSolutions Array<string> No [ ] AEM Permite añadir una lista de repositorios de recursos de la adicionales. Si no se proporciona información en esta propiedad, solo se tienen en cuenta los repositorios de la biblioteca de medios o de AEM Assets.
hideTreeNav booleano No Especifica si se muestra u oculta la barra lateral de navegación del árbol de recursos. Solo se utiliza en la vista modal y, por lo tanto, no hay ningún efecto de esta propiedad en la vista de carril.
onDrop Función No La propiedad permite la funcionalidad de colocación de un recurso.
dropOptions {allowList?: Object} No Configura las opciones de colocación mediante 'allowList'.
colorScheme cadena No Configurar tema (light o dark) para el Selector de recursos.
handleSelection Función No Se invoca con la matriz de elementos de recurso cuando se seleccionan los recursos y se hace clic en el botón Select en el modal. Esta función solo se invoca en la vista modal. Para la vista de carril, utilice las funciones handleAssetSelection o onDrop. Ejemplo:
handleSelection=(assets: Asset[])=> {…}
Consulte Tipo de recurso seleccionado para obtener más información.
handleAssetSelection Función No Se invoca con una matriz de elementos cuando los recursos se seleccionan o no. Esto resulta útil cuando desea escuchar los recursos a medida que el usuario los selecciona. Ejemplo:
handleSelection=(assets: Asset[])=> {…}
Consulte Tipo de recurso seleccionado para obtener más información.
onClose Función No Se invoca cuando se pulsa el botón Close en la vista modal. Esto solo se llama en la vista modal y se ignora en la vista rail.
onFilterSubmit Función No Se invoca con elementos de filtro cuando el usuario cambia criterios de filtro diferentes.
selectionType cadena No sencillo Configuración para selección de single o multiple de recursos a la vez.

Ejemplos de uso de las propiedades del Selector de recursos

Puede definir las propiedades del Selector de recursos en el archivo index.html para personalizar la visualización del Selector de recursos en la aplicación.

Ejemplo 1: Selector de recursos en la vista de carril

rail-view-example

Si el valor de AssetSelector rail se establece en false o no se menciona en las propiedades, el Selector de recursos se muestra en la vista Modal de forma predeterminada.

Ejemplo 2: ventana emergente de metadatos

Utilice varias propiedades para definir los metadatos de un recurso que desee ver mediante un icono de información. La ventana emergente de información proporciona la colección de información sobre el recurso o la carpeta, incluido el título, las dimensiones, la fecha de modificación, la ubicación y la descripción de un recurso. En el ejemplo siguiente, se utilizan varias propiedades para mostrar los metadatos de un recurso, por ejemplo: la propiedad repo:path especifica la ubicación de un recurso.

metadata-popover-example

Ejemplo 3: Propiedad de filtro personalizado en la vista de carril

Además de la búsqueda con facetas, el Selector de recursos permite personalizar varios atributos para restringir la búsqueda desde Adobe Experience Manager as a Cloud Service aplicación. Debe agregar el siguiente código para agregar filtros de búsqueda personalizados en la aplicación. En el ejemplo siguiente, la búsqueda Type Filter que filtra el tipo de recurso entre imágenes, documentos o vídeos o el tipo de filtro que ha agregado para la búsqueda.

custom-filter-example-vanilla

Gestión de la selección de recursos mediante el esquema de objetos

La propiedad handleSelection se utiliza para gestionar una o varias selecciones de recursos en el Selector de recursos. El ejemplo siguiente indica la sintaxis de uso de handleSelection.

handle-selection

Uso del Selector de recursos

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

Ocultar/Mostrar 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

El Selector de recursos también le permite cambiar de repositorio para 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

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:

  • File type: incluye carpeta, archivo, imágenes, documentos o vídeo

  • MIME type: incluye JPG, GIF, PPTX, PNG, MP4, DOCX, TIFF, PDF, XLSX

  • Image Size: incluye la anchura mínima/máxima, la altura mínima/máxima de la imagen

    rail-view-example

Búsqueda personalizada

Además de la búsqueda de texto completo, el Selector de recursos 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.

El Selector de recursos 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

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

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

  • vista de lista Vista de lista: la vista de lista muestra los archivos y carpetas desplazables en una sola columna.
  • vista de cuadrícula 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 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 Vista de cascada: la vista de cascada muestra los archivos o carpetas en forma de puente.

En esta página