Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

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

add-task-data-to-a-custom-component page anchor
(information)

Info

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(link takes you to an external page) in the autogenerated documentation.


_26
import React from 'react';
_26
import { withTaskContext } from '@twilio/flex-ui';
_26
_26
// Set text color to white
_26
const TaskSIDText = {
_26
color: "#FFF"
_26
};
_26
_26
class 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.
_26
export default withTaskContext(MyComponent);


Add Theme data to a custom component

add-theme-data-to-a-custom-component page anchor

Flex includes a withTheme() helper function that adds data about the current Theme to your component.


_31
import React from 'react';
_31
import { withTheme } from '@twilio/flex-ui';
_31
import { styled } from "@twilio/flex-ui";
_31
_31
class 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
_31
const TaskSID = styled("div")`
_31
background-color: ${props => props.theme.MainHeader.Container.background};
_31
`;
_31
_31
// Note the added withTheme() helper function
_31
export default withTheme(MyComponent);


Add Theme and Task data to a custom component

add-theme-and-task-data-to-a-custom-component page anchor

You can use withTheme() and withTaskContext() together if you want the Theme data and Task data in your custom component.


_35
import React from 'react';
_35
import { withTheme, withTaskContext } from '@twilio/flex-ui';
_35
import { styled } from "@twilio/flex-ui";
_35
_35
const TaskSIDText = {
_35
color: "#FFF",
_35
fontWeight: 'bold'
_35
};
_35
_35
class 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)
_35
const TaskSID = styled("div")`
_35
background-color: ${props => props.theme.MainHeader.Container.background};
_35
`;
_35
_35
// Note the added withTheme() helper function
_35
export default withTheme(withTaskContext(MyComponent));


Call a custom component from a plugin

call-a-custom-component-from-a-plugin page anchor

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.


_10
import MyComponent from '<relative_path_to_component_file>';
_10
...
_10
async 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.


Rate this page: