Configurar layouts de colunas, cores e definições de dados em uma visualização - Amazon Connect

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Configurar layouts de colunas, cores e definições de dados em uma visualização

Este tópico explica como configurar layouts de colunas, cores e campos de dados dinâmicos no construtor de interface de usuário do Amazon Connect para personalizar visualizações para agentes da central de atendimento.

No construtor de interface do usuário, o painel Personalizar está localizado no lado direito, conforme mostrado na imagem a seguir.

Um exemplo do painel Personalizar no criador de interface do usuário, o ícone de configurações globais.

Use o painel Personalizar para definir:

  • Configurações globais para todo o recurso de visualização.

  • Configurações locais no nível do componente. Cada componente tem seu próprio conjunto de propriedades.

Use o painel Personalizar para definir uma variedade de configurações para a visualização, incluindo:

  • Layouts de colunas

  • Cores

  • Mapeamento dinâmico de dados

  • Dados de exemplo

  • Definições de dados estáticos

Configurar layouts e cores globais para uma visualização

Para definir configurações globais, navegue até o painel Personalizar e escolha o ícone de configurações globais, conforme mostrado na imagem a seguir.

O painel Personalizar e o ícone de configurações globais.

Use as configurações globais para definir o layout e as cores gerais da sua visualização:

  • Use a seção Alinhamento para especificar a localização relativa dos componentes à esquerda, no centro ou à direita da visualização.

  • Escolha três campos de cores:

    • Cor primária

    • Cor secundária

    • Cor neutra

Cada componente na visualização aplica essas configurações por padrão. No entanto, ao personalizar um componente, você pode substituir essas configurações globais de cores.

Colunas de layout

O recurso de exibição usa um padrão flexbox com 12 colunas. Os componentes ocupam uma posição relativa entre si. Eles não são colocados na tela de maneira perfeita em termos de pixels. Isso permite que a visualização seja ampliada ou reduzida de forma responsiva, sem perder a composição da visualização.

Nas configurações globais, você pode determinar como deseja agrupar as colunas. Por exemplo, na seção Coluna, você pode dividir a visualização em duas seções de seis colunas cada, conforme mostrado na imagem a seguir.

Uma seção Coluna, dividida em duas seções de seis colunas cada.

A imagem a seguir mostra um exemplo de como esse layout seria exibido para um atendente.

Uma visualização dividida em duas seções de seis colunas, conforme apareceria para um atendente.

Você também pode usar o controle deslizante Personalizar para alterar as proporções desses agrupamentos. Por exemplo, você pode defini-lo para que o lado esquerdo da visualização tenha quatro colunas e o lado direito tenha oito, conforme mostrado na imagem a seguir:

Um layout com quatro colunas em um lado e oito no outro.

A imagem a seguir mostra um exemplo de como esse layout seria exibido para o usuário.

Uma visualização de quatro colunas de um lado e oito do outro, conforme apareceria para um atendente.