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

Menu

Adicionar contexto de Tarefa e Tema aos 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.

Adicionar dados de Tarefa a um componente personalizado

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

O Flex inclui uma função auxiliar withTaskContext() que adiciona dados sobre a Tarefa selecionada ao seu componente. Você pode ler sobre as propriedades do objeto de Tarefa na documentação gerada automaticamente.

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);

Adicionar dados de Tema a um componente personalizado

O Flex inclui uma função auxiliar withTheme() que adiciona dados sobre o Tema atual ao seu 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);

Adicionar dados de Tema e Tarefa a um componente personalizado

Você pode usar withTheme() o withTaskContext() juntos se quiser que os dados de Tema e Tarefa sejam armazenados em seu 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.

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!

Indique‑nos e obtenha USD10 em 3 etapas simples!

Etapa 1

Obtenha o link

Obtenha um link de indicação pessoal gratuito aqui

Etapa 2

Dê USD10

Seu usuário se inscreve e faz a atualização usando o link

Etapa 3

Obtenha USD10

1.250 mensagens SMS grátis
OU 1.000 min de voz grátis
OU 12.000 chats
OU mais