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

Flex UI Components


(information)

Info

Auto-Generated Documentation for the Flex UI(link takes you to an external page) is now available as a beta distribution. The auto-generated documentation is accurate and comprehensive, and so may differ from what you see in the official Flex UI documentation.

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


Content property and add / replace / remove methods

content-property-and-add--replace--remove-methods page anchor

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.

(warning)

Warning

All components must have a key declared.

Syntax for add/replace methods

syntax-for-addreplace-methods page anchor

_10
Flex.Component.Content.add(<MyComponent key="demo-component"/>, {options});
_10
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:


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

Syntax for remove method

syntax-for-remove-method page anchor

Remove method allows you to remove immediate children of a programmable component by their key.


_10
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".


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

Options for add/replace/remove methods

options-for-addreplaceremove-methods page anchor

if (Expression)

if-expression page anchor

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

Example


_10
Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {
_10
if : props => props.task.source.taskChannelUniqueName === "custom1"
_10
});

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

Example


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

align ('start' | 'end')

align-start--end page anchor

Used in the add method to align new components either to the top/bottom or right/left, depending on the direction of the parent component. Possible values are:

  • start - Aligns new component on the left or top
  • end - aligns new component on the right or bottom

Example


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


Each immediate child of a component has a key (required for the add and replace methods) and a set of properties that will be inherited by its children. To find a component's key or explore component props, go to Flex UI API Reference(link takes you to an external page).

Agents Desktop View components overview

agents-desktop-view-components-overview page anchor
Overview-agentUI_2.

Teams View components overview

teams-view-components-overview page anchor
Overview-Supervisor_UI_2.

View Full Component Reference >(link takes you to an external page)

Direction: Horizontal

View Full Component Reference >(link takes you to an external page)

Direction: Horizontal

MainHeader_2.

View Full Component Reference >(link takes you to an external page)

Direction: Horizontal

MainContainer-V2.

View Full Component Reference >(link takes you to an external page)

Direction: Horizontal

LiveCommsBar.

Direction: Horizontal

Customizing the NotificationsBar is described in Notifications Framework

NotificationBar.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

Sidenav.

Agent Desktop View Components

agent-desktop-view-components page anchor

View Full Component Reference >(link takes you to an external page)

Direction: Horizontal

AgentDesktopView-V2.

AgentDesktopView.Panel1

agentdesktopviewpanel1 page anchor

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

AgentDesktopViewPanel1-v2.

AgentDesktopView.Panel2

agentdesktopviewpanel2 page anchor

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

Flex.AgentDesktopView.Panel2.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

NoCRM.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

NoTasksCanvas_v3.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

TaskListContainer-v2.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

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

TaskList.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

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

TaskListItem.

Direction: Horizontal

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

TaskListItemButtons.

Examples

Adding a button to Chat type task


_10
Flex.DefaultTaskChannels.Chat.addedComponents = [{
_10
target: "TaskListButtons",
_10
component: <Flex.IconButton key="eye_button" icon="Eye" />
_10
}];

Adding a button to Chat type task when it is in accepted state


_10
Flex.DefaultTaskChannels.Chat.addedComponents = [{
_10
target: "TaskListButtons",
_10
component: <Flex.IconButton key="eye_button" icon="Eye" />,
_10
options: { if: props.task.status === "accepted" }
_10
}];

Removing a reject button from Chat type task


_10
Flex.DefaultTaskChannels.Chat.removedComponents = [{
_10
target: "TaskListButtons",
_10
key: "reject"
_10
}];

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

Taskcanvas-v2.width-500.

View Full Component Reference >(link takes you to an external page)

Direction: Horizontal

Flex.TaskCanvasHeader.

View Full Component Reference >(link takes you to an external page)

Direction: Horizontal

Flex.TaskCanvasTabs.

Example

Add tabs and content


_11
import { Tab } from "@twilio/flex-ui"
_11
_11
init(flex, manager) {
_11
const Img = <img src="http://someimage.jpg" />;
_11
_11
flex.TaskCanvasTabs.Content.add(
_11
<Tab icon={Img} iconActive={Img} key="my-new-tab">
_11
<MyNewTabComponent/>
_11
</Tab>
_11
);
_11
}

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

Flex.TaskInfoPanel.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

Flex.IncomingTaskCanvas.

IncomingTaskCanvasActions

incomingtaskcanvasactions page anchor

View Full Component Reference >(link takes you to an external page)

Direction: Horizontal

IncomingTaskCanvasActions.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

CallCanvas-v2.

View Full Component Reference >(link takes you to an external page)

Direction: Horizontal

CallCanvasActions.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

MessagingCanvas-v2.width-500.

View Full Component Reference >(link takes you to an external page)

Direction: Horizontal

Flex.MessageList.

MessageList.WelcomeMessage

messagelistwelcomemessage page anchor

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

MessageList.WelcomeMessage-v2.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

Flex.MessageListItem.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

Flex.MessageBubble.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

Flex.MessageInput.

View Full Component Reference >(link takes you to an external page)

Direction: Horizontal

WorkerDirectory.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

WorkerDirectoryTabs.

The Worker directory contains 2 tabs by default:

  • Agents - key workers
  • Queues - key queues

Example: Add new custom tab


_10
Flex.WorkerDirectory.Tabs.Content.add(
_10
<Flex.Tab key="my-tab" label="My Tab">
_10
<div> "Hello World"
_10
</div>
_10
</Flex.Tab>
_10
);

Worker Directory Tabs Hidden Filters

WorkerDirectoryTabs accepts 2 default props:

  • hiddenWorkerFilter
  • hiddenQueueFilter

These filters are applied to the list in combination with the filter applied by the user typing in the search string. You can programmatically apply a filter that is hidden from the user, i.e. the user cannot disable it. You could use this feature to pre-filter the list of available transferees an agent can search and choose from, to their team members or available agents only. In the following example, we use live query to:

  • filter the agents list to only show agents with a specific team_name attribute ( you can set user attributes via your SSO provider )
  • filter the agents list to only show agents that are in the Available activity
  • filter the queues list to only show queues with a specific queue_name attribute

_10
// Filter Agents by Worker Attributes or activity_name
_10
Flex.WorkerDirectoryTabs.defaultProps.hiddenWorkerFilter = 'data.attributes.team_name CONTAINS "sales"'
_10
Flex.WorkerDirectoryTabs.defaultProps.hiddenWorkerFilter = 'data.activity_name CONTAINS "Available"'
_10
_10
// Filter Queues by queue_name or queue_sid
_10
Flex.WorkerDirectoryTabs.defaultProps.hiddenQueueFilter = 'data.queue_name CONTAINS "sales"'

The hidden filter feature is only available in @twilio/flex-ui@1.26.0 and later.

View Full Component Reference >(link takes you to an external page)

Direction: Horizontal

ParticipantsCanvas is a responsive component and will switch between regular mode and list mode depending on the size of the container its placed in. Regular mode and list mode contain different children - ParticipantCanvas and ParticipantCanvasListItem repsectively. When customizing ParticipantsCanvas children, like adding an additional button, remember to do customization to both children components

Regular mode

ParticipantsCanvas.

List mode

ParticipantsCanvas in ListMode.

View Full Component Reference >(link takes you to an external page)

Direction: Horizontal

ParticipantCanvas.

ParticipantCanvasListItem

participantcanvaslistitem page anchor

Direction: Vertical

ParticipantCanvas.ListItem.

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

View Full Component Reference >(link takes you to an external page)

(warning)

Warning

As of flex-ui v1.12.0 new exports were added to refer to workers instead of agents:

  • WorkersDataTable
  • WorkerListFilterSelect
  • WorkersDataTable
  • WorkersDataTableProps
  • WorkerListFilter

For example, AgentsDataTable is now referred to as WorkersDataTable. However, previous exports (like AgentsDataTable) are kept for backwards compatibility

By default, WorkersDataTable contains the following rows:

Add columns to WorkersDataTable

add-columns-to-workersdatatable page anchor

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 component
  • Any custom component
  • String

TaskCardList


_10
import { TaskCardList, ColumnDefinition } from "@twilio/flex-ui";
_10
_10
Flex.WorkersDataTable.Content.add(
_10
<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:


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

Any custom component


_10
import { ColumnDefinition } from "@twilio/flex-ui";
_10
_10
Flex.WorkersDataTable.Content.add(<ColumnDefinition key="hello" header={"Helloxxx"} content={<div>hello</div>}/>);

String

You can use Worker attributes as follows:


_10
import { ColumnDefinition } from "@twilio/flex-ui";
_10
_10
Flex.WorkersDataTable.Content.add(<ColumnDefinition key="team" header={"Team"} content={item => item.worker.attributes.team_name}/>);

By default, WorkersDataTable has 2 filters:

  • All agents
  • Active agents - worker with current activity state set of type available

Filters for the Workers Table can be programmatically changed, by defining filters property of WorkersDataTable component

Example of creating a filter to show workers with activity "Break"

With configuration object


_10
componentProps: {
_10
WorkersDataTable: {
_10
filters: [
_10
{
_10
query: 'data.activity_name == "Break"',
_10
text: "Workers on break"
_10
}
_10
]
_10
}
_10
},...

With defaultProps API


_10
Flex.WorkersDataTable.defaultProps.filters = [
_10
{
_10
query: 'data.activity_name == "Break"',
_10
text: "Workers on break"
_10
},...
_10
]

Query data schema

data object in the query refers to TaskRouter worker resource. The following attributes on a worker can be used for filters query:

object namedescriptionformat
data.activity_nameworker's current activity friendly nameString
data.attributesworker's attributesKey value pair
data.date_activity_changeddate of the last activity change of the current workerDatetime ISO8601
data.friendly_nameworker's friendly nameString
data.worker_activity_sidworker's current activity sidString
data.worker_sidworker's sidString
data.workspace_sidworker's workspace sidString

Query operators

WorkersDataTable is powered by Twilio Sync and we use Twilio Sync Live Query for filtering of the workers. See Live Query docs for supported query operators.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

TaskCardList.

View Full Component Reference >(link takes you to an external page)

Direction: Horizontal

TaskCard.width-800.

Direction: Horizontal

AgentsDataTable.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

Supervisor.TaskCanvas.

Supervisor.TaskCanvasHeader

supervisortaskcanvasheader page anchor

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

Supervisor.TaskCanvasHeader.

Supervisor.TaskCanvasTabs

supervisortaskcanvastabs page anchor

View Full Component Reference >(link takes you to an external page)

Direction: Horizontal

Supervisor.TaskCanvasTabs.

Worker directory contains 2 tabs by default:

Examples

Adding tabs and content


_10
Flex.Supervisor.TaskCanvasTabs.Content.add(
_10
<Flex.Tab key="my-tab" label="My Tab">
_10
<div> "Hello World"
_10
</div>
_10
</Flex.Tab>
_10
);

View Full Component Reference >(link takes you to an external page)

Direction: Horizontal

Flex.TaskInfoPanel.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

WorkerCanvas_2.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

WorkerCanvasHeader.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

WorkerProfile_2.

View Full Component Reference >(link takes you to an external page)

Direction: Vertical

WorkerSkills.

Rate this page: