You are viewing the Portuguese (Brazil) site, but your language preference is set to English. Switch to English site →

Menu

Filtros de exibição avançada de equipe

Os filtros de exibição de equipe permitem que os supervisores pesquisem ou filtrem os agentes por nome ou atividade. Você também pode usar critérios de filtro personalizados definidos programaticamente, como equipes ou habilidades. Esta página descreve os principais conceitos envolvidos na personalização dos Filtros de exibição de equipe e inclui alguns exemplos de código para você começar a usar o recurso. Para obter mais informações sobre o uso de Filtros de exibição de equipe, consulte o Guia do usuário final!

Esse recurso está no piloto e requer a versão 1.18 ou posterior do Flex UI (IU do Flex). Você pode ativar os filtros de exibição de equipe na página de recursos de pré‐lançamento no Flex Admin.

Principais conceitos

O Flex usa os seguintes objetos e componentes para gerar filtros de exibição de equipe:

TeamFiltersPanel

A parte do Flex UI (IU do Flex) que exibe os filtros de equipe. É um componente secundário da IU do supervisor. Por padrão, o Flex permite filtrar por atividade do agente, mas você pode adicionar filtros personalizados ao painel modificando os defaultProps, desta forma:

Flex.TeamsView.defaultProps.filters = [
    Flex.TeamsView.activitiesFilter,
    // ... custom filters here
];

FilterDefinition

FilterDefinition é uma estrutura que informa ao Flex como renderizar a nova etiqueta e campo do filtro e com o que consultar o valor do campo. Cada campo adicionará uma nova condição à Consulta de sincronização que renderizará a lista de agentes (ou funcionários) para a IU. Um FilterDefinition tem a seguinte estrutura:

interface FilterDefinition {
   id: string;
   title: React.ReactChild;
   fieldName: string;
   type?: FiltersListItemType;
   options?: Array;
   customStructure?: CustomFilterItemStructure;
   condition?: string;
}
Campo Descrição
id

Obrigatório. Uma string que representa o assunto da consulta. Isso identifica os valores a serem filtrados no estado do app Flex com base no atributo ou campo especificado. Por exemplo, "data.attributes.full_name" ou "data.activity_name".

title Obrigatório. Uma string que é renderizada como o nome de exibição do filtro no painel lateral Filters (Filtros). Por exemplo, "Names".
fieldName

Obrigatório. Uma string que representa o nome de entrada passado para os filtros predefinidos. Por exemplo, "full_name".

tipo Obrigatório se customStructure não estiver definido. Atualmente suporta apenas "multiValue". Isso renderiza uma lista de caixas de seleção para cada opção fornecida.
options Obrigatório se o tipo for "multiValue". Uma matriz de opções de definição de filtro usada para renderizar os campos de caixa de seleção, os valores, as etiquetas e se são selecionados por padrão.
customStructure Obrigatório se type não estiver definido. Um objeto do tipo CustomFilterItemStructure usado para renderizar campos personalizados. Isso permite adicionar os próprios campos personalizados.
condition

Um parâmetro opcional que representa o operador de comparação de consultas, como IN, NOT_IN CONTAINS. Consulte Operadores de consulta para saber mais sobre outros valores de condição possíveis.

Isso representa a condição a ser usada na criação da consulta. Por exemplo, data.activity_name IN ["available"] ou data.attributes.full_name CONTAINS "John". No último exemplo, "data.attributes.full_name" é a id, "CONTAINS" é a condition e "John" é o valor a ser filtrado.

FilterDefinitionOption

Descreve as opções disponíveis que podem ser usadas como um filtro. Por exemplo, se você quiser filtrar por idiomas de agente, poderá criar uma opção para cada idioma falado no contact center.

interface FilterDefinitionOption {
   value: string;
   label: string;
   default?: boolean;
}
Campo Descrição
value

Valor da opção de filtro.

rótulo Nome fácil da opção.
padrão Um valor booleano que indica se a opção de filtro deve ser selecionada por padrão.

CustomFilterItemStructure

Para adicionar um campo e uma etiqueta personalizados a um filtro, você precisará de um objeto com um campo selecionar ou um campo de entrada enviado para o CustomFilterItemStructure.

interface CustomFilterItemStructure {
   field: React.ReactElement;
   label: React.ReactElement;
}

field é um elemento React que deve tornar uma entrada utilizável pelo cliente final. Ele herda alguns adereços personalizados do Flex.

Campo Descrição
name O nome do campo definido em FilterDefinition.
handleChange Uma função que é chamada neste evento de alteração de campo personalizado. Requer que o novo valor do filtro seja enviado como um argumento, seja como uma matriz de strings ou uma string.
options As mesmas opções enviadas no FilterDefinition, se fornecido.
currentValue O valor atual do filtro. Pode ser uma matriz de strings ou uma string, dependendo do que a função props.handleChange recebe quando for chamada.

label é outro elemento React que serve como etiqueta do filtro. Deve indicar o conteúdo do filtro quando o item accordion for fechado. Recebe as seguintes propriedades:

Campo Descrição
currentValue O valor atual do filtro.
activeOption é a matriz de opções fornecida e retorna toda a opção selecionada. Conterá currentValue como valor.

FilterDefinitionFactory

A matriz de filtros também aceita FiltersDefinitionFactories. FilterDefinitionFactory é uma função simples que retorna FilterDefinition. Você pode gravar um FilterDefinitionFactory que busca dados do estado do app e renderiza dinamicamente valores ou opções de um campo.

A fábrica deve aceitar dois argumentos:

Argumento Descrição

appState

Todo o estado do Flex Redux. Use para acessar informações sobre atividades, sessão e mais detalhes sobre o estado atual da instância do Flex.
ownProps Os adereços recebidos pelo TeamFiltersPanel.

Personalizar os filtros

O TeamFiltersPanel inclui activitiesFilter por padrão. Para adicionar um novo filtro ao TeamsFiltersPanel, você pode substituir a propriedade defaultProps.filters por uma nova matriz de definições de filtro antes de processar a instância do Flex.

Essa matriz pode conter fábricas FilterDefinitions e FilterDefinition. Neste exemplo, estamos preparando o filtro de atividade padrão como o primeiro item da matriz.

Flex.TeamsView.defaultProps.filters = [
   Flex.TeamsView.activitiesFilter,
   yourFilterDefinitionHere,
   your2ndFilterDefinitionHere,
   your3rdFilterDefinitionHere,
];

Adicionar um campo de entrada personalizado

Inicialmente, FilterDefinition tem um tipo predefinido, que gera caixas de seleção: MultiValue. Com campos de entrada personalizados, você pode adicionar um tipo diferente de entrada, como um campo de entrada de texto personalizado.

7. Image - Agent Filter.jpg

Um exemplo de um campo de entrada personalizado, nome, em que você pode digitar e filtrar por nomes com base na condição especificada

O arquivo a seguir descreve o HTML do campo personalizado, bem como o JavaScript associado ao seu comportamento. Neste exemplo, a funcionalidade do filtro é estendida na função extendFilters

        
        
        

        Add a Custom Filter

        Usar uma fábrica de definição de filtro

        Você pode usar uma fábrica de definição de filtro para renderizar dinamicamente as opções dos campos de caixas de seleção predefinidas. Por exemplo, você pode renderizar as atividades que estão atualmente disponíveis no armazenamento Flex Redux.

              
              
              

              Create a Filter Definition Factory Function

              Usar uma estrutura de filtro personalizada com uma fábrica de definição de filtro

              Você pode usar componentes de entrada de filtro personalizados e fábricas de definição de filtro juntos. O exemplo de código a seguir renderiza dinamicamente as opções de um campo selecionar no armazenamento atual do Redux.

                    
                    
                    

                    Combine Filter Definition Factor and Custom Filters

                    Ativar o novo filtro

                    Depois de configurar o(s) filtro(s), você pode habilitá‐los no Flex Manager com o arquivo base do plugin. Neste exemplo, a função extendFilters é importada e enviada ao Flex Manager.

                          
                          
                          

                          Extend Filters with a Plugin

                          Flex auto-hospedado

                          Os exemplos de código a seguir demonstram a gravação e a chamada das mesmas funções extendFilters, mas no contexto do Flex auto‐hospedado.

                                
                                
                                

                                Define a Custom Filter (Self-Hosted)

                                      
                                      
                                      

                                      Create a Filter Definition Factory (Self-Hosted)

                                            
                                            
                                            

                                            Combine Filter Definition Factories and Custom Input (Self-Hosted)

                                                  
                                                  
                                                  

                                                  Extend Filters in Self-Hosted Flex

                                                  Filtro oculto

                                                  O recurso de filtro oculto só está disponível para @twilio/flex-ui@1.21.0 e posterior.

                                                  Você pode aplicar programaticamente um filtro oculto do usuário, ou seja, o usuário não pode desativá‐lo. Você pode usar esse recurso para restringir os supervisores a ver apenas os membros da equipe na página. No entanto, observe que esse não é um recurso de segurança. Os supervisores ainda têm acesso a toda a atividade do agente por meio de APIs subjacentes.

                                                  No exemplo a seguir, usamos a consulta em tempo real para configurar a Exibição de equipe para mostrar apenas agentes com um atributo team_name específico (você pode definir atributos de usuário por meio do provedor SSO):

                                                  Flex.TeamsView.defaultProps.hiddenFilter = 'data.attributes.team_name CONTAINS "sales"'
                                                  Classifique esta página:

                                                  Precisa de ajuda?

                                                  Às vezes, todos nós precisamos; a programação é difícil. Receba ajuda agora da nossa equipe de suporte, ou confie na sabedoria da multidão navegando pelo Stack Overflow Collective da Twilio ou buscando a tag Twilio no Stack Overflow.

                                                  Obrigado pelo seu feedback!

                                                  Selecione o(s) motivo(s) para seu feedback. As informações adicionais que você fornece nos ajudam a melhorar nossa documentação:

                                                  Enviando seu feedback...
                                                  🎉 Obrigado pelo seu feedback!
                                                  Algo deu errado. Tente novamente.

                                                  Obrigado pelo seu feedback!

                                                  thanks-feedback-gif