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

Menu

Descripción general de las opciones de programación de Flex UI

Manager

Flex Manager es el punto de acceso para controlar la instancia de Flex y todos los productos Twilio subyacentes utilizados para las comunicaciones y la asignación de tareas. Esto significa que dentro del proyecto de Flex puedes acceder al cliente de TaskRouter o Chat directamente a través de Flex Manager.

Además de Flex, Manager también te da acceso a los SDK de Conversations, Sync, Voice y TaskRouter.

Cómo obtener la instancia de Manager

Puedes acceder a Manager de la siguiente manera:

En el método init de tu plugin

init(flex, manager) {
  // use manager here
}

En tu app, llamando al método `getInstance`

Flex.Manager.getInstance()

o llamando al método `create` cuando se inicializa Flex

return Flex
  .provideLoginInfo(configuration, "#container")
  .then(() => Flex.Manager.create(configuration))
  .then(manager => {
    // use manager here
  })
  .catch(error => handleError(error));

Puedes consultar el proyecto de ejemplo para saber cómo inicializar Flex.

Para obtener una descripción detallada de Manager, visita la documentación de la API de Flex UI (la interfaz de usuario de Flex).

Configuración

La configuración de Flex UI te permite controlar la forma en que se carga la app en general, así como el comportamiento de los componentes de Flex individuales.

Los componentes de Flex se pueden modificar de dos maneras:

  • mediante componentProps, en el objeto de configuración;
  • mediante la API defaultProps.

Usar componentProps en el objeto de configuración

Ejemplo

var appConfig = {

  componentProps: {
    CRMContainer: {
      uriCallback: (task) => task
        ? `https://www.bing.com/search?q=${task.attributes.name}`
        : "http://bing.com"
    }
  },
};

API defaultProps de React

También puedes configurar las propiedades predeterminadas de los componentes de un plugin mediante programación con la API defaultprops de React:

componentProps: { [Nombre del componente]: { [Nombre de la propiedad]: [PropValue] } }

Ejemplo

flex.CRMContainer
  .defaultProps
  .uriCallback = (task) => task
    ? `https://www.bing.com/search?q=${task.attributes.name}`
    : "http://bing.com/";

flex.MainHeader
  .defaultProps
  .logoUrl = "https://static0.twilio.com/marketing/bundles/archetype.alpha/img/logo-wordmark--red.svg";

Dirígete a la documentación de la API de Flex UI (la interfaz de usuario de Flex) para obtener una descripción completa del objeto de configuraciónobjectConfiguration y de las propiedades de los componentes.

Anular cadenas del lenguaje

Para anular cualquier cadena, edita el objeto strings de la instancia de Flex Manager:

flex.Manager.getInstance().strings.TaskLineCallAssigned = "I am a content string!";

5. Task list - String customization_slice.png

Para obtener una lista completa de cadenas de interfaz de usuario, consulta la documentación de la API de Flex UI (la interfaz de usuario de Flex).

Compatibilidad de las plantillas de cadena con sintaxis de estilo Mustache

Flex utiliza Handlebars para crear plantillas y admite expresiones y sintaxis de estilo Mustache dentro de cadenas de contenido, es decir, permite incrustar marcadores de posición de valor entre corchetes dobles. Mira el siguiente ejemplo:

manager.strings.TaskInfoPanelContent = `
<h1>TASK CONTEXT</h1>
<h2>Task type</h2>
<p>1{{task.attributes.title}}</p>
<p>2{{task.title}}</p>
<h2>Task created on</h2>
<p>{{task.dateCreated}}</p>
<h2>Task priority</h2>
<p>{{task.priority}}</p>
<h2>Task queue</h2>
<p>{{task.taskQueueName}}</p>
<hr />
<h1>CUSTOMER CONTEXT</h1>
<h2>Customer name / phone number</h2>
<p>{{task.attributes.name}}</p>
`;

Dentro del contexto de cada componente y cadena, hay disponible contenido dinámico adicional: por ejemplo, se puede acceder a las propiedades o atributos de la tarea.

Acceder al contexto de tareas: propiedades y atributos

Dentro del contexto de cada componente y cadena, hay disponible contenido dinámico adicional: por ejemplo, se puede acceder a las propiedades o atributos de la tarea.

A continuación, se muestra un ejemplo del uso en una plantilla de un par de propiedades y atributos mencionados anteriormente:

manager.strings.TaskExtraInfo = "My task {{task.attributes.name}} was created on {{task.dateCreated}}";

Funciones auxiliares

Las funciones auxiliares proporcionan una forma de personalizar el texto con información dinámica. A continuación, se muestra un ejemplo del uso de una función auxiliar para habilitar las actualizaciones dinámicas:

manager.strings.TaskExtraInfo = "Time since last update: {{helper.durationSinceUpdate}}";

Puedes encontrar todas las funciones auxiliares disponibles en la documentación de la API de Flex UI (la interfaz de usuario de Flex).

Temas de Flex UI

Los temas de Flex UI (la interfaz de usuario de Flex) están estrechamente conectados con el sistema de diseño Twilio Paste. Esta estructura se basa en el concepto de tokens de diseño, un conjunto de variables que se pueden modificar. Esta estructura promueve la coherencia, la personalización y la accesibilidad web.

Configuración del tema

La configuración del tema se realiza con la clave de configuración llamada config.theme usando la siguiente estructura:

interface ThemeConfigProps {
   isLight?: boolean; // Represents if light or dark theme
   tokens?: Tokens; // Paste tokens
   componentThemeOverrides?: Object; // Object containing styles of the component which is to be overridden.
}

Crear temas para componentes

En el caso de los componentes que reciben el tema como propiedades, se puede utilizar props.theme.tokens. Para obtener más información sobre cada token, consulta Twilio Paste

Tokens personalizados

Utiliza tokens personalizados para pasar tus propios tokens personalizados al tema utilizando el siguiente ejemplo.

  appconfig = {
    theme: {
      tokens: {
        custom: {
          myCustomToken: "#ccc"
        }
      }
    }
  }

ThemeProvider

Se puede utilizar la API Flex.setProviders() para cargar proveedores en el nivel de la raíz una vez y no tienes que preocuparte de volver a envolver los componentes, ya que el contexto se establecerá correctamente. Ahora, para usar Paste en los plugins de Flex, los desarrolladores no tendrán que envolver todos los componentes con el ThemeProvider de Paste. Explora la API en la documentación de la API de Flex UI (la interfaz de usuario de Flex).

Cuando utilicen Paste, los desarrolladores deberán pasar CustomizationProvider de Paste a Flex utilizando la API Flex.setProviders como se indica a continuación. Al hacer esto, envolveremos a Flex con el proveedor proporcionado y los desarrolladores no tendrán que preocuparse de obtener el tema correcto y pasarlo.

import { CustomizationProvider } from "@twilio-paste/core/customization";
 
Flex.setProviders({
   PasteThemeProvider: CustomizationProvider
});
 
Flex.AgentDesktopView.Panel1.Content.add(
   <PasteButton key="A" variant="primary">
       Paste Button
   </PasteButton>
);
 
Flex.AgentDesktopView.Panel1.Content.add(
   <PasteButton key="B" variant="primary">
       Paste Button
   </PasteButton>
);

Flex.setProviders() también permite a los desarrolladores pasar su propio proveedor personalizado que deben establecer en el nivel de la raíz. Pueden hacerlo de la siguiente manera:

Flex.setProviders({
   CustomProvider: (RootComponent) => (props) => {
       return (
           <Context.Provider value={{ test: "123" }}>
               <RootComponent {...props} />
           </Context.Provider>
       );
   }
});
 
Flex.AgentDesktopView.Panel1.Content.add(
   <Context.Consumer>
       {(value) => {
           <div>{value.foo}</div> // Will print 123
       }}
   </Context.Consumer>
);

En el siguiente ejemplo se muestra cómo utilizar un proveedor personalizado para aplicar estilos a los componentes de Material UI

Flex.setProviders({
      CustomProvider: (RootComponent) => (props) => {
          return (
            <StylesProvider generateClassName={createGenerateClassName({
              productionPrefix: 'pluginXYZ',
            })}>
                  <RootComponent {...props} />
              </StylesProvider>
          );
      }
});

Flex.AgentDesktopView.Panel1.Content.add(<StyledSampleComponent  key="no1"  />);

Cómo usar Twilio Paste

No es necesario que crees desde cero todos los componentes. Puedes utilizar las bibliotecas de componentes de React existentes para acceder a componentes previamente creados teniendo en cuenta la compatibilidad con el navegador, la adaptación al tamaño de pantalla y la accesibilidad. Internamente, flex-ui utiliza Twilio Paste para muchos de sus componentes. Igualmente, tú puedes utilizar Paste para crear componentes que comiencen con un estilo similar al diseño existente de Flex.

Aunque Paste ya es una dependencia de flex-ui, recomendamos incluirlo como una dependencia explícita en el archivo package.json de tu proyecto de plugin. Deberás agregar esto en tus dependencies:

// package.json

"dependencies": {
    ...
    "@twilio-paste/core": "^10.20.0",
},

Agregar, reemplazar y eliminar componentes

FLex UI (la interfaz de usuario de Flex) es una biblioteca de componentes programables o dinámicos que exponen la propiedad Content y te permiten agregar, reemplazar y eliminar cualquier componente y sus elementos secundarios. Cada elemento secundario inmediato de un componente tiene una clave (necesaria para utilizar los métodos add y replace) y un conjunto de propiedades que sus hijos heredarán. Para ver la lista completa de componentes, encontrar la key (clave) de un componente o explorar sus propiedades, consulta la documentación de la API de Flex UI (la interfaz de usuario de Flex).

Propiedad Content y métodos add, replace y remove

A continuación, puedes encontrar una lista de los componentes de la interfaz de usuario y sus detalles, que se pueden anular mediante programación. Esto se puede hacer mediante los métodos add, replace y remove con opciones. Ten en cuenta que todos los componentes deben tener una clave declarada.

Sintaxis de los métodos add y replace

Flex.Component.Content.add(<MyComponent key="demo-component"/>, {options});
Flex.Component.Content.replace(<MyComponent key="demo-component"/>, {options});

A continuación, se muestra un ejemplo de cómo agregar un componente llamado AnotherMuteButton al componente MainHeader, alineándolo al final (a la izquierda) y colocándolo como el primer componente delante de los componentes nativos MuteButton y UserControls:

Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {
  sortOrder: -1, 
  align: “end”
});

Sintaxis del método remove

El método remove te permite eliminar elementos secundarios inmediatos de un componente programable a través de su clave.

Flex.Component.Content.remove(key, {options});

A continuación, se muestra un ejemplo de cómo eliminar el componente AnotherMuteButton del componente MainHeader. Este componente se elimina a través de la clave que configuramos anteriormente, "mute".

Flex.MainHeader.Content.remove("mute");

Opciones para los métodos add, replace y remove

if (Expresión)

Se utiliza en los métodos add y replace para agregar condiciones según las cuales se agrega o reemplaza el componente. Ejemplo:

Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {
  if : props => props.task.source.taskChannelUniqueName === "custom1" 
});

sortOrder (number)

Se utiliza en el método add para especificar el orden en el que se coloca el nuevo componente en relación con otros hijos del componente principal. Los componentes secundarios nativos tienen prioridad. El contador de ordenamiento comienza en 0. Para colocar siempre un nuevo componente al principio o al final, utiliza números grandes, como -100 o 100, según la dirección. Ejemplo:

Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {
  sortOrder: -1
});

align ('start' | 'end')

Se utiliza en el método add para alinear nuevos componentes en la parte superior o inferior, o a la derecha o izquierda, según la dirección del componente principal. Estos son los posibles valores:

  • start: alinea el nuevo componente a la izquierda o en la parte superior.
  • end: alinea el nuevo componente a la derecha o en la parte inferior.

Ejemplo:

Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {
  align: “end”
});

Acciones de la interfaz de usuario y eventos de Flex

Flex UI (la interfaz de usuario de Flex) emite constantemente datos de eventos que describen cómo interactúa el usuario con la interfaz de usuario de Flex. A medida que creas plugins, el marco de acciones te permite utilizar estos eventos y definir tu propia lógica para describir cómo deseas que cambien la interfaz de usuario de Flex, los datos de CRM o cualquier otro dato. Puedes registrar eventos antes o después de que se desencadene una acción, o incluso puedes reemplazar el comportamiento de una acción.

Registrar e invocar una acción

Actions.registerAction(name: string, action: ActionFunction, payloadUpdate?: PayloadUpdateFunction)

Registra una acción con nombre y proporciona el código que se debe ejecutar al invocarla. El método payloadUpdate es opcional y se utiliza para activar una devolución de llamada que modifica la carga útil proporcionada a la invocación de la acción.

Actions.invokeAction(name: string)

Invoca una acción con nombre. Devuelve una promesa.

Actions.addListener(name: string, action: ActionFunction)

Implementa una función personalizada que se activa antes o después de una acción específica.

Agregar y quitar detectores de eventos

Puedes agregar y quitar detectores de eventos.

Eventos compatibles:

before[eventName] (por ejemplo, "beforeAcceptTask")
Se llama cuando se activa una acción con nombre, pero antes de que se ejecute el cuerpo de la acción. Puedes anular la acción que se proporciona en el cuerpo del evento.

after[eventName]
Se llama después de que la acción haya dejado de ejecutarse.

Debes tener en cuenta que no existe compatibilidad con el evento afterLogout. Una vez que el trabajador haya cerrado la sesión, volverá a la pantalla de inicio de sesión de Flex.

Reemplazar una acción

Actions.replaceAction(name: string, action: ReplacedActionFunction)

Reemplaza la implementación predeterminada de una acción con nombre y proporciona una implementación alternativa. La acción reemplazada se llamará con los mismos parámetros que la implementación original, por lo que puedes agregar lógica adicional y, a continuación, invocar la acción original en la función de reemplazo.

Notificaciones en la app y en el navegador

Flex UI (la interfaz de usuario de Flex) proporciona una API del lado del cliente para administrar las notificaciones en dicha interfaz.

¿Qué es una notificación en Flex?

Una notificación es una alerta que indica al usuario qué cambio de estado o error se ha producido en un componente o página cuando ya no está viendo dicho componente o página.

Los usuarios pueden recibir notificaciones en Flex mediante una barra de notificaciones, notificaciones del navegador o ambas.

¿Cuáles son las capacidades del marco de notificaciones?

  • Registrar notificaciones personalizadas, incluidas las notificaciones del navegador
  • Personalizar notificaciones estándar
  • Desactivar las notificaciones estándar de la interfaz de usuario
  • Anular las notificaciones estándar según la definición de los canales de tarea
  • Personalizar cómo se muestran las notificaciones estándar de la interfaz de usuario
  • Registrar tus notificaciones de interfaz de usuario personalizadas y especificar cómo rendarizarlas

NotificationBar

NotificationBar es una manera in-app de alertar al usuario. NotificationBar tiene una variedad de opciones como íconos, acciones y tiempo de espera.

Screenshot 2022-05-26 at 12.52.12.png

Screenshot 2022-05-26 at 12.52.12.png

Notificaciones del navegador

Flex utiliza la API de notificación de navegador estándar como base para su implementación de notificaciones de navegador. Las notificaciones de navegador se pueden activar en el panel de control Admin de Flex UI (la interfaz de usuario de Flex).

Las notificaciones de navegador se muestran si Flex está minimizado.

Debes tener en cuenta que, debido a las restricciones de seguridad de los navegadores, no se permiten las notificaciones de navegador cuando Flex se utiliza en un iframe dentro de una página web que utiliza varios dominios. Esto incluye las integraciones de Salesforce y Zendesk.

Solicitud de permisos

Para empezar a mostrar las notificaciones de navegador, el usuario debe primero conceder permisos. De forma predeterminada, Flex solicitará al usuario permisos si no estos no están concedidos o están bloqueados.

Si deseas agregar lógica personalizada para la solicitud de permisos, como realizar una solicitud según alguna acción del usuario en la interfaz de usuario, puedes despachar Notification.requestPermission() desde el código personalizado.

Controlador de notificaciones de navegador

Para mostrar una notificación de navegador, utiliza la clave options con una etiqueta browser dentro. La documentación de la API de Flex contiene una lista exhaustiva de propiedades disponibles. Si no se pasa una clave browser a options, Flex no mostrará ninguna notificación de navegador.

Acciones de NotificationBar

Un componente auxiliar NotificationBar.Action, se puede utilizar para proporcionar una acción en la que se puede hacer clic a la definición de notificación.

interface NotificationBarActionProps {
    label: React.ReactText; // Can be simple text string or a template string
    onClick: NotificationBarActionCallback;
    icon?: string;
}

La referencia completa del gestor de notificaciones y una lista de notificaciones estándar están disponibles en la documentación de la API de Flex.

Administración de estado

Flex UI 2.0 incluye el kit de herramientas de Redux y algunas API nuevas para administrar el estado interno. Estas herramientas proporcionan algunas guías para la administración del estado, lo que te ayuda a configurar el código repetitivo más fácilmente y con mejores valores predeterminados.

Se recomienda utilizar un único almacén Redux, ya sea dejar que Flex UI (la interfaz de usuario de Flex) cree su propio almacén o pasar un almacén personalizado mediante la API Manager.create().

useFlexSelector

Una función que envuelve al método de Redux useSelector. Expone la misma API, pero agrega algunas validaciones de Flex para garantizar que el estado interno de Flex sea utilizable. Este selector es específico para trabajar con el propio estado de Flex. Excepto cuando se deba acceder al estado de Flex, recomendamos utilizar la función predeterminada useSelector.

const MyComponent = (props) => {
   const viewState = useFlexSelector(state => state.view);
   return (
       {viewState.isSideNavOpen &&
           <div>My Custom Code</div>
       }
   )
}

El selector toma el estado de visualización actual del componente personalizado. El selector garantiza que el estado seleccionado sea seguro de leer y se puede utilizar en la aplicación sin efectos secundarios. Esto no se podía garantizar con useSelector.

useFlexDispatch

Una función que envuelve al método de Redux useDispatch. Evita que los despachos provoquen efectos secundarios en el estado de Flex y garantiza que los cambios funcionen según lo previsto. Utiliza este hook para interactuar con el estado de Flex. Puedes utilizar el método nativo useDispatch fuera del estado de Flex.

const MyComponent = (props) => {
   const viewState = useFlexSelector(state => state.view);
   const dispatch = useFlexDispatch();
   return (
       {viewState.isSideNavOpen &&
               <button onClick={() => dispatch({type: 'close_side_bar'})}>My Custom Code</button>
       }
   )
}

Obtén más información sobre el uso de Redux en nuestras guías para desarrolladores.

Definiciones de canales de tareas

Flex es un contact center multicanal. Admitimos una serie de canales listos para usar, y siempre estamos agregando más. A partir de la versión 1.0, admitimos los siguientes canales nativos:

  • Voice
  • SMS con compatibilidad con MMS
  • WebChat con archivos adjuntos multimedia
  • WhatsApp

Con la API de definición de canales de tareas también puedes agregar canales personalizados y anular el comportamiento de los existentes.

API de definición de canales de tareas

Todos los canales de tareas que gestiona Flex UI (la interfaz de usuario de Flex) se definen y registran mediante la API de canales de tareas. Flex registra sus definiciones predeterminadas de canales de tareas, pero los usuarios y plugins pueden registrar sus propias definiciones. Cuando se procesan componentes basados en tareas, se utilizará la primera definición de canal coincidente para una tarea determinada. Si hay más de una coincidencia de definición de canal para una tarea, se utilizará la definición registrada más recientemente. De esta forma, puedes registrar una definición de canal más específica para anular el comportamiento de una definición general.

En una definición de canal de tarea puedes especificar estos elementos:

  • devoluciones de llamada para determinar qué tareas son aplicables
  • cadenas (plantillas) para utilizar en diferentes componentes de Flex según el estado de la tarea
  • colores que se utilizarán en la lista de tareas según el estado de la tarea
  • íconos que se muestran en la lista de tareas, las pestañas y los lienzos según el estado de la tarea
  • componentes personalizados que se agregarán a los componentes basados en tareas si el canal cumple con los requisitos
  • componentes personalizados que se reemplazarán en los componentes basados en tareas si el canal cumple con los requisitos

Obtén más información sobre cómo usar las definiciones de canales de tareas en las guías para desarrolladores.

insightsClient

insightsClient proporciona acceso al SDK de Twilio Sync. En el caso de las cuentas de Flex, esto proporciona acceso a los trabajadores y los datos de tareas mediante el uso de dos clases:

  • Clase LiveQuery: para consultar datos de Flex y recibir actualizaciones implementadas siempre que los registros nuevos (o actualizados) coincidan con la expresión dada.
  • Clase InstantQuery: para obtener una instantánea estática de los datos de Flex.

Ambas clases necesitan los siguientes dos argumentos:

  • Nombre de índice: conjunto de datos en función de los cuales se evaluará la consulta. Los nombres de índice admitidos actualmente para Flex son: tr-task, tr-worker, tr-reservation, tr-queue.
  • Consulta: la consulta utilizada para filtrar los datos del índice. La sintaxis de la consulta se documenta aquí. La consulta puede ser una cadena vacía: en este caso se devuelve el conjunto de datos completo (por ejemplo, todos los trabajadores).

Ejemplo de LiveQuery

En este ejemplo, se utiliza insightsClient para consultar los trabajadores que tienen activity_name establecido en Available (Disponible) y para suscribirse a fin de detectar cambios. Esto significa que cada vez que un trabajador cambie su estado a Available, se activará un evento itemUpdated. Si un trabajador cambia su estado de Available a cualquier otro estado, se activará el evento itemRemoved.

Flex.Manager.insightsClient
  .liveQuery('tr-worker', 'data.activity_name == "Available"')
  .then(function (args) {
    console.log(
      'Subscribed to live data updates for worker in "Available" activity'
    );
    args.on('itemRemoved', function (args) {
      console.log('Worker ' + args.key + ' is no longer "Available"');
    });
    args.on('itemUpdated', function (args) {
      console.log('Worker ' + args.key + ' is now "Available"');
    });
  })
  .catch(function (err) {
    console.log('Error when subscribing to live updates', err);
  });

Ejemplo de instantQuery

En este ejemplo, se utiliza insightsClient para consultar los trabajadores con habilidades específicas dentro de sus attributes. Esto devuelve un arreglo de trabajadores que se puede utilizar para proporcionar datos estáticos.

manager.insightsClient.instantQuery('tr-worker').then((q) => {
  q.on('searchResult', (items) => {
    // Do something with the results
  });
  q.search('data.attributes.languages contains "english"');
});
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