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

Add Components to Flex UI


In this guide, we'll add a custom component to the TaskInfoPanel that features a simple to-do list for the Agent. This component will appear at the bottom of the info panel, and will render some simple HTML.

Twilio Flex TaskInfoPanel.

Prerequisites

prerequisites page anchor

In order to complete this activity, you'll need a local Flex Plugin development environment setup (start here).


Start your local development environment by running twilio flex:plugins:start inside your Flex Plugin's directory. An instance of Flex should now be open and initialized in your browser at localhost.


Creating a Task for Development

creating-a-task-for-development page anchor

Since we'll be modifying the content within the Task Information Panel (TaskInfoPanel), let's start by creating a Task to view our ongoing development. Each Flex installation is setup with a phone number to develop with. To create a test task, do the following:

  1. Find your Flex provisioned phone number in the phone numbers(link takes you to an external page) page of the Twilio Console.
  2. Text or call the phone number.
  3. Open your Flex instance and accept the new task.
  4. In the Task Panel, open the Task's Info tab.

This is where we'll be working to add the Todo List.

The default Flex TaskInfoPanel is populated with information about the Task, such as type, priority, and customer context.

We're going to add a little bit of additional information for our Agent in the form of a brief to-do list. For now, this will just be static HTML, and it will be the same for every Task.


Let's start with the HTML we'd like to render in the info panel. We'll include a line break and a horizontal rule for visual consistency with the existing info panel components, and then add a heading and a brief unordered list filled with items for our Agent.


_12
<div>
_12
<br />
_12
<hr />
_12
<p>TO DO</p>
_12
<ul style={{ listStyle: "disc", paddingLeft: "20px" }}>
_12
<li>Answer the task</li>
_12
<li>Locate the customer's record in the CRM</li>
_12
<li>Find relevant account details</li>
_12
<li>Resolve the customer's support issue</li>
_12
<li>Complete the task</li>
_12
</ul>
_12
</div>

Organization of your components is up to you, but to keep things simple for this example, we're going to create this component in a new file in src called MyCustomTaskInfoPanelItem.js. Open this file in your editor and add the following component code:


_18
import React from 'react';
_18
_18
const MyCustomTaskInfoPanelItem = () => (
_18
<div>
_18
<br />
_18
<hr />
_18
<p>TO DO</p>
_18
<ul style={{ listStyle: "disc", paddingLeft: "20px" }}>
_18
<li>Answer the task</li>
_18
<li>Locate the customer's record in the CRM</li>
_18
<li>Find relevant account details</li>
_18
<li>Resolve the customer's support issue</li>
_18
<li>Complete the task</li>
_18
</ul>
_18
</div>
_18
);
_18
_18
export default MyCustomTaskInfoPanelItem;

You'll see the HTML from above, wrapped in a render() method in the class component MyCustomTaskInfoPanelItem (New to React components? Learn more here(link takes you to an external page)!).


Adding the component to the canvas

adding-the-component-to-the-canvas page anchor

Now that we have a component, it's time to bring it into the canvas. First, we need to import the component. Open your main plugin file (example: TodoPlugin.js) and add the following line:


_10
import MyCustomTaskInfoPanelItem from "./MyCustomTaskInfoPanelItem";

Next, let's use the add() method to add our component to the canvas. The area of the canvas we're concerned with is the TaskInfoPanel(link takes you to an external page). Add the following line to your app's init() method:


_10
flex.TaskInfoPanel.Content.add(<MyCustomTaskInfoPanelItem key="to-do-list"/>);

Here, we're following the schema of Component.Content.add/replace(<MyComponent />, {options}), where Flex.TaskInfoPanel is the base component and we are using the add() method to insert our new MyCustomTaskInfoPanelItem component, with a key of "to-do-list" and no additional configuration options.

If you're starting with the default plugin and have not changed anything else yet, your TodoPlugin.js will look like this:


_22
import { FlexPlugin } from 'flex-plugin';
_22
import React from 'react';
_22
import { MyCustomTaskInfoPanelItem } from './MyCustomTaskInfoPanelItem';
_22
_22
const PLUGIN_NAME = 'TodoPlugin';
_22
_22
export default class TodoPlugin extends FlexPlugin {
_22
constructor() {
_22
super(PLUGIN_NAME);
_22
}
_22
_22
/**
_22
* This code is run when your plugin is being started
_22
* Use this to modify any UI components or attach to the actions framework
_22
*
_22
* @param flex { typeof import('@twilio/flex-ui') }
_22
* @param manager { import('@twilio/flex-ui').Manager }
_22
*/
_22
init(flex, manager) {
_22
flex.TaskInfoPanel.Content.add(<MyCustomTaskInfoPanelItem key="to-do-list"/>);
_22
}
_22
}

Save the file, and switch to your instance of Flex UI. To see the to-do list, click on the Info tab.


Congratulations, you've created your first component and added it to Flex UI! Here are some ideas of where to go next:


Rate this page: