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.
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.
Array<string>
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:
imsOrg
La clave es necesaria para autenticar si la organización a la que accede se encuentra en Adobe IMS o no.imsToken
no es obligatorio si utiliza el flujo SUSI. Sin embargo, es obligatorio si utiliza el flujo que no es SUSI.apiKey
no es obligatorio si utiliza el flujo SUSI. Sin embargo, es obligatorio en flujos que no sean de SUSI.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.onCreateFolder
La propiedad permite añadir un icono que añade una nueva carpeta en la aplicación.viewType
se utiliza para especificar las vistas que se utilizan para mostrar recursos.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.Object<{ id?: string, defaultMessage?: string, description?: string}>
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.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.
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.
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.
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.
- A: Barra de búsqueda
- B: Ordenando
- C: Recursos
- D: Agregar sufijo o prefijo
- E: Crear nueva carpeta
- F: Ver
- G: Información
- H: Seleccionar carpeta
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:
- : la vista de lista muestra los archivos y carpetas desplazables en una sola columna.
- : la vista de cuadrícula muestra archivos y carpetas desplazables en una cuadrícula de filas y columnas.
- : la vista de galería muestra los archivos o carpetas en una lista horizontal bloqueada en el centro.
- : 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.