Seletor de destino de micro front-end Overview

O Seletor de Destino de MicroFront-End fornece uma interface de usuário em seu aplicativo que se integra facilmente ao repositório Experience Manager Assets as a Cloud Service. Pesquise ou navegue até a pasta apropriada no repositório do Experience Manager Assets as a Cloud Service e carregue ativos do seu aplicativo.

A interface de usuário de MicroFront-End é disponibilizada em sua experiência de aplicativo usando o pacote do Seletor de destino. Quaisquer atualizações no pacote são automaticamente importadas e o Seletor de destino implantado mais recente é carregado automaticamente no aplicativo.

O Seletor de destino oferece muitos benefícios, como:

O escopo deste artigo é demonstrar como usar o Seletor de destino com um aplicativo Adobe no Unified Shell ou quando você já tiver um imsToken gerado para autenticação. Esses fluxos de trabalho são chamados de fluxo não SUSI neste artigo.

Execute as seguintes tarefas para integrar e usar o Seletor de destino com seu repositório Experience Manager Assets as a Cloud Service:

Integrar seletor de destino usando o Vanilla JS integration-with-vanilla-js

É possível integrar qualquer Adobe ou aplicativo fora da Adobe com o repositório Experience Manager Assets as a Cloud Service no aplicativo.

A integração é feita importando o pacote do Seletor de destino e se conectando ao Assets as a Cloud Service usando a biblioteca JavaScript do Vanilla. Você deve editar um index.html ou qualquer arquivo apropriado em seu aplicativo para -

É possível executar a autenticação sem definir algumas das propriedades do IMS, se:

Pré-requisitos prerequisites

Defina os pré-requisitos no arquivo index.html ou em um arquivo semelhante na implementação do aplicativo para definir os detalhes de autenticação e acessar o repositório do Experience Manager Assets as a Cloud Service. Os pré-requisitos incluem:

Instalação installation

O Seletor de Destino está disponível por meio da CDN ESM (por exemplo, esm.sh/skypack) e da versão UMD.

Nos navegadores usando a Versão UMD (recomendado):

Nos navegadores usando a Versão UMD (recomendado):

<script src="https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/assets-selectors.js"></script>

<script>
  const { renderAssetSelector } = PureJSSelectors;
</script>

Em navegadores com suporte a import maps usando a Versão CDN do ESM:

<script type="module">
  import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'
</script>

No Deno/Webpack Module Federation usando a Versão CDN do ESM:

import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'

Destino selecionado selected-destination

O Seletor de Destino recebe um retorno de chamada de onItemSelect, onTreeToggleItem ou onTreeSelectionChange com o diretório selecionado que contém o objeto (diretório, imagem, etc.).

Sintaxe do 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; };
}

A tabela a seguir descreve algumas das propriedades importantes do destino selecionado.

Para obter uma lista completa de propriedades e um exemplo detalhado, visite Exemplo de Código do Seletor de Destino.

Exemplo para o fluxo não SUSI non-ims-vanilla

Este exemplo demonstra como usar o Seletor de Destino com um fluxo não SUSI ao executar um aplicativo Adobe no Unified Shell ou quando você já tem imsToken gerado para autenticação.

Inclua o pacote do Seletor de destino no código usando a marca script, como mostrado nas linhas 6-15 do exemplo abaixo. Depois que o script é carregado, a variável global PureJSSelectors fica disponível para uso. Defina o Seletor de Destino propriedades conforme mostrado em linhas 16-23. As propriedades imsOrg e imsToken são necessárias para autenticação em um fluxo não SUSI. A propriedade handleSelection é usada para manipular os ativos selecionados. Para renderizar o Seletor de Destino, chame a função renderDestinationSelector, conforme mencionado em linha 17. O Seletor de Destino é exibido no elemento de contêiner <div>, conforme mostrado nas linhas 21 e 22.

Seguindo essas etapas, você pode usar o Seletor de Destino com um fluxo não SUSI no aplicativo 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 obter um exemplo detalhado, visite Exemplo de código do seletor de destino.

Usar propriedades do Seletor de destino destination-selector-properties

Você pode usar as propriedades do Seletor de destino para personalizar a forma como o Seletor de destino é renderizado. A tabela a seguir lista as propriedades que podem ser usadas para personalizar e usar o Seletor de destino:

Exemplos para o uso de propriedades do Seletor de destino usage-examples

Você pode definir as propriedades do Seletor de Destino no arquivo index.html para personalizar a exibição do Seletor de Destino no aplicativo.

Exemplo 1: criar uma pasta no Seletor de destino

O Seletor de destino permite criar uma pasta para fazer upload, mover ou copiar ativos no local específico.

Exemplo 2: especificar o tipo de exibição do Seletor de destino

O Seletor de destino exibe uma grande variedade de ativos em quatro exibições diferentes, incluindo a Exibição em lista, a Exibição em grade, a Exibição de galeria e a Exibição em cascata. Para especificar o tipo de exibição padrão, você pode usar a propriedade viewType. A propriedade viewTypeOptions é usada com a propriedade viewType para estipular outros tipos de exibição para que outras opções de tipo de exibição possam ser exibidas em uma lista suspensa. Um único argumento pode ser usado caso você queira que apenas uma opção seja exibida.

Exemplo 3: caminho de inicialização da pasta do Assets

Use a propriedade path para definir o nome da pasta que é exibido automaticamente quando o Seletor de Destino é renderizado.

Utilização do seletor de destino using-destination-selector

Depois que o Seletor de destino estiver configurado e você estiver autenticado para usar o Seletor de destino com seu Adobe Experience Manager como um aplicativo do Cloud Service, será possível selecionar ativos ou executar várias outras operações para pesquisar seus ativos no repositório.

Barra de pesquisa search-bar

O Seletor de destino permite executar uma pesquisa de texto completo dos ativos no repositório selecionado. Por exemplo, se você digitar a palavra-chave wave na barra de pesquisa, todos os ativos com a palavra-chave wave mencionada em qualquer uma das propriedades de metadados serão exibidos.

Classificação sorting

Você pode classificar ativos no Seletor de destino por nome, dimensão ou tamanho de um ativo. Também é possível classificar os ativos em ordem crescente ou decrescente.

Repositório do Assets assets-repo

O Seletor de destino também permite exibir dados do repositório de sua escolha disponíveis no aplicativo do AEM. Você pode usar a propriedade repositoryID para inicializar o caminho da pasta de destino que deseja exibir na primeira instância do Seletor de Destino.

Adicionar sufixo ou prefixo add-suffix-or-prefix

É um exemplo da propriedade optionsFormSetup. Você pode usar isso para confirmar a seleção, ela é passada no evento onConfirm.

Criar uma pasta create-new-folder

Ele permite criar uma pasta na pasta de destino do seu Adobe Experience Manager como Cloud Service.

Tipos de visualização types-of-view

O Seletor de destino permite exibir o ativo em quatro exibições diferentes:

Informações info

O ícone de informações ou informações permite visualizar metadados do ativo selecionado. Ele inclui vários detalhes, como dimensões, tamanho, descrição, caminho, data de modificação e data de criação. As informações de metadados são fornecidas ao fazer upload, copiar ou criar um ativo.

Selecionar pasta select-folder

O botão Selecionar pasta permite selecionar ativos para executar várias operações associadas às propriedades no seletor de destino.