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

Menu

Agregar contexto de tema y tarea a los componentes

When you're managing custom components in the Flex UI, you'll likely want to use data from Flex to render your component. For example, you might want your component to display information about the agent's active Task, or your component to inherit color and styling from the Flex Theme configuration instead of setting up unique branding for every component.

Agregar datos de tarea a un componente personalizado

The following code sample does not work when mounted to the Supervisor.TaskCanvas.

Flex incluye una función auxiliar withTaskContext() que agrega datos sobre la tarea seleccionada al componente. Puedes leer acerca de las propiedades del objeto de la tarea en la documentación generada automáticamente.

import React from 'react';
import { withTaskContext } from '@twilio/flex-ui';

// Set text color to white
const TaskSIDText = {
  color: "#FFF"
};

class MyComponent extends React.Component {
  render() {
    // Retrieve Task details
    // (`task` will be undefined if there's no task selected in the UI)
    const { task } = this.props;
    // Render Task SID in component as a test
    return <div style={TaskSIDText}>
      <p>First, make sure we can access the current Task data.</p>
      <p>Task SID: <span style={{ fontWeight: 'bold' }}>{task ? task.taskSid : 'No task selected'}</span></p>
    </div>;
  }
}

// The withTaskContext() helper function creates a
// Higher-Order Component that uses the Context API
// to access Task data, then adds the Task data to
// the wrapped component.
export default withTaskContext(MyComponent);

Agregar datos de tema a un componente personalizado

Flex incluye una función auxiliar withTheme() que agrega datos sobre el tema actual al componente.

import React from 'react';
import { withTheme } from '@twilio/flex-ui';
import styled from "react-emotion";

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    // Print the current theme object
    // You can have a look at at the structure of this object in the console
    console.log('Current theme: ', this.props.theme);
  }

  render() {
    // Return general text in the component
    return <TaskSID>
      <p>Now, we can change the color of the component's background.</p>
    </TaskSID>;
  }
}

// The component that has its background color set
// to the same color as MainHeader background
const TaskSID = styled("div")`
  background-color: ${props => props.theme.MainHeader.Container.background};
`;

// Note the added withTheme() helper function
export default withTheme(MyComponent);

Agregar datos de tema y tarea a un componente personalizado

Puedes utilizar withTheme() y withTaskContext() conjuntamente si deseas que los datos del tema y de la tarea estén en el componente personalizado.

import React from 'react';
import { withTheme, withTaskContext } from '@twilio/flex-ui';
import styled from "react-emotion";

const TaskSIDText = {
  color: "#FFF", 
  fontWeight: 'bold'
};

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    // Print the current theme object
    // You can look at the structure of this object in the console
    console.log('Current theme: ', this.props.theme);
  }
  render() {
    const { task } = this.props;

    // Print Task SID using styled component `TaskSID` defined below
    return <TaskSID>
      <p style={TaskSIDText}>You can access the current Task data AND the current theme. <br/> Task SID: {task ? task.taskSid: 'No task selected'}</p>
  }
}

// Styled component that has its text color set to the same color
// as MainHeader background (i.e., red)
const TaskSID = styled("div")`
  background-color: ${props => props.theme.MainHeader.Container.background};
`;

// Note the added withTheme() helper function
export default withTheme(withTaskContext(MyComponent));

Call a custom component from a plugin

For example, if you wanted to display the Task Data on the Flex CRM container, you need to add the following code to your Flex plugin.

import MyComponent from '<relative_path_to_component_file>';
...
async init(flex, manager) {
    flex.CRMContainer.Content.replace(<MyComponent key="mycrm"/>);
   
}

Refer to Adding Components to Flex UI and Flex UI Components for more guidance on incorporating the code into your plugin and replacing a Flex component.

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.

¡Recomiéndanos y gana USD 10 en 3 pasos sencillos!

Paso 1

Obtén un enlace

Obtén un enlace gratuito de referencia personal aquí

Paso 2

Regala USD 10

Tu usuario se registra y actualiza mediante el enlace

Paso 3

Obtén USD 10

1250 SMS gratuitos
O 1000 minutos gratuitos de voz
O 12 000 chats
O más