Selector de destino de Micro-Frontend Overview

El Selector de destino de Micro-FrontEnd proporciona una interfaz de usuario dentro de su aplicación que se integra fácilmente con el repositorio Experience Manager Assets as a Cloud Service. Puede buscar o examinar la carpeta adecuada dentro del repositorio de Experience Manager Assets as a Cloud Service y cargar recursos desde su aplicación.

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

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

El ámbito de este artículo es demostrar cómo utilizar el Selector de destino con una aplicación 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 destino con su repositorio Experience Manager Assets as a Cloud Service:

Integración del selector de destino mediante Vanilla JS integration-with-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 destino y conectándose a Assets as a Cloud Service mediante la biblioteca de JavaScript de vainilla. Debe editar un index.html o cualquier archivo apropiado dentro de su aplicación para:

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

Requisitos previos prerequisites

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:

Instalación installation

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

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

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'

Destino seleccionado selected-destination

El Selector de destino recibe una llamada de retorno de onItemSelect, onTreeToggleItem o onTreeSelectionChange con el directorio seleccionado que contiene el objeto (directorio, imagen, etc.).

Sintaxis de esquema

interface SelectedDestination {
  id: string;
  children: SelectedDestination[];
  'repo:repositoryId': string;
  'dc:format': string;
  'repo:assetClass': string;
  'storage:directoryType': string;
  'storage:region': string;
  'repo:name': string;
  'repo:path': string;
  'repo:ancestors': string[];
  'repo:createDate': string;
  'storage:assignee':

  { type: string; id: string; }
  ;
  'repo:assetId': string;
  'aem:published': boolean;
  'repo:createdBy': string;
  'repo:state': string;
  'repo:id': string;
  'repo:modifyDate': string;
  _page:

  { orderBy: string; count: number; };
}

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

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

Ejemplo de flujo no SUSI non-ims-vanilla

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

Incluya el paquete Selector de destino en su código usando la etiqueta script, como se muestra en las líneas 6-15 del ejemplo siguiente. Una vez cargado el script, la variable global PureJSSelectors estará disponible para su uso. Defina el Selector de destino properties 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 destino, llame a la función renderDestinationSelector como se menciona en la línea 17. El Selector de destino se muestra en el elemento contenedor <div>, como se muestra en las líneas 21 y 22.

Siguiendo estos pasos, puede utilizar el Selector de destino con un flujo que no sea SUSI en la aplicación Adobe.

<!DOCTYPE html>
<html>
<head>
    <title>Destination 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 DestinationSelector component
        const container = document.getElementById('destination-selector-container');
        // imsOrg and imsToken are required for authentication in non-SUSI flow
        const destinationSelectorProps = {
            imsOrg: 'example-ims@AdobeOrg',
            imsToken: "example-imsToken",
            apiKey: "example-apiKey-associated-with-imsOrg",
            handleSelection: (assets: SelectedAssetType[]) => {},
        };
        // Call the `renderDestinationSelector` available in PureJSSelectors globals to render DestinationSelector
        PureJSSelectors.renderDestinationSelector(container, destinationselectorprops);
    </script>
</head>

<body>
    <div id="destination-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 de selector de destino.

Usar propiedades del Selector de destino destination-selector-properties

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

Ejemplos de uso de las propiedades del Selector de destino usage-examples

Puede definir el Selector de destino properties en el archivo index.html para personalizar la visualización del Selector de destino en su aplicación.

Ejemplo 1: Crear una carpeta en el Selector de destino

El selector de destino permite crear una carpeta para cargar, mover o copiar recursos en una ubicación concreta.

Ejemplo 2: Especificar tipo de vista del Selector de destino

El Selector de destino muestra una amplia matriz de recursos en cuatro vistas diferentes, incluidas la Vista de lista, la Vista de cuadrícula, la Vista de galería y la Vista de cascada. Para especificar el tipo de vista predeterminado, puede utilizar la propiedad viewType. La propiedad viewTypeOptions se usa junto con la propiedad viewType para estipular otros tipos de vista de modo que se puedan mostrar otras opciones de tipo de vista en una lista desplegable. Se puede utilizar un solo argumento en caso de que desee mostrar solo una opción.

Ejemplo 3: Inicializar la ruta de la carpeta Assets

Utilice la propiedad path para definir el nombre de carpeta que se mostrará automáticamente cuando se represente el Selector de destino.

Uso del selector de destino using-destination-selector

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

Barra de búsqueda search-bar

El Selector de destino permite realizar una búsqueda de texto completo de los recursos dentro 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 destino por nombre, dimensión o tamaño de un recurso. También puede ordenar los recursos en orden ascendente o descendente.

Repositorio de Assets assets-repo

El Selector de destino también permite ver los datos del repositorio que elija disponibles en la aplicación de AEM. Puede usar la propiedad repositoryID para inicializar la ruta de la carpeta de destino que desea ver en la primera instancia del Selector de destino.

Agregar sufijo o prefijo add-suffix-or-prefix

Es un ejemplo de la propiedad optionsFormSetup. Puede usar esto para confirmar la selección; se pasa en el evento onConfirm.

Crear una carpeta. create-new-folder

Le permite crear una carpeta en la carpeta de destino de su Adobe Experience Manager como Cloud Service.

Tipos de vista types-of-view

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

Información info

El icono de información permite ver los metadatos del recurso seleccionado. Incluye varios detalles, como dimensiones, tamaño, descripción, ruta, fecha de modificación y fecha de creación. La información de los metadatos se proporciona al cargar, copiar o crear un recurso.

Seleccionar carpeta select-folder

El botón Seleccionar carpeta le permite seleccionar recursos para realizar diversas operaciones asociadas a propiedades en el selector de destino.