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?

Components - add, replace, and remove

Overview of Flex components

Flex UI is a library of programmable or dynamic components that exposes a content property and allows you to add, replace, and remove any component and its children.

Content property and add / replace / remove methods

Below you can find a list of UI components and their details, that can be overridden programmatically. This can be done by using add, replace and remove methods with options.

All components must have a key declared

Syntax for add and replace methods

Flex.Component.Content.add(<MyComponent key="demo-component"/>, {options})

Flex.Component.Content.replace(<MyComponent key="demo-component"/>, {options})

Example

Below is an example of adding a component called AnotherMuteButton to the MainHeader component, aligned to the end (here left) and placed as the first component in front of native components MuteButton and UserControls:

Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {sortOrder: -1, align: “end”});

Syntax for remove method

Flex.Component.Content.remove(key, {options})

Example

Below is an example of removing the AnotherMuteButton component from the MainHeader component. This component is removed by the key we set above, "mute".

Flex.MainHeader.Content.remove("mute");

Options for add/replace/remove methods

Option

Description

Example

if

Type: expression

Used in both add and replace methods to add conditions, on which component is added or replaced

if: props => props.task.source.taskChannelUniqueName === "custom1"

sortOrder

Type: number

Used in add method to specify the order in which the new component is placed in relation to other childern of the parent component. Native children component take priority. Sort order counter start with 0. To always place new component at the very start or end of the order, use large numbers like -100 or 100, depending on the direction,.

-1, 0, 1, 100
align

Type: string

Used in add method, to align new component either top/bottom or right/left, depending on the direction of the parent component

Possible values:

Start - aligns new component left of top.

End - aligns right or bottom.

start, end

Components

Each immediate child of a component has a key (required for the add, replace and remove methods) and a set of properties that will be inherited by its children. To explore a component's key and props, we recommend using the React developer tools extension for Chrome or Firefox.

Inspecting a component's key

To find a component's key, navigate to the top level of the component in the JSX tree

Screen Shot 2018-11-28 at 11.32.33.png

Inspecting a component's props

To explore component props, navigate to the DynamicComponent part of the component in the JSX tree

Screen Shot 2018-11-28 at 11.35.55.png

You can find the description of most properties in the UI Configuration section.

Agents Desktop View components overview

Overview-agentUI_2.png

Teams View components overview

Overview-Supervisor_UI_2.png

JSX tree of programmable components

The JSX tree below demostrates the structure of FLEX UI components and parent-child hierarchy

<RootContainer>
  <MainHeader/>
  <MainContainer>
<SideNav/>
<NotificationBar/>
<LiveCommsBar>
<LiveCommsBarItem/>
<LiveCommsBar/> <ViewCollection> <View name="agent-desktop"> <AgentDesktopView> <AgentDesktopView.Panel1> <NoTasksCanvas/> <TaskListContainer> // (static and filtered) <TaskList activeFilter={TaskListContainer.props.staticTaskFilter}> <TaskListItem> <TaskListChatItem/> <TaskListCallItem/> </TaskListItem> </TaskList> <TaskList filter={TaskListContainer.props.taskFilter}> <TaskListItem> <TaskListChatItem/> <TaskListCallItem/> </TaskListItem> </TaskList> </TaskListContainer> <TaskCanvas> <TaskCanvasHeader/> <TaskCanvasTabs> <IncomingTaskCanvas/> <TaskInfoPanel/> <CallCanvas/> <MessagingCanvas> <MessageList> <MessageList.WelcomeMessage/> <MessageListItem> <MessageBubble/> </MessageListItem> </MessageList> <MessageInput/> </MessagingCanvas> </CallCanvas> </TaskCanvasTabs> </TaskCanvas> </AgentDesktopView.Panel1> <AgentDesktopView.Panel2> <CRMContainer/> </AgentDesktopView.Panel2> </AgentDesktopView>
<TeamsView>
<AgentsDataTable>
<UserCard/>
<TaskCardList>
</TaskCard>
<TaskCardList/>
</AgentsDataTable>
<Supervisor.TaskCanvas>
<Supervisor.TaskCanvasHeader/>
<Supervisor.TaskCanvasTabs>
<TaskOverviewCanvas>
<TaskDetailsCanvas/>
</TaskOverviewCanvas>
<Supervisor.TaskInfoPanel/>
</Supervisor.TaskCanvasTabs>
<Supervisor.TaskCanvas/>
<WorkerCanvas>
<WorkerCanvasHeader/>
<WorkerProfile/>
<WorkerSkills/>
</WorkerCanvas>
</TeamsView> </View> </ViewCollection> </MainContainer> </RootContainer>

RootContainer

Direction: Horizontal

MainHeader

MainHeader_2.png

Direction: Horizontal

MainContainer

MainContainer-V2.png

Direction: Horizontal

LiveCommsBar

LiveCommsBar.png

Direction: Horizontal

NotificationsBar

NotificationBar.png

Customizing the NotificationsBar is described in Notifications Framework

Direction: Horizontal

SideNav

Sidenav.png

Direction: Vertical

AgentDesktopView

AgentDesktopView-V2.png

Direction: Horizontal

AgentDesktopView.Panel1

AgentDesktopViewPanel1-v2.png

Direction: Vertical

AgentDesktopView.Panel2

Flex.AgentDesktopView.Panel2

Direction: Vertical

CRMContainer

NoCRM.png

Direction: Vertical

NoTasksCanvas

NoTasksCanvas_v3.png

Direction: Vertical

TaskListContainer

TaskListContainer-v2.png

Direction: Vertical

TaskList

TaskList.png

For details on how to configure filters for the task list, see the UI configuration page

Direction: Vertical

TaskListitem

Screen Shot 2018-11-28 at 15.18.02.png

Add / Replace / Remove and properties of the TaskListItem are described in the Task Channel Definition API

TaskCanvas

Taskcanvas-v2.png

Direction: Vertical

TaskCanvasHeader

Flex.TaskCanvasHeader

Direction: Horizontal

TaskCanvasTabs

Flex.TaskCanvasTabs

Below is an example of how to add tabs and content to TaskCanvasTabs

import { Tab } from "@twilio/flex-ui"

init(flex, manager) {
  const Img = <img src="http://someimage.jpg" />; 

  flex.TaskCanvasTabs.Content.add(<Tab icon={Img} iconActive={Img} key="my-new-tab"><MyNewTabComponent/></Tab>);
}

Direction: Horizontal

TaskInfoPanel

Flex.TaskInfoPanel

Direction: Vertical

IncomingTaskCanvas

Flex.IncomingTaskCanvas

Direction: Vertical

CallCanvas

CallCanvas-v2.png

Direction: Vertical

MessagingCanvas

MessagingCanvas-v2.png

Direction: Vertical

MessageList

Flex.MessageList

Direction: Horizontal

MessageList.WelcomeMessage

MessageList.WelcomeMessage-v2.png

Direction: Vertical

MessageListItem

Flex.MessageListItem

Direction: Vertical

MessageBubble

Flex.MessageBubble

Direction: Vertical

MessageInput

Flex.MessageInput

Direction: Vertical

AgentsDataTable

AgentsDataTable is a programmable component. It is a Material UI table styled to the Flex theme with data from the Insights SDK.

By default, AgentsDataTable contains the following rows:

  • Agent - UserCard component.
    • SupervisorUserCardFirstLine - default value retrieves the full name of the worker if it exists, and the identity if not. Variables provided to the template: worker
    • SupervisorUserCardSecondLine - default value shows the availability of the worker. Variables provided to the template: worker
    • The first and second row are templatable strings with names.
  • Calls - TaskCardList component, showing tasks of the voice channel in assigned and wrapping state
  • Other tasks - TaskCardList component, showing tasks of all channels (apart from voice) in assigned and wrapping state

Customizing filters

By default, AgentsDataTable has 2 filters:

  • All agents
  • Active agents - agents with current activity state set to “Idle”

Custom filters can be configured programmatically, by defining in the application config:

   componentProps: {
        AgentsDataTable: {
            filters: [
                {
                    query: 'data.activity_name == "Idle"',
                    text: "Idle agents"
                }
            ]
        }
    },...

or as component defaultProps:

This example also shows how you can define a filter based on attributes of a logged-in worker.

Flex.AgentsDataTable.defaultProps.filters = [{
            query: `data.attributes.full_name == "${manager.workerClient.attributes.full_name}"`,
            text: "My Team",
        }];

Data here represents TaskRouter worker object. You can filter by any attributes on the worker (agent)

Add columns to AgentDataTable

Columns can be added to the table programmatically. Columns cannot be removed yet (the ability to do that is coming soon). You can add columns with different types of content:

  • TaskCardList
  • Any custom component or string
  • String with dynamic content (e.g. worker attributes)

TaskCardList

import { ColumnDefinition } from "@twilio/frame-ui";
import { TaskCardList } from "@twilio/flex-ui";

Flex.AgentsDataTable.Content.add(
       <ColumnDefinition key="calls" header={"My Custom Header"} content={(items, context) => <TaskCardList tasks={items.tasks} />} />);


TaskCardList also has a filter prop which can be used here, and which is optional. If the filter prop is not set, all tasks in the list will be rendered:

export interface TaskCardListProps {
   compareFunction?: (a: TaskData, b: TaskData) => number;
   filter?: (task: TaskData) => boolean;
   tasks: TaskData[];
}


Any custom component

import { ColumnDefinition } from "@twilio/frame-ui";

Flex.AgentsDataTable.Content.add(<ColumnDefinition key="hello" header={"Helloxxx"} content={<div>hello</div>}/>);


Worker attributes

import { ColumnDefinition } from "@twilio/frame-ui";

Flex.AgentsDataTable.Content.add(<ColumnDefinition key="team" header={"Team"} content={item => item.worker.attributes.team_name}/>);

TaskCardList

TaskCardList.png

Direction: Vertical

TaskCard

TaskCard.png

Direction: Horizontal

UserCard

AgentsDataTable.png

Direction: Horizontal

Supervisor.TaskCanvas

Supervisor.TaskCanvas.png

Direction: Vertical

Supervisor.TaskCanvasHeader

Supervisor.TaskCanvasHeader.png

Direction: Vertical

Supervisor.TaskCanvasTabs

Supervisor.TaskCanvasTabs.png

Below is an example of how to add tabs and content to TaskCanvasTabs

const Img = <img src="http://someimage.jpg" />; 

Flex.Supervisor.TaskCanvasTabs.Content.add(<Tab icon={Img} iconActive={Img}><MyNewTabComponent/></Tab>);

Direction: Vertical

WorkerCanvas

WorkerCanvas_2.png

Direction: Vertical

WorkerCanvasHeader

WorkerCanvasHeader.png

Direction: Vertical

WorkerProfile

WorkerProfile_2.png

Direction: Vertical

WorkerSkills

WorkerSkills.png

Direction: Vertical

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.