Seletor de ativos de micro front-end

Última atualização em 2023-12-14
  • Criado para:
  • Admin
    User
Versão Link do artigo
AEM 6.5 Clique aqui
AEM as a Cloud Service Este artigo

O Seletor de ativos de micro front-end fornece uma interface do usuário que se integra facilmente ao repositório Experience Manager Assets as a Cloud Service para navegar ou pesquisar ativos digitais disponíveis no repositório e usá-los na experiência de criação do aplicativo.

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

Visão geral

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

  • Facilidade de integração com qualquer um dos aplicativos Adobe ou não-Adobe usando a biblioteca JavaScript Vanilla.

  • Manutenção facilitada, pois as atualizações do pacote do Seletor de ativos são implantadas automaticamente no Seletor de ativos disponível para seu aplicativo. Não há atualizações necessárias no aplicativo para carregar as modificações mais recentes.

  • Facilidade de personalização, pois há propriedades disponíveis que controlam a exibição do Seletor de ativos no aplicativo.

  • Filtros de pesquisa de texto completo, prontos para uso e personalizados que navegam rapidamente até os ativos para uso na experiência de criação.

  • Capacidade de alternar repositórios em uma organização IMS para seleção de ativos.

  • Capacidade de classificar ativos por nome, dimensões e tamanho e visualizá-los na exibição de Lista, Grade, Galeria ou Cascata.

O escopo deste artigo é demonstrar como usar o Seletor de ativos com um aplicativo Adobe no Unified Shell ou quando 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 ativos com o seu repositório Experience Manager Assets as a Cloud Service:

Integrar o Seletor de ativos usando o 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 ativos e conectando ao Assets as a Cloud Service usando a biblioteca JavaScript Vanilla. É necessário editar um index.html ou qualquer arquivo apropriado em seu aplicativo para:

  • Definir os detalhes de autenticação
  • Acessar o repositório do Assets as a Cloud Service
  • Configurar as propriedades de exibição do Seletor de ativos

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

  • Está integrando um aplicativo Adobe no Unified Shell.
  • Você já tem um token IMS gerado para autenticação.

Pré-requisitos

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:

  • imsOrg
  • imsToken
  • apikey

Instalação

Os Seletores de ativos estão disponíveis por meio das versões CDN (por exemplo, esm.sh/Skypack) e UMD do ESM.

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'

Tipo de ativo selecionado

O Tipo de ativo selecionado é uma matriz de objetos que contém as informações do ativo ao usar as funções handleSelection, handleAssetSelection, e onDrop.

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

A tabela a seguir descreve algumas das propriedades importantes do objeto de ativo selecionado.

Propriedade Tipo Explicação
repo:repositoryId string Identificador exclusivo do repositório onde o ativo está armazenado.
repo:id string Identificador exclusivo do ativo.
repo:assetClass string A classificação do ativo (por exemplo, imagem, vídeo ou documento).
repo:name string O nome do ativo, incluindo a extensão de arquivo.
repo:size número O tamanho do ativo em bytes.
repo:path string O local do ativo no repositório.
repo:ancestors Array<string> Uma matriz de itens ancestrais do ativo no repositório.
repo:state string Estado atual do ativo no repositório (Por exemplo, ativo, excluído etc.).
repo:createdBy string O usuário ou sistema que criou o ativo.
repo:createDate string A data e a hora em que o ativo foi criado.
repo:modifiedBy string O usuário ou sistema que modificou o ativo pela última vez.
repo:modifyDate string A data e a hora em que o ativo foi modificado pela última vez.
dc:format string O formato do ativo, como o tipo de arquivo (por exemplo, JPEG, PNG etc.).
tiff:imageWidth número A largura de um ativo.
tiff:imageLength número A altura de um ativo.
computedMetadata Record<string, any> Um objeto que representa um compartimento para todos os metadados do ativo de todos os tipos (repositório, aplicativo ou metadados incorporados).
_links Record<string, any> Links de hipermídia do ativo associado. Inclui links para recursos como metadados e representações.
_links.http://ns.adobe.com/adobecloud/rel/rendition Array<Object> Matriz de objetos que contém informações sobre representações do ativo.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].href string O URI da representação.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].type string O tipo MIME da representação.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].'repo:size' número O tamanho da representação em bytes.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].width número A largura da representação.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].height número A altura da representação.

Para obter uma lista completa das propriedades e um exemplo detalhado, acesse Exemplo de código do seletor de ativos.

Exemplo para o fluxo não SUSI

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

Inclua o pacote do Seletor de ativos no código usando o script tag, conforme mostrado em linhas 6-15 do exemplo abaixo. Depois que o script for carregado, a variável global PureJSSelectors estará disponível para uso. Definir o Seletor de ativos 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 ativos, chame a função renderAssetSelector como mencionado na linha 17. O Seletor de ativos é exibido no elemento de container <div>, conforme mostrado nas linhas 21 e 22.

Seguindo essas etapas, é possível usar o Seletor de ativos com um fluxo não SUSI no aplicativo 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 obter um exemplo detalhado, acesse Exemplo de código do seletor de ativos.

Usar propriedades do Seletor de ativos

Você pode usar as propriedades do Seletor de ativos para personalizar a forma como o Seletor de ativos é renderizado. A tabela a seguir lista as propriedades que você pode usar para personalizar e usar o Seletor de ativos.

Propriedade Tipo Obrigatório Padrão Descrição
painel booleano Não falso Se marcado true, o Seletor de ativos é renderizado em uma exibição do painel à esquerda. Se estiver marcado false, o Seletor de ativos é renderizado na exibição modal.
imsOrg string Sim A ID do Adobe Identity Management System (IMS) atribuída durante o provisionamento do Adobe Experience Manager as a Cloud Service para sua organização. A variável imsOrg A chave é necessária para autenticar se a organização que você está acessando está no Adobe IMS ou não.
imsToken string Não Token de portador IMS usado para autenticação. O imsToken é obrigatório se você estiver usando o fluxo não SUSI.
apiKey string Não Chave de API usada para acessar o serviço de Descoberta do AEM. O apiKey é obrigatório se você estiver usando o fluxo não SUSI.
rootPath string Não /content/dam/ Caminho da pasta na qual o Seletor de ativos exibe seus ativos. O rootPath também pode ser usado na forma de encapsulamento. Por exemplo, dado o seguinte caminho, /content/dam/marketing/subfolder/, o Seletor de ativos não permite que você navegue por qualquer pasta principal, mas exibe apenas as pastas secundárias.
caminho string Não Caminho usado para navegar para um diretório específico de ativos quando o Seletor de ativos é renderizado.
filterSchema matriz Não Modelo usado para configurar propriedades de filtro. Isso é útil quando quiser limitar determinadas opções de filtro no Seletor de ativos.
filterFormProps Objeto Não Especifique as propriedades de filtro que precisam ser usadas para refinar sua pesquisa. Por exemplo, tipo MIME JPG, PNG, GIF.
selectedAssets Matriz <Object> Não Especifique os ativos selecionados quando o Seletor de ativos for renderizado. É necessária uma matriz de objetos que contenha uma propriedade de id dos ativos. Por exemplo, [{id: 'urn:234}, {id: 'urn:555'}] Um ativo deve estar disponível no diretório atual. Se precisar usar um diretório diferente, forneça um valor para a propriedade path também.
acvConfig Objeto Não A propriedade Exibição da coleção de ativos que contém o objeto com a configuração personalizada para substituir os padrões.
i18nSymbols Object<{ id?: string, defaultMessage?: string, description?: string}> Não Se as traduções prontas para uso forem insuficientes para as necessidades do aplicativo, é possível expor uma interface pela qual poderá passar seus próprios valores localizados personalizados pela propriedade i18nSymbols. Transmitir um valor por meio dessa interface substitui as traduções padrão fornecidas e usará suas próprias traduções. Para executar a substituição, deverá transmitir um objeto Descritor de mensagem à chave de i18nSymbols que deseja substituir.
intl Objeto Não O Seletor de ativos fornece traduções padrão prontas para uso. Você pode selecionar o idioma de tradução fornecendo uma string de idioma válida por meio da propriedade intl.locale. Por exemplo: intl={{ locale: "es-es" }}

As strings de idioma com suporte seguem os padrões ISO 639 - Códigos para a representação de nomes de idiomas.

Lista de idiomas com suporte: Inglês - “en-us” (padrão) Espanhol - “es-es” Alemão - “de-de” Francês - “fr-fr” Italiano - “it-it” Japonês - “ja-jp” Coreano - “ko-kr” Português - “pt-br” Chinês (Tradicional) - “zh-cn” Chinês (Taiwan) - “zh-tw”
repositoryId string Não '' Repositório de onde o Seletor de ativos carrega o conteúdo.
additionalAemSolutions Array<string> Não [ ] Ela permite adicionar uma lista de repositórios AEM adicionais. Se nenhuma informação for fornecida nessa propriedade, somente a biblioteca de mídia ou os repositórios do AEM Assets serão considerados.
hideTreeNav booleano Não Especifica se deve mostrar ou ocultar a barra lateral de navegação da árvore de ativos. Usada apenas na exibição modal e, portanto, não há efeito dessa propriedade na exibição de painel.
onDrop Função Não A propriedade permite a funcionalidade soltar de um ativo.
dropOptions {allowList?: Object} Não Configura as opções de soltar usando “allowList”.
colorScheme string Não Configure o tema (light ou dark) do Seletor de ativos.
handleSelection Função Não Chamado com a matriz de itens do ativo quando os ativos são selecionados e o botão Select no modal é clicado. Essa função só é invocada na exibição modal. Para exibição do painel, use as funções handleAssetSelection ou onDrop. Exemplo:
handleSelection=(assets: Asset[])=> {…}
Consulte Tipo de ativo selecionado para obter detalhes.
handleAssetSelection Função Não Invocado com uma matriz de itens enquanto os ativos estão sendo selecionados ou desmarcados. É útil quando você deseja acompanhar os ativos à medida que o usuário os seleciona. Exemplo:
handleSelection=(assets: Asset[])=> {…}
Consulte Tipo de ativo selecionado para obter detalhes.
onClose Função Não Invocado quando o botão Close na exibição modal é pressionado. Somente é chamado na exibição modal e desconsiderado na exibição rail.
onFilterSubmit Função Não Invocado com itens de filtro à medida que o usuário altera critérios de filtro diferentes.
selectionType string Não individual Configuração para a seleção single ou multiple de ativos de cada vez.

Exemplos de uso das propriedades do Seletor de ativos

É possível definir as propriedades do Seletor de ativos no arquivo index.html para personalizar a exibição do Seletor de ativos no aplicativo.

Exemplo 1: Seletor de ativos na exibição do painel

rail-view-example

Se o valor do Seletor de ativos rail estiver definido como false ou não for mencionado nas propriedades, o Seletor de ativos aparecerá na exibição modal por padrão.

Exemplo 2: popover de metadados

Use várias propriedades para definir os metadados de um ativo que deseja visualizar usando um ícone de informações. O popover de informações fornece a coleção de informações sobre o ativo ou a pasta, incluindo título, dimensões, data de modificação, local e descrição de um ativo. No exemplo abaixo, várias propriedades são usadas para exibir metadados de um ativo, por exemplo, a propriedade repo:path especifica o local de um ativo.

metadata-popover-example

Exemplo 3: propriedade de filtro personalizado na exibição do painel

Além da pesquisa facetada, o Seletor de ativos permite personalizar vários atributos para refinar a pesquisa no Adobe Experience Manager as a Cloud Service aplicação. É necessário adicionar o código a seguir para acrescentar filtros de pesquisa personalizados em seu aplicativo. No exemplo abaixo, a pesquisa Type Filter que filtra o tipo de ativo entre Imagens, Documentos ou Vídeos ou o tipo de filtro adicionado para a pesquisa.

custom-filter-example-vanilla

Lidar com a seleção de ativos usando o esquema de objeto

A propriedade handleSelection é usada para lidar com seleções únicas ou múltiplas de ativos no Seletor de ativos. O exemplo abaixo declara a sintaxe de uso de handleSelection.

handle-selection

Utilização do Seletor de ativos

Depois que o Seletor de ativos estiver configurado e você for autenticado para usar o Seletor de ativos com o aplicativo Adobe Experience Manager as a Cloud Service, você poderá selecionar ativos ou executar várias outras operações para pesquisar seus ativos no repositório.

using-asset-selector

Ocultar/Mostrar painel

Para ocultar pastas na navegação à esquerda, clique no ícone Ocultar pastas. Para desfazer as alterações, clique no ícone Ocultar pastas novamente.

Alternador de repositório

O Seletor de ativos também permite alternar repositórios para seleção de ativos. Você pode selecionar o repositório de sua escolha no menu suspenso disponível no painel esquerdo. As opções de repositório disponíveis na lista suspensa se baseiam na propriedade repositoryId definida no arquivo index.html. Tem como base os ambientes da organização IMS selecionada que são acessados pelo usuário conectado. Os consumidores podem transmitir um repositoryID de sua preferência e, nesse caso, o Seletor de ativos interrompe a renderização do alternador de repositório e renderiza ativos somente do repositório especificado.

Repositório de ativos

É uma coleção de pastas de ativos que você pode usar para executar operações.

Filtros prontos para uso

O Seletor de ativos também fornece opções de filtro prontas para uso para refinar os resultados da pesquisa. Os filtros disponíveis são os seguintes:

  • File type: inclui pasta, arquivo, imagens, documentos ou vídeo

  • MIME type: inclui JPG, GIF, PPTX, PNG, MP4, DOCX, TIFF, PDF, XLSX

  • Image Size: inclui largura mínima/máxima, altura mínima/máxima da imagem

    rail-view-example

Pesquisa personalizada

Além da pesquisa de texto completo, o Seletor de ativo permite pesquisar ativos em arquivos usando a pesquisa personalizada. Você pode usar filtros de pesquisa personalizados nos modos de exibição Modal e Painel.

custom-search

Também é possível criar um filtro de pesquisa padrão para salvar os campos que você pesquisa com frequência e usá-los depois. Para criar uma pesquisa personalizada para seus ativos, você pode usar a propriedade filterSchema.

O Seletor de ativos 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

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

Tipos de visualização

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

  • exibição em lista Exibição em lista: a exibição em lista exibe arquivos e pastas roláveis em uma única coluna.
  • exibição em grade Exibição em grade: a exibição em grade exibe arquivos e pastas roláveis em uma grade de linhas e colunas.
  • exibição em galeria Exibição em galeria: a exibição em galeria exibe arquivos ou pastas em uma lista horizontal com bloqueio central.
  • exibição em cascata Exibição em cascata: a exibição em cascata exibe arquivos ou pastas no formato de uma ponte.

Nesta página