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 Experience Manager Assets as a Cloud Service repositorio. Puede buscar o examinar la carpeta adecuada en el Experience Manager Assets as a Cloud Service y cargar recursos desde la 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.

Información general

El Selector de destino 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 Selector de destino se implementan automáticamente en el Selector de destino 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 destino dentro de la aplicación.
  • Búsqueda de texto completo para desplazarse rápidamente a las carpetas y cargar recursos desde la aplicación.
  • Capacidad para crear carpetas, ordenar carpetas en orden ascendente o descendente y verlas en las vistas Lista, Cuadrícula, Galería o Cascada.

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

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 los recursos as a Cloud Service mediante la biblioteca JavaScript de Vainilla. Debe editar un index.html o cualquier archivo apropiado dentro de su aplicación a:

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

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

  • imsOrg
  • imsToken
  • apikey

Instalación installation

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

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.

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.
_página
orderBy: string; count: number;
Incluye el número de página del documento.

Para obtener una lista completa de las 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 un Adobe aplicación en Unified Shell o cuando ya tiene imsToken generado para la autenticación.

Incluya el paquete Selector de destino en su código utilizando script , como se muestra en líneas 6-15 del ejemplo siguiente. Una vez cargado el script, la variable PureJSSelectors la variable global está disponible para su uso. Definición del selector de destino 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 destino, llame al método renderDestinationSelector función como se menciona en línea 17. El Selector de destino se muestra en la <div> elemento contenedor, como se muestra en líneas 21 y 22.

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

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

Propiedad
Tipo
Requerido
Predeterminado
Descripción
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 no es obligatorio si utiliza el flujo SUSI. Sin embargo, es obligatorio si utiliza el flujo que no es SUSI.
apiKey
cadena
No
Clave de API utilizada para acceder al servicio AEM Discovery. apiKey no es obligatorio si utiliza el flujo SUSI. Sin embargo, es obligatorio en flujos que no sean de SUSI.
rootPath
cadena
No
/content/dam/
Ruta de la carpeta desde la que el Selector de destino muestra los recursos. rootPath también se puede utilizar en forma de encapsulación. Por ejemplo, dada la siguiente ruta, /content/dam/marketing/subfolder/, el Selector de destino no le permite atravesar ninguna carpeta principal, sino que solo muestra las carpetas secundarias.
hasMore
booleano
No
Cuando la aplicación tiene más contenido para mostrar, puede utilizar esta propiedad para agregar un cargador que cargue el contenido para que sea visible en la aplicación. Es un indicador que indica que la carga de contenido está en curso.
orgName
booleano
No
AEM Es el nombre de la organización (probablemente orgID) asociada a la
initRepoID
cadena
No
Es la ruta del repositorio de recursos que desea utilizar en una vista inicial predeterminada
onCreateFolder
cadena
No
El onCreateFolder La propiedad permite añadir un icono que añade una nueva carpeta en la aplicación.
onConfirm
cadena
No
Se trata de una llamada de retorno cuando pulsa el botón de confirmación.
confirmDisabled
cadena
No
Esta propiedad controla el conmutador del botón de confirmación.
viewType
cadena
No
El viewType se utiliza para especificar las vistas que se utilizan para mostrar recursos.
viewTypeOptions
cadena
No
Esta propiedad está relacionada con viewType propiedad. puede especificar una o varias vistas para mostrar los recursos. Las opciones de viewType disponibles son: vista de lista, vista de cuadrícula, vista de galería, vista de cascada y vista de árbol.
itemNameFormatter
cadena
No
Esta propiedad permite dar formato al nombre del elemento
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.
inlineAlertSetup
cadena
No
Agrega un mensaje de alerta que desea pasar en la aplicación. Por ejemplo, agregar un mensaje de alerta que indique que no tiene permiso para acceder a esta carpeta.
intl
Objeto
No
El selector de destino 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'

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

Puede definir el Selector de destino propiedades en el index.html para personalizar la visualización del Selector de destino en la 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.

create-folder-destination-selector

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 viewType propiedad. El viewTypeOptions se utiliza junto con la propiedad viewType para estipular otros tipos de vista de modo que otras opciones de tipo de vista se puedan mostrar en una lista desplegable. Se puede utilizar un solo argumento en caso de que desee mostrar solo una opción.

viewtype-destination-selector

Ejemplo 3: Inicializar la ruta de la carpeta de recursos

Utilice el path para definir el nombre de la carpeta que se muestra automáticamente cuando se representa el Selector de destino.

initialize-folder-path

Uso del selector de destino using-destination-selector

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

using-destination-selector

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 recursos assets-repo

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

Agregar sufijo o prefijo add-suffix-or-prefix

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

Crear una carpeta. create-new-folder

Permite crear una carpeta en la carpeta de destino de su Adobe Experience Manager as a Cloud Service.

Tipos de vista types-of-view

El Selector de destino 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.

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 Select folder permite seleccionar recursos para realizar diversas operaciones asociadas a propiedades en el selector de destino.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab