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.
The following code sample does not work when mounted to the Supervisor.TaskCanvas
.
Flex includes a withTaskContext()
helper function that adds data about the selected Task to your component. You can read about the properties of the Task object in the autogenerated documentation.
_26import React from 'react';_26import { withTaskContext } from '@twilio/flex-ui';_26_26// Set text color to white_26const TaskSIDText = {_26 color: "#FFF"_26};_26_26class MyComponent extends React.Component {_26 render() {_26 // Retrieve Task details_26 // (`task` will be undefined if there's no task selected in the UI)_26 const { task } = this.props;_26 // Render Task SID in component as a test_26 return <div style={TaskSIDText}>_26 <p>First, make sure we can access the current Task data.</p>_26 <p>Task SID: <span style={{ fontWeight: 'bold' }}>{task ? task.taskSid : 'No task selected'}</span></p>_26 </div>;_26 }_26}_26_26// The withTaskContext() helper function creates a_26// Higher-Order Component that uses the Context API_26// to access Task data, then adds the Task data to_26// the wrapped component._26export default withTaskContext(MyComponent);
Flex includes a withTheme()
helper function that adds data about the current Theme to your component.
_31import React from 'react';_31import { withTheme } from '@twilio/flex-ui';_31import { styled } from "@twilio/flex-ui";_31_31class MyComponent extends React.Component {_31 constructor(props) {_31 super(props);_31_31 // Print the current theme object_31 // You can have a look at at the structure of this object in the console_31 console.log('Current theme: ', this.props.theme);_31 }_31_31 render() {_31 // Return general text in the component_31 return (_31 <TaskSID>_31 <p>Now, we can change the color of the component's background.</p>_31 </TaskSID>_31 );_31 }_31}_31_31// The component that has its background color set_31// to the same color as MainHeader background_31const TaskSID = styled("div")`_31 background-color: ${props => props.theme.MainHeader.Container.background};_31`;_31_31// Note the added withTheme() helper function_31export default withTheme(MyComponent);
You can use withTheme()
and withTaskContext()
together if you want the Theme data and Task data in your custom component.
_35import React from 'react';_35import { withTheme, withTaskContext } from '@twilio/flex-ui';_35import { styled } from "@twilio/flex-ui";_35_35const TaskSIDText = {_35 color: "#FFF", _35 fontWeight: 'bold'_35};_35_35class MyComponent extends React.Component {_35 constructor(props) {_35 super(props);_35_35 // Print the current theme object_35 // You can look at the structure of this object in the console_35 console.log('Current theme: ', this.props.theme);_35 }_35 render() {_35 const { task } = this.props;_35_35 // Print Task SID using styled component `TaskSID` defined below_35 return (<TaskSID>_35 <p style={TaskSIDText}>You can access the current Task data AND the current theme. Task SID: {task ? task.taskSid: 'No task selected'}</p>_35 </TaskSID>);_35 }_35}_35_35// Styled component that has its text color set to the same color_35// as MainHeader background (i.e., red)_35const TaskSID = styled("div")`_35 background-color: ${props => props.theme.MainHeader.Container.background};_35`;_35_35// Note the added withTheme() helper function_35export default withTheme(withTaskContext(MyComponent));
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.
_10import MyComponent from '<relative_path_to_component_file>';_10..._10async init(flex, manager) {_10 flex.CRMContainer.Content.replace(<MyComponent key="mycrm"/>);_10_10}
Refer to Adding Components to Flex UI, Work with Components and Props, and Create and Style Custom Components for more guidance on incorporating the code into your plugin and replacing a Flex component.