Add Task and Theme Context to Components
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.
Add Task data to a custom 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.
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);Add Theme data to a custom component
Flex includes a withTheme() helper function that adds data about the current Theme to your component.
import React from 'react';
import { withTheme } from '@twilio/flex-ui';
import { styled } from "@twilio/flex-ui";
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);Add Theme and Task data to a custom component
You can use withTheme() and withTaskContext() together if you want the Theme data and Task data in your custom component.
import React from 'react';
import { withTheme, withTaskContext } from '@twilio/flex-ui';
import { styled } from "@twilio/flex-ui";
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, 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.
Need some help?
We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.
