View Full Component Reference >
Direction: Horizontal
Auto-Generated Documentation for the Flex UI is now available. 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.
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.
1Flex.Component.Content.add(<MyComponent key="demo-component"/>, {options});2Flex.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:
1Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {2sortOrder: -1,3align: “end”4});
Remove method allows you to remove immediate children of a programmable component by their key.
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");
Used in both add
and replace
methods to add conditions on which component is added or replaced.
Example
1Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {2if : props => props.task.source.taskChannelUniqueName === "custom1"3});
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
1Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {2sortOrder: -13});
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:
Example
1Flex.MainHeader.Content.add(<AnotherMuteButton key="mute"/>, {2align: “end”3});
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.
View Full Component Reference >
Direction: Horizontal
View Full Component Reference >
Direction: Horizontal
View Full Component Reference >
Direction: Horizontal
View Full Component Reference >
Direction: Horizontal
Direction: Horizontal
Customizing the NotificationsBar is described in Notifications Framework
View Full Component Reference >
Direction: Horizontal
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Vertical
For details on how to configure filters for the task list, see the UI configuration page.
View Full Component Reference >
Direction: Vertical
Add / Replace / Remove and properties of the TaskListItem are described in the Task Channel Definition API.
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Horizontal
View Full Component Reference >
Direction: Horizontal
Example
Add tabs and content
1import { Tab } from "@twilio/flex-ui"23init(flex, manager) {4const Img = <img src="http://someimage.jpg" />;56flex.TaskCanvasTabs.Content.add(7<Tab icon={Img} iconActive={Img} key="my-new-tab">8<MyNewTabComponent/>9</Tab>10);11}
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Horizontal
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Horizontal
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Horizontal
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Horizontal
View Full Component Reference >
Direction: Vertical
The Worker directory contains 2 tabs by default:
workers
queues
Example: Add new custom tab
1Flex.WorkerDirectory.Tabs.Content.add(2<Flex.Tab key="my-tab" label="My Tab">3<div> "Hello World"4</div>5</Flex.Tab>6);
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:
team_name
attribute (
you can set user attributes via your SSO provider
)
Available
activity
queue_name
attribute
1// Filter Agents by Worker Attributes or activity_name2Flex.WorkerDirectoryTabs.defaultProps.hiddenWorkerFilter = 'data.attributes.team_name CONTAINS "sales"'3Flex.WorkerDirectoryTabs.defaultProps.hiddenWorkerFilter = 'data.activity_name CONTAINS "Available"'45// Filter Queues by queue_name or queue_sid6Flex.WorkerDirectoryTabs.defaultProps.hiddenQueueFilter = 'data.queue_name CONTAINS "sales"'
The hidden filter feature is only available in @twilio/flex-ui@1.26.0 and later. Starting in 1.33.3, the hiddenWorkerFilter
has been changed to queueFilter
which takes a predicate function.
Flex.WorkerDirectoryTabs.defaultProps.queueFilter = (queue) => queue.queueName.includes("HR")
View Full Component Reference >
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 respectively. When customizing ParticipantsCanvas children, like adding an additional button, remember to do customization to both children components
Regular mode
List mode
View Full Component Reference >
Direction: Horizontal
Direction: Vertical
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 >
As of flex-ui v1.12.0 new exports were added to refer to workers instead of agents:
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:
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
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
TaskCardList
1import { TaskCardList, ColumnDefinition } from "@twilio/flex-ui";23Flex.WorkersDataTable.Content.add(4<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:
1export interface TaskCardListProps {2compareFunction?: (a: TaskData, b: TaskData) => number;3filter?: (task: TaskData) => boolean;4tasks: TaskData[];5}
Any custom component
1import { ColumnDefinition } from "@twilio/flex-ui";23Flex.WorkersDataTable.Content.add(<ColumnDefinition key="hello" header={"Helloxxx"} content={<div>hello</div>}/>);
String
You can use Worker attributes as follows:
1import { ColumnDefinition } from "@twilio/flex-ui";23Flex.WorkersDataTable.Content.add(<ColumnDefinition key="team" header={"Team"} content={item => item.worker.attributes.team_name}/>);
By default, WorkersDataTable has 2 filters:
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
1componentProps: {2WorkersDataTable: {3filters: [4{5query: 'data.activity_name == "Break"',6text: "Workers on break"7}8]9}10},...
With defaultProps API
1Flex.WorkersDataTable.defaultProps.filters = [2{3query: 'data.activity_name == "Break"',4text: "Workers on break"5},...6]
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 name | description | format |
---|---|---|
data.activity_name | worker's current activity friendly name | String |
data.attributes | worker's attributes | Key value pair |
data.date_activity_changed | date of the last activity change of the current worker | Datetime ISO8601 |
data.friendly_name | worker's friendly name | String |
data.worker_activity_sid | worker's current activity sid | String |
data.worker_sid | worker's sid | String |
data.workspace_sid | worker's workspace sid | String |
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 >
Direction: Vertical
View Full Component Reference >
Direction: Horizontal
Direction: Horizontal
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Horizontal
Worker directory contains 2 tabs by default:
Overview - key overview
. Overview Tab has dynamic content based on the type of task
info
. Info tab Contains
SupervisorTaskInfoPanel
Examples
Adding tabs and content
1Flex.Supervisor.TaskCanvasTabs.Content.add(2<Flex.Tab key="my-tab" label="My Tab">3<div> "Hello World"4</div>5</Flex.Tab>6);
View Full Component Reference >
Direction: Horizontal
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Vertical
View Full Component Reference >
Direction: Vertical