Seletor de ativos de micro front-end Overview
O Seletor de ativos de micro front-end fornece uma interface do usuário que se integra facilmente ao repositório Experience Manager Assets 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.
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.
Pré-requisitos prereqs
Você deve garantir os seguintes métodos de comunicação:
- O aplicativo está sendo executado em HTTPS.
- O URL do aplicativo está na lista de permissões de URLs de redirecionamento do cliente IMS.
- O fluxo de logon do IMS é configurado e renderizado usando um pop-up no navegador da Web. Portanto, os pop-ups devem ser ativados ou permitidos no navegador de destino.
Use os pré-requisitos acima se você precisar de um fluxo de trabalho de autenticação IMS do Seletor de ativos. Como alternativa, se você já estiver autenticado com o fluxo de trabalho do IMS, é possível adicionar as informações do IMS.
- Nomes de domínio em que o aplicativo de integração está hospedado.
- Após o provisionamento, sua organização receberá
imsClientId
,imsScope
e umredirectUrl
correspondentes aos ambientes solicitados que são essenciais para a configuração do Seletor de ativos. Sem essas propriedades válidas, não é possível executar as etapas de instalação.
Instalação installation
O Seletor de ativos está disponível por meio da CDN do ESM (por exemplo, esm.sh/skypack) e da versão UMD.
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'
Integrar o Seletor de ativos usando o Vanilla JS integration-using-vanilla-js
É possível integrar qualquer aplicativo Adobe ou não-Adobe ao repositório Experience Manager Assets e selecionar ativos no aplicativo. Consulte Integração do Seletor de ativos com vários aplicativos.
A integração é feita importando o pacote do Seletor de ativos e conectando ao Assets as a Cloud Service usando a biblioteca JavaScript Vanilla. Edite 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.
Integrar o Seletor de ativos a vários aplicativos asset-selector-integration-with-apps
É possível integrar o Seletor de ativos a vários aplicativos, como:
Pré-requisitos prereqs-adobe-app
Use os seguintes pré-requisitos se estiver integrando o Seletor de ativos a um aplicativo do Adobe:
- Métodos de comunicação
- imsOrg
- imsToken
- apikey
Integrar o Seletor de ativos a um aplicativo do Adobe adobe-app-integration-vanilla
O exemplo a seguir demonstra o uso do Seletor de Ativos ao executar um aplicativo Adobe no Unified Shell ou quando você já gerou imsToken
para autenticação.
Inclua o pacote do Seletor de ativos no código usando a marca script
, como mostrado nas linhas 6-15 do exemplo abaixo. Depois que o script for carregado, a variável global PureJSSelectors
estará disponível para uso. Defina o Seletor de ativos propriedades conforme mostrado em linhas 16-23. As propriedades imsOrg
e imsToken
são necessárias para autenticação no aplicativo Adobe. 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, você pode usar o Seletor de ativos com seu aplicativo Adobe.
code language-html line-numbers |
---|
|
accordion | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ImsAuthProps | ||||||||||||||||||||
As propriedades
|
accordion | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ImsAuthService | ||||||||||||||
A classe
|
accordion | ||
---|---|---|
Validação com o token IMS fornecido | ||
|
accordion | ||
---|---|---|
Registrar retornos de chamada para o serviço IMS | ||
|
Pré-requisitos prereqs-non-adobe-app
Use os seguintes pré-requisitos se estiver integrando o Seletor de ativos a um aplicativo não-Adobe:
- Métodos de comunicação
- imsClientId
- imsScope
- redirectUrl
- imsOrg
- apikey
O Seletor de ativos oferece suporte à autenticação para o repositório Experience Manager Assets usando propriedades do Sistema Identity Management (IMS) como imsScope
ou imsClientID
quando você o integra com um aplicativo que não seja Adobe.
accordion |
---|
Configurar o Seletor de Ativos para um aplicativo não-Adobe |
Para configurar o Seletor de ativos para um aplicativo não-Adobe, primeiro registre um tíquete de suporte para provisionamento, seguido das etapas de integração. Registrando um tíquete de suporte
|
accordion | ||
---|---|---|
Etapas de integração | ||
Use este exemplo de arquivo Acesse o pacote do Seletor de ativos usando a Marca A Linha 14 a linha 38 do exemplo descreve as propriedades do fluxo IMS, como Como você não tem um Defina a autenticação e outras propriedades relacionadas ao as a Cloud Service do Assets na seção A variável global O Seletor de ativos é renderizado no elemento de contêiner
|
accordion | |||
---|---|---|---|
Não é possível acessar o repositório de entrega | |||
|
Pré-requisitos prereqs-polaris
Use os seguintes pré-requisitos se estiver integrando o Seletor de ativos ao Dynamic Media com recursos OpenAPI:
-
Para acessar o Dynamic Media com recursos OpenAPI, você deve ter licenças para:
- Repositório do Assets (por exemplo, Experience Manager Assets as a Cloud Service).
- AEM Dynamic Media.
-
Somente ativos aprovados estão disponíveis para uso, garantindo a consistência da marca.
Integração do Dynamic Media com recursos OpenAPI adobe-app-integration-polaris
A integração do Seletor de ativos com o processo OpenAPI do Dynamic Media envolve várias etapas que incluem a criação de um URL de mídia dinâmica personalizado ou pronto para escolher o URL de mídia dinâmica etc.
accordion | ||
---|---|---|
Integrar o Seletor de ativos para Dynamic Media com recursos OpenAPI | ||
As propriedades
Essa configuração permite visualizar todos os ativos aprovados sem pastas ou como uma estrutura simples. Para obter mais informações, navegue até a propriedade |
accordion | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Criar uma URL de Entrega Dinâmica a partir de ativos aprovados | ||||||||||||||||
Depois de configurar o Seletor de ativos, um esquema de objetos será usado para criar um URL de entrega dinâmico dos ativos selecionados.
Todos os ativos selecionados são carregados pela função
Especificação da API de entrega de ativos aprovada Formato de URL: Onde,
API de entrega de ativos aprovada O URL do delivery dinâmico possui a seguinte sintaxe:
|
accordion | |||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Pronto para escolher a URL de entrega dinâmica | |||||||||||||||||||
Todos os ativos selecionados são carregados pela função
Abaixo estão duas maneiras de percorrer o objeto JSON:
Na captura de tela acima, o URL de entrega da representação original do PDF precisa ser incorporado à experiência do público-alvo se o PDF for necessário, e não sua miniatura. Por exemplo,
|
accordion |
---|
Configurar filtros personalizados |
O Seletor de ativos para Dynamic Media com recursos OpenAPI permite configurar propriedades personalizadas e filtros com base nelas. A propriedade
Para a configuração, as propriedades definidas no nível Por exemplo, no Seletor de ativos para Dynamic Media com recursos OpenAPI, uma propriedade em Para obter o nome, é necessário realizar uma atividade única. Faça uma chamada de API de pesquisa para o ativo e obtenha o nome da propriedade (o bucket, essencialmente). |
Propriedades do Seletor de ativos asset-selector-properties
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.
true
, o Seletor de ativos será renderizado em um modo de exibição de painel esquerdo. Se estiver marcado como false
, o Seletor de ativos será renderizado na exibição modal.imsOrg
é necessária para autenticar se a organização que você está acessando está no Adobe IMS ou não.imsToken
é necessário se você estiver usando um aplicativo Adobe para a integração.apiKey
é necessário se você estiver usando uma integração de aplicativos Adobe.<Object>
[{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.rail
para habilitar a exibição do painel do visualizador de ativos.Object<{ id?: string, defaultMessage?: string, description?: string}>
i18nSymbols
. Transmitir um valor por meio dessa interface substitui as traduções padrão fornecidas e, em vez disso, usa suas próprias traduções. Para executar a substituição, deverá transmitir um objeto Descritor de mensagem à chave de i18nSymbols
que deseja substituir.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”
Array<string>
{allowList?: Object}
light
ou dark
) do Seletor de ativos.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.
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.
Close
na exibição modal é pressionado. Somente é chamado na exibição modal
e desconsiderado na exibição rail
.single
ou multiple
de ativos de cada vez.:
aemTierType:[0]: "author" 1: "delivery"
Por exemplo, se ambos
["author","delivery"]
forem usados, o alternador de repositório exibirá opções para o autor e para a entrega.filterRepoList
que chama o repositório de Experience Manager e retorna uma lista filtrada de repositórios.EXPIRED
, EXPIRING_SOON
ou NOT_EXPIRED
com base na data de expiração de um ativo fornecido. Consulte personalizar ativos expirados. Além disso, você pode usar allowSelectionAndDrag, no qual o valor da função pode ser true
ou false
. Quando o valor é definido como false
, o ativo expirado não pode ser selecionado ou arrastado na tela.Exemplos de uso das propriedades do Seletor de ativos usage-examples
É 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
Se o valor do AssetSelector rail
estiver definido como false
ou não for mencionado nas propriedades, o Seletor de ativos é exibido na exibição Modal por padrão. A propriedade acvConfig
permite algumas configurações detalhadas, como Arrastar e Soltar. Visite habilitar ou desabilitar a ação de arrastar e soltar para entender o uso da propriedade acvConfig
.
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.
Exemplo 3: propriedade de filtro personalizado na exibição do painel
Além da pesquisa facetada, o Seletor de Assets permite personalizar vários atributos para refinar sua pesquisa do Adobe Experience Manager como um aplicativo do Cloud Service. Adicione o código a seguir para adicionar 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.
Trechos de código de configuração funcional code-snippets
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 para acessar o repositório Experience Manager Assets. Depois de concluído, você pode adicionar trechos de código de acordo com sua exigência.
Personalizar painel de filtro customize-filter-panel
Você pode adicionar o seguinte trecho de código no objeto assetSelectorProps
para personalizar o painel de filtro:
filterSchema: [
{
header: 'File Type',
groupKey: 'TopGroup',
fields: [
{
element: 'checkbox',
name: 'type',
options: [
{
label: 'Images',
value: '<comma separated mimetypes, without space, that denote all images, for e.g., image/>',
},
{
label: 'Videos',
value: '<comma separated mimetypes, without space, that denote all videos for e.g., video/,model/vnd.mts,application/mxf>'
}
]
}
]
},
{
fields: [
{
element: 'checkbox',
name: 'type',
options: [
{ label: 'JPG', value: 'image/jpeg' },
{ label: 'PNG', value: 'image/png' },
{ label: 'TIFF', value: 'image/tiff' },
{ label: 'GIF', value: 'image/gif' },
{ label: 'MP4', value: 'video/mp4' }
],
columns: 3,
},
],
header: 'Mime Types',
groupKey: 'MimeTypeGroup',
}},
{
fields: [
{
element: 'checkbox',
name: 'property=metadata.application.xcm:keywords.value',
options: [
{ label: 'Fruits', value: 'fruits' },
{ label: 'Vegetables', value: 'vegetables'}
],
columns: 3,
},
],
header: 'Food Category',
groupKey: 'FoodCategoryGroup',
}
],
Personalizar informações na exibição modal customize-info-in-modal-view
Você pode personalizar a exibição detalhada de um ativo ao clicar no ícone . Execute o código abaixo:
// Create an object infoPopoverMap and set the property `infoPopoverMap` with it in assetSelectorProps
const infoPopoverMap = (map) => {
// for example, to skip `path` from the info popover view
let defaultPopoverData = PureJSSelectors.getDefaultInfoPopoverData(map);
return defaultPopoverData.filter((i) => i.label !== 'Path'
};
assetSelectorProps.infoPopoverMap = infoPopoverMap;
Ativar ou desativar o modo arrastar e soltar enable-disable-drag-and-drop
Adicione as seguintes propriedades a assetSelectorProp
para habilitar o modo arrastar e soltar. Para desabilitar arrastar e soltar, substitua o parâmetro true
por false
.
rail: true,
acvConfig: {
dragOptions: {
allowList: {
'*': true,
},
},
selectionType: 'multiple'
}
// the drop handler to be implemented
function drop(e) {
e.preventDefault();
// following helps you get the selected assets – an array of objects.
const data = JSON.parse(e.dataTransfer.getData('collectionviewdata'));
}
Seleção do Assets selection-of-assets
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
.
Execute as seguintes etapas para configurar a seleção de um ou vários ativos:
acvConfig: {
selectionType: 'multiple' // 'single' for single selection
}
// the `handleSelection` callback, always gets you the array of selected assets
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: {
'https://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.
Array<string>
Record<string, any>
Record<string, any>
Array<Object>
Personalizar ativos expirados customize-expired-assets
O Seletor de ativos permite controlar o uso de um ativo expirado. Você pode personalizar o ativo expirado com um selo Expirando em breve que pode ajudá-lo a saber com antecedência sobre os ativos que expirarão em 30 dias a partir da data atual. Além disso, isso pode ser personalizado de acordo com a exigência. Você também pode permitir a seleção de um ativo expirado na tela ou vice-versa. A personalização de um ativo expirado pode ser feita usando alguns snippets de código de várias maneiras:
expiryOptions: {
getExpiryStatus: getExpiryStatus;
}
Seleção de um ativo expirado selection-of-expired-asset
Você pode personalizar o uso de um ativo expirado para torná-lo selecionável ou não selecionável. É possível personalizar se deseja permitir ou não o arrastar e soltar de um ativo expirado na tela Seletor de ativos. Para fazer isso, use os seguintes parâmetros para tornar um ativo não selecionável na tela:
expiryOptions:{
allowSelectionAndDrop: false;
}
Configuração da duração de um ativo expirado set-duration-of-expired-asset
O trecho de código a seguir ajuda a definir o selo Expirando em Breve para os ativos que expiram nos próximos cinco dias:
/**
const getExpiryStatus = async (asset) => {
if (!asset.expirationDate) {
return null;
}
const currentDate = new Date();
const millisecondsInDay = 1000 * 60 * 60 * 24;
const fiveDaysFromNow = new Date(value: currentDate.getTime() + 5 * millisecondsInDay);
const expirationDate = new Date(asset.expirationDate);
if (expirationDate.getTime() < currentDate.getTime()) {
return 'EXPIRED';
} else if (expirationDate.getTime() < fiveDaysFromNow.getTime()) {
return 'EXPIRING_SOON';
} else {
return 'NOT_EXPIRED';
}
};
Consulte o exemplo a seguir para entender como a propriedade funciona para buscar a data e hora atuais:
const currentData = new Date();
currentData.getTime(),
retorna 1718779013959
que é o formato de data 2024-06-19T06:36:53.959Z.
Personalizar mensagem em caixa de informações de um ativo expirado customize-toast-message
A propriedade showToast
é usada para personalizar a mensagem do sistema que você deseja mostrar em um ativo expirado.
Sintaxe:
{
type: 'ERROR', 'NEUTRAL', 'INFO', 'SUCCESS',
message: '<message to be shown>',
timeout: optional,
}
O tempo limite padrão é de 500 milissegundos. Ao passo que, você pode modificá-lo de acordo com o requisito. Além disso, passar o valor timeout: 0
mantém a janela aberta até que você clique no botão cruzado.
Veja abaixo um exemplo para mostrar uma mensagem em caixa de informações quando é necessário proibir a seleção de uma pasta e mostrar uma mensagem correspondente:
const showToast = {
type: 'ERROR',
message: 'Folder cannot be selected',
timeout: 5000,
}
Use o seguinte trecho de código para mostrar uma mensagem do sistema para o uso de um ativo expirado:
Filtro de invocação contextual contextual-invocation-filter
O Seletor de ativos permite adicionar um filtro seletor de tags. Ela é compatível com um grupo de tags que combina todas as tags relevantes a um grupo de tags específico. Além disso, permite selecionar tags adicionais correspondentes ao ativo que você está procurando. Além disso, você também pode definir os grupos de tags padrão no filtro de chamada contextual que são usados principalmente por você para que sejam acessíveis a você em qualquer lugar.
- É necessário adicionar um trecho de código de invocação contextual para ativar o filtro de marcação na pesquisa.
- É obrigatório usar a propriedade de nome correspondente ao tipo de grupo de marcas
(property=xcm:keywords.id=)
.
Sintaxe:
const filterSchema=useMemo(() => {
return: [
{
element: 'taggroup',
name: 'property=xcm:keywords.id='
},
];
}, []);
Para adicionar grupos de tags no painel Filtros, é obrigatório adicionar pelo menos um grupo de tags como padrão. Além disso, use o trecho de código abaixo para adicionar as tags padrão pré-selecionadas do grupo de tags.
export const WithAssetTags = (props) = {
const [selectedTags, setSelectedTags] = useState (
new Set(['orientation', 'color', 'facebook', 'experience-fragments:', 'dam', 'monochrome'])
const handleSelectTags = (selected) => {
setSelectedTags (new Set (selected)) ;
};
const filterSchema = useMemo ((); => {
return {
schema: [
{
fields: [
{
element: 'checkbox',
name: 'property=xcm:keywords=',
defaultValue: Array. from(selectedTags),
options: assetTags,
orientation: 'vertical',
},
],
header: 'Asset Tags',
groupkey: 'AssetTagsGroup',
],
},
};
}, [selectedTags]);
Lidar com a seleção de ativos usando o esquema de objeto handling-selection
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
.
Desabilitação da seleção de Assets disable-selection
Desativar seleção é usado para ocultar ou desativar a seleção de ativos ou pastas. Ela oculta a caixa de seleção de seleção do cartão ou ativo, impedindo-o de ser selecionado. Para usar esse recurso, você pode declarar a posição de um ativo ou pasta que deseja desativar em uma matriz. Por exemplo, se você quiser desativar a seleção de uma pasta que aparece na primeira posição, poderá adicionar o seguinte código:disableSelection: [0]:folder
Você pode fornecer à matriz uma lista de tipos MIME (como imagem, pasta, arquivo ou outros tipos MIME, por exemplo, image/jpeg) que deseja desativar. Os tipos MIME declarados são mapeados em data-card-type
e data-card-mimetype
atributos de um ativo.
Além disso, o Assets com seleção desativada é arrastável. Para desabilitar a ação de arrastar e soltar um tipo de ativo específico, você pode usar a propriedade dragOptions.allowList
.
A sintaxe de desabilitar seleção é a seguinte:
(args)=> {
return(
<ASDialogWrapper
{...args}
disableSelection={args.disableSelection}
handleAssetSelection={action('handleAssetSelection')}
handleSelection={action('handleSelection')}
selectionType={args.selectionType}
/>
);
}
Utilização do Seletor de ativos using-asset-selector
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.
Ocultar/Mostrar painel hide-show-panel
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 repository-switcher
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
. Ela se baseia no ambiente da organização IMS selecionada que é acessado 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 filters
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:
-
Status: inclui o estado atual do ativo entre
all
,approved
,rejected
ouno status
. -
Tipo de arquivo: inclui
folder
,file
,images
,documents
ouvideo
. -
Status de expiração: menciona os ativos com base em sua duração de expiração. Você pode marcar a caixa de seleção
Expired
para filtrar ativos que expiraram ou definirExpiration Duration
de um ativo para exibir ativos com base em sua duração de expiração. Quando um ativo já expirou ou está prestes a expirar, um selo é exibido representando o mesmo. Além disso, você pode controlar se deseja permitir o uso (ou arrastar e soltar) de um ativo expirado. Veja mais sobre personalizar ativos expirados. Por padrão, o selo Expirando em breve é exibido para ativos que expiram nos próximos 30 dias. No entanto, você pode configurar a expiração usando a propriedadeexpirationDate
.note tip TIP Para visualizar ou filtrar ativos com base em suas datas de expiração futuras, mencione o intervalo de datas futuro no campo Expiration Duration
. Ele exibe os ativos com o selo expirando em breve neles. -
Tipo MIME: inclui
JPG
,GIF
,PPTX
,PNG
,MP4
,DOCX
,TIFF
,PDF
,XLSX
. -
Tamanho da Imagem: inclui largura mínima/máxima, altura mínima/máxima da imagem.
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.
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
.
Barra de pesquisa search-bar
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 sorting
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 types-of-view
O Seletor de ativos permite exibir o ativo em quatro exibições diferentes:
- A exibição de lista exibe arquivos e pastas roláveis em uma única coluna.
- A exibição de grade exibe arquivos e pastas com rolagem em uma grade de linhas e colunas.
- A exibição de galeria exibe arquivos ou pastas em uma lista horizontal bloqueada no centro.
- A exibição em cascata exibe arquivos ou pastas no formato de uma Bridge.