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

Menu

Filtros avanzados de la vista de equipo

Los filtros de la vista de equipo permiten a los supervisores buscar o filtrar a sus agentes por nombre o actividad. También puedes utilizar criterios de filtro personalizados definidos mediante programación, como equipos o habilidades. En esta página, se describen los conceptos principales relacionados con la personalización de los filtros de la vista de equipo e incluye algunos códigos de ejemplo que puedes usar para comenzar a utilizar la función. Para obtener más información sobre el uso de los filtros de la vista de equipo, consulta la guía del usuario final.

Esta función está en la etapa piloto y requiere la versión 1.18 o superior de Flex UI (la interfaz de usuario de Flex). Puedes activar los filtros de la vista de equipo en la página de funciones previas al lanzamiento en Flex Admin.

Conceptos clave

Flex utiliza los siguientes objetos y componentes para generar filtros de la vista de equipo:

TeamFiltersPanel

Parte de Flex UI (la interfaz de usuario de Flex) que muestra los filtros de equipo. Es un componente secundario de la interfaz de usuario del supervisor. De forma predeterminada, Flex te permite filtrar por actividad del agente, pero puedes agregar filtros personalizados al panel mediante la modificación de defaultProps, de la siguiente manera:

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

FilterDefinition

Una FilterDefinition (Definición de filtro) es una estructura que indica a Flex cómo representar la etiqueta y el campo de filtro nuevos, y con qué consultar el valor del campo. Cada campo agregará una nueva condición a la consulta de sincronización que presentará la lista de agentes (o trabajadores) a la interfaz de usuario. Una FilterDefinition tiene la siguiente estructura:

interface FilterDefinition {
   id: string;
   title: React.ReactChild;
   fieldName: string;
   type?: FiltersListItemType;
   options?: Array;
   customStructure?: CustomFilterItemStructure;
   condition?: string;
}
Field (Campo) Descripción
id

Obligatorio. Una cadena que representa el asunto de la consulta. Esto identifica los valores que se van a filtrar en el estado de la app de Flex según el atributo o campo especificado. Por ejemplo, "data.attributes.full_name" o "data.activity_name".

title Obligatorio. Una cadena que se representa como el nombre de visualización del filtro en el panel lateral de los filtros. Por ejemplo "Names" (Nombres).
fieldName

Obligatorio. Una cadena que representa el nombre de entrada que se pasó a los filtros predefinidos. Por ejemplo, "full_name".

type Obligatorio si customStructure no se define. Actualmente solo es compatible con "multiValue". Esto representa una lista de casillas de verificación para cada opción que proporciones.
options Obligatorio si el tipo es "multiValue". Una matriz de opciones de definición de filtro que se utiliza para representar los campos de casilla de verificación, sus valores, sus etiquetas y si están seleccionados de forma predeterminada.
customStructure Obligatorio si type no se establece. Un objeto de tipo CustomFilterItemStructure que se utiliza para representar campos personalizados. Esto te permite agregar tus propios campos personalizados.
condition

Un parámetro opcional que representa el operador de comparación de consultas, como IN, NOT_IN, CONTAINS. Consulta Operadores de consulta para obtener información sobre otros valores de condición posibles.

Esto representa la condición que se va a utilizar en la creación de la consulta. Por ejemplo, data.activity_name IN ["available"] o data.attributes.full_name CONTAINS "John". En el último ejemplo, "data.attributes.full_name" es el id, "CONTAINS" es la condition y "John" es el valor por el que se va a filtrar.

FilterDefinitionOption

Describe las opciones disponibles que se pueden utilizar como filtro. Por ejemplo, si deseas filtrar por idiomas de agente, puedes crear una opción para cada idioma hablado en el contact center.

interface FilterDefinitionOption {
   value: string;
   label: string;
   default?: boolean;
}
Field (Campo) Descripción
value

Valor de la opción de filtro.

label (etiqueta) Nombre descriptivo de la opción.
predeterminada Un valor booleano que indica si la opción de filtro debe seleccionarse de forma predeterminada.

CustomFilterItemStructure

Para agregar un campo y una etiqueta personalizados a un filtro, necesitarás pasar un objeto con un campo de selección o un campo de entrada a CustomFilterItemStructure.

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

field es un elemento de React que debe renderizar una entrada utilizable por el cliente final. Hereda algunas propiedades personalizadas de Flex.

Field (Campo) Descripción
name (nombre) El nombre de campo establecido en FilterDefinition.
handleChange Función que se invoca en este evento de cambio de campo personalizado. Requiere que el nuevo valor del filtro se pase como argumento, ya sea como una matriz de cadenas o como una cadena.
options Las mismas opciones pasadas en FilterDefinition, si se proporcionan.
currentValue El valor actual del filtro. Puede ser una matriz de cadenas o una cadena, según lo que reciba la función props.handleChange una vez invocada.

label es otro elemento de React que sirve como etiqueta del filtro. Debe indicar el contenido del filtro cuando se cierra el elemento de acordeón. Recibe las siguientes propiedades:

Field (Campo) Descripción
currentValue El valor actual del filtro.
activeOption Es la matriz de opciones proporcionada y devuelve la opción seleccionada completa. Contendrá currentValue como valor.

FilterDefinitionFactory

La matriz de filtros también acepta FiltersDefinitionFactories. Una FilterDefinitionFactory es una función sencilla que devuelve una FilterDefinition. Puedes escribir una FilterDefinitionFactory que recupere datos del estado de app y renderice dinámicamente los valores u opciones de un campo.

Tu fábrica debe aceptar dos argumentos:

Argumento Descripción

appState

Todo el estado de Flex Redux. Utiliza esta opción para acceder a información sobre actividades, sesiones y más información sobre el estado actual de la instancia de Flex.
ownProps Las propiedades recibidas por TeamFiltersPanel.

Personalizar los filtros

El TeamFiltersPanel incluye activitiesFilter de forma predeterminada. Para agregar un nuevo filtro a TeamsFiltersPanel, puedes sobrescribir la propiedad defaultProps.filters con una nueva matriz de definiciones de filtro antes de renderizar la instancia de Flex.

Esta matriz puede contener fábricas FilterDefinitions y FilterDefinition. En este ejemplo, se vuelve a agregar el filtro de actividad predeterminado como el primer elemento de la matriz.

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

Agregar un campo de entrada personalizado

Inicialmente, FilterDefinition tiene un tipo predefinido, que generará casillas de verificación: MultiValue. Con los campos de entrada personalizados, puedes agregar un tipo de entrada diferente, como un campo de entrada de texto personalizado.

7. Image - Agent Filter.jpg

Un ejemplo de un campo de entrada personalizado es el nombre, en el que puedes escribir y filtrar por nombres según la condición que especifiques

En el siguiente archivo, se describe el código HTML del campo personalizado, así como el código JavaScript asociado a su comportamiento. En este ejemplo, la funcionalidad de filtro se amplía en la función extendFilters.

        
        
        

        Add a Custom Filter

        Utiliza una fábrica de definición de filtros

        Puedes utilizar una fábrica de definición de filtros para renderizar dinámicamente las opciones de los campos de casillas de verificación predefinidos. Por ejemplo, podrías renderizar las actividades que están disponibles actualmente en el almacén de Flex Redux.

              
              
              

              Create a Filter Definition Factory Function

              Utiliza una estructura de filtros personalizada con una fábrica de definición de filtros

              Puedes utilizar componentes de entrada de filtro personalizados y fábricas de definición de filtros en conjunto. En el siguiente ejemplo de código se renderizan dinámicamente las opciones de un campo de selección del almacén de Redux actual.

                    
                    
                    

                    Combine Filter Definition Factor and Custom Filters

                    Habilitar el nuevo filtro

                    Una vez que hayas configurado tus filtros, puedes habilitarlos en el administrador de Flex desde el archivo base del plugin. En este ejemplo, la función extendFilters se importa y se pasa a Flex Manager (el administrador de Flex).

                          
                          
                          

                          Extend Filters with a Plugin

                          Flex autoalojado

                          En los siguientes ejemplos de código se muestra cómo escribir y llamar a las mismas funciones extendFilters, pero en el contexto de Flex autoalojado.

                                
                                
                                

                                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

                                                  La función de filtro oculto solo está disponible en @twilio/flex-ui@1.21.0 y posteriores.

                                                  Puedes aplicar un filtro mediante programación que esté oculto al usuario, es decir, el usuario no puede deshabilitarlo. Puedes utilizar esta función para restringir que los supervisores vean solo a los miembros de su equipo en la página. Sin embargo, ten en cuenta que no se trata de una función de seguridad. Los supervisores siguen teniendo acceso a toda la actividad del agente mediante las API subyacentes.

                                                  En el siguiente ejemplo, utilizamos la consulta en vivo para configurar la vista de equipo de modo que solo muestre los agentes con un atributo team_name específico (puedes definir los atributos de usuario a través de tu proveedor de SSO):

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

                                                  ¿Necesitas ayuda?

                                                  Todos la necesitamos a veces; la programación es difícil. Obtén ayuda ahora de nuestro equipo de soporte, o recurre a la sabiduría de la multitud visitando Stack Overflow Collective de Twilio o navegando por la etiqueta de Twilio en Stack Overflow.

                                                  Gracias por tus comentarios.

                                                  Selecciona los motivos de tus comentarios. La información adicional que nos brindas nos ayuda a mejorar nuestra documentación:

                                                  Enviando tus comentarios…
                                                  🎉 Gracias por tus comentarios.
                                                  Se produjo un error. Inténtalo de nuevo.

                                                  Gracias por tus comentarios.

                                                  thanks-feedback-gif