Selector de recursos de Micro-Frontend

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.

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
• Definir propiedades de visualización del Selector de recursos
• Uso del Selector de recursos

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.

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.

handleSelection=(assets: Asset[])=> {…}

handleSelection=(assets: Asset[])=> {…}

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

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.

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.

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.

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.

• 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

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

  

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.

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

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: 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 los archivos o carpetas en forma de puente.

Recursos de Business.Adobe.com