Menu

Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Adding 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.

Flex TaskInfoPanel with new component

Prerequisites

In order to complete this activity, you’ll need the following:

  • A Twilio account with an existing Flex environment provisioned (start here)
  • NPM version 5.0.0 or later installed (type npm -v in your terminal to check your version)
  • Node version 8.0.0 or later installed (type node -v in your terminal to check your version)
  • A local instance of Flex UI (aka flex-ui-sample, see here for more details)
  • An editor of your choosing

Default state (TaskInfoPanel)

The TaskInfoPanel appears when you click on a Task and select the tab with the i icon. The default Flex TaskInfoPanel is populated with information about the Task, such as the type, priority, and customer context. It looks something like this:

Flex TaskInfoPanel initial state

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.

Creating the component

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.

         <div>
             <br />
             <hr />
             <h3>TO DO</h3>
             <ul>
               <li>Answer the task</li>
               <li>Locate the customer's record in the CRM</li>
               <li>Find relevant account details</li>
               <li>Resolve the customer's support issue</li>
               <li>Complete the task</li>
             </ul>
         </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:

import React from 'react';

export class MyCustomTaskInfoPanelItem extends React.Component<any, MyState> {
    render() {
        return (
         <div>
             <br />
             <hr />
             <h3>TO DO</h3>
             <ul>
               <li>Answer the task</li>
               <li>Locate the customer's record in the CRM</li>
               <li>Find relevant account details</li>
               <li>Resolve the customer's support issue</li>
               <li>Complete the task</li>
             </ul>
         </div>
        );
    }
}

You’ll see the HTML from above, wrapped in a render() method in the class component MyCustomTaskInfoPanelItem (New to React components? Learn more here!).

Adding the component to the canvas

Now that we have a component, it’s time to bring it into the canvas.

First, we need to import the component. Open App.js and add the following line:

import { MyCustomTaskInfoPanelItem } from "./MyCustomTaskInfoPanelItem";

Next, let’s use the add() method to add our component to the canvas.

We can tell from the Flex Component guide that the area of the canvas we’re concerned with is the TaskInfoPanel.

Add the following line to your app’s constructor:

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 choosing to use 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 flex-ui-sample app and have not changed anything else yet, your App.js will look like this:

import React from 'react';
import * as Flex from '@twilio/flex-ui';
import { MyCustomTaskInfoPanelItem } from './MyCustomTaskInfoPanelItem';

class App extends React.Component {

  state = {};

  constructor(props) {
    super(props);

    const { configuration } = props;
    Flex.ContactCenterManager.create(undefined, configuration)
      .then(manager => this.setState({ manager }))
      .catch(error => this.setState({ error }));
    Flex.TaskInfoPanel.Content.add(<MyCustomTaskInfoPanelItem key="to-do-list"/>);
  }

  render() {
    const { manager, error } = this.state;
    if (manager) {
      return (
        <Flex.ContextProvider manager={manager}>
          <Flex.RootContainer />
        </Flex.ContextProvider>
      );
    }

    if (error) {
      console.error("Failed to initialize Flex", error);
    }

    return null;
  }
}

export default App;

Save the file, and launch your instance of Flex UI. Create a new Task by initiating a call, chat, or SMS, and click on the info panel for that Task. You should see your to-do list at the bottom of the panel:

custom component, zoomed in

What next?

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

  • Make this component more dynamic with props (the Task object is a good place to start)
  • Reconfigure the canvas by using the replace() method to swap in your custom components.
  • Try creating a custom component that uses a third-party API
Rate this page:

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 browsing the Twilio tag on Stack Overflow.