# Flex UI 1.x.x components
> \[!NOTE]
>
> For the Flex UI 2.x.x version of this content, see [Flex UI Components](/docs/flex/developer/ui/components).
> \[!NOTE]
>
> [Auto-Generated Documentation for the Flex UI](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/) 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 allow you to add, replace, or remove any component and its children.
## Content property and add / replace / remove methods
This article provdies a list of UI components and their details. You can override these components programmatically using the `add`, `replace`, and `remove` methods with options.
> \[!WARNING]
>
> You must declare a key for all components.
### Syntax for the `add` and `replace` methods
```javascript
Flex.Component.Content.add(, {options});
Flex.Component.Content.replace(, {options});
```
**Example**
The following example adds a component called `AnotherMuteButton` to the `MainHeader` component. The `AnotherMuteButton` component appers aligned to the end (left, in the example) and placed as the first component in front of native components `MuteButton` and `UserControls`:
```javascript
Flex.MainHeader.Content.add(, {
sortOrder: -1,
align: "end"
});
```
### Syntax for the `remove` method
The `remove` method allows you to remove **immediate children** of a programmable component by their key.
```javascript
Flex.Component.Content.remove(key, {options});
```
**Example**
The following example shows removing the `AnotherMuteButton` component from the `MainHeader` component `mute` key set in the previous example.
```javascript
Flex.MainHeader.Content.remove("mute");
```
### Options for the `add`, `replace`, and `remove` methods
#### if (*Expression*)
Used in both `add` and `replace` methods to add conditions on which component is added or replaced.
**Example**
```javascript
Flex.MainHeader.Content.add(, {
if : props => props.task.source.taskChannelUniqueName === "custom1"
});
```
#### sortOrder (*number*)
Used in the `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 start or end of the order, use large numbers like -100 or 100, depending on the direction.
**Example**
```javascript
Flex.MainHeader.Content.add(, {
sortOrder: -1
});
```
#### align ('*start*' | '*end*')
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**
```javascript
Flex.MainHeader.Content.add(, {
align: "end"
});
```
## Programmable components
Each immediate child of a component has a key (required for the `add` and `replace` methods) and a set of properties that its children inherit. To find a component's `key` or explore component props, go to the [Flex UI API Reference](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/).
### Agent Desktop View components overview
### Teams View components overview
## RootContainer
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/RootContainer.html)
*Direction: Horizontal*
### MainHeader
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/MainHeader.html)
*Direction: Horizontal*
### MainContainer
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/MainContainer.html)
*Direction: Horizontal*
### LiveCommsBar
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/LiveCommsBar.html)
*Direction: Horizontal*
### NotificationsBar
*Direction: Horizontal*
Customizing the NotificationsBar is described in Notifications Framework
### SideNav
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/SideNav.html)
*Direction: Vertical*
## Agent Desktop View Components
### AgentDesktopView
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/AgentDesktopView.html)
*Direction: Horizontal*
### AgentDesktopView.Panel1
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/Panel1.html)
*Direction: Vertical*
### AgentDesktopView.Panel2
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/Panel2.html)
*Direction: Vertical*
### CRMContainer
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/CRMContainer.html)
*Direction: Vertical*
### NoTasksCanvas
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/NoTasksCanvas.html)
*Direction: Vertical*
### TaskListContainer
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/TaskListContainer.html)
*Direction: Vertical*
### TaskList
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/TaskList.html)
*Direction: Vertical*
For details on how to configure filters for the task list, see the UI configuration page.
### TaskListItem
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/TaskListItem.html)
*Direction: Vertical*
*Add / Replace / Remove and properties of the TaskListItem are described in the Task Channel Definition API.*
### TaskListItemButtons
*Direction: Horizontal*
Add, replace, or remove and properties of the TaskListItem are described in the Task Channel Definition API.
**Examples**
*Adding a button to Chat type task*
```javascript
Flex.DefaultTaskChannels.Chat.addedComponents = [{
target: "TaskListButtons",
component:
}];
```
*Adding a button to Chat type task when it is in* `accepted` *state*
```javascript
Flex.DefaultTaskChannels.Chat.addedComponents = [{
target: "TaskListButtons",
component: ,
options: { if: props.task.status === "accepted" }
}];
```
*Removing a* `reject` *button from Chat type task*
```javascript
Flex.DefaultTaskChannels.Chat.removedComponents = [{
target: "TaskListButtons",
key: "reject"
}];
```
### TaskCanvas
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/Supervisor%25E2%2580%25A4TaskInfoPanel.html)
*Direction: Vertical*
### TaskCanvasHeader
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/TaskCanvasHeader.html)
*Direction: Horizontal*
### TaskCanvasTabs
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/TaskCanvasTabs.html)
*Direction: Horizontal*
**Example**
*Add tabs and content*
```xml
import { Tab } from "@twilio/flex-ui"
init(flex, manager) {
const Img = 
;
flex.TaskCanvasTabs.Content.add(
);
}
```
### TaskInfoPanel
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/TaskInfoPanel.html)
*Direction: Vertical*
### IncomingTaskCanvas
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/IncomingTaskCanvas.html)
*Direction: Vertical*
### IncomingTaskCanvasActions
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/IncomingTaskCanvasActions.html)
*Direction: Horizontal*
### CallCanvas
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/CallCanvas.html)
*Direction: Vertical*
### CallCanvasActions
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/CallCanvasActions.html)
*Direction: Horizontal*
### MessagingCanvas
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/MessagingCanvas.html)
*Direction: Vertical*
### MessageList
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/MessageList.html)
*Direction: Horizontal*
### MessageList.WelcomeMessage
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/WelcomeMessage.html)
*Direction: Vertical*
### MessageListItem
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/MessageListItem.html)
*Direction: Vertical*
### MessageBubble
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/MessageBubble.html)
*Direction: Vertical*
### MessageInput
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/MessageInput.html)
*Direction: Vertical*
### WorkerDirectory
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/WorkerDirectory.html)
*Direction: Horizontal*
### WorkerDirectoryTabs
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/WorkerDirectoryTabs.html)
*Direction: Vertical*
The Worker directory contains 2 tabs by default:
* **Agents** - key `workers`
* **Queues**- key `queues`
*Example: Add new custom tab*
```javascript
Flex.WorkerDirectory.Tabs.Content.add(
"Hello World"
);
```
**Worker Directory Tabs Hidden Filters**
`WorkerDirectoryTabs` accepts 2 default props:
* `hiddenWorkerFilter`
* `hiddenQueueFilter`
Flex applies filters to the list in combination with the filter the user applies by typing in a search string. You can programmatically apply a filter that's hidden from the user, which means the user can't disable it. You could use this feature to pre-filter the list of available transferees an agent can search and choose from to show their team members or available agents only. The following example uses [live query](/docs/sync/live-query) to do the following:
* Flexilter the agents list to only show agents with a specific `team_name` attribute ([you can set user attributes via your SSO provider](/docs/flex/admin-guide/setup/sso-configuration))
* 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
```javascript
// Filter Agents by Worker Attributes or activity_name
Flex.WorkerDirectoryTabs.defaultProps.hiddenWorkerFilter = 'data.attributes.team_name CONTAINS "sales"'
Flex.WorkerDirectoryTabs.defaultProps.hiddenWorkerFilter = 'data.activity_name CONTAINS "Available"'
// Filter Queues by queue_name or queue_sid
Flex.WorkerDirectoryTabs.defaultProps.hiddenQueueFilter = 'data.queue_name CONTAINS "sales"'
```
The hidden filter feature is only available in [@twilio/flex-ui@1.26.0](/docs/flex/release-notes/ui-release-notes#v-1260) and later. Starting in 1.33.3, the `hiddenWorkerFilter` has been changed to `queueFilter` which takes a predicate function.
```javascript
Flex.WorkerDirectoryTabs.defaultProps.queueFilter = (queue) => queue.queueName.includes("HR")
```
### ParticipantsCanvas
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/ParticipantsCanvas.html)
*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**
### ParticipantCanvas
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/ParticipantCanvas.html)
*Direction: Horizontal*
### ParticipantCanvasListItem
*Direction: Vertical*
## Teams View components
### WorkersDataTable
`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 >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/WorkersDataTable.html)
> \[!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:
* *Agent* - [UserCard component](#usercard)
* `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 template strings with names.
* *Calls* -[TaskCardList component](#taskcardlist), showing tasks of the voice channel in assigned and wrapping state
* *Other tasks* - [TaskCardList component](#taskcardlist), showing tasks of all channels (apart from voice) in assigned and wrapping state
#### Add columns to WorkersDataTable
You can add columns to the table programmatically. Columns can't be removed. You can add columns with different types of content:
* `TaskCardList` component
* Any custom component
* String
*TaskCardList*
```javascript
import { TaskCardList, ColumnDefinition } from "@twilio/flex-ui";
Flex.WorkersDataTable.Content.add(
} />);
```
`TaskCardList` also has an optional filter property. If you don't set the filter property, Flex renders all tasks in the list:
```javascript
export interface TaskCardListProps {
compareFunction?: (a: TaskData, b: TaskData) => number;
filter?: (task: TaskData) => boolean;
tasks: TaskData[];
}
```
*Any custom component*
```javascript
import { ColumnDefinition } from "@twilio/flex-ui";
Flex.WorkersDataTable.Content.add(hello}/>);
```
*String*
You can use Worker attributes as follows:
```javascript
import { ColumnDefinition } from "@twilio/flex-ui";
Flex.WorkersDataTable.Content.add( item.worker.attributes.team_name}/>);
```
#### Customizing filters
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*
```javascript
componentProps: {
WorkersDataTable: {
filters: [
{
query: 'data.activity_name == "Break"',
text: "Workers on break"
}
]
}
},...
```
*With defaultProps API*
```javascript
Flex.WorkersDataTable.defaultProps.filters = [
{
query: 'data.activity_name == "Break"',
text: "Workers on break"
},...
]
```
#### Query syntax
**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](/docs/sync) and Flex uses Twilio Sync Live Query for filtering of the workers. See [Live Query docs](/docs/sync/live-query) for supported query operators.
### TaskCardList
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/Supervisor%25E2%2580%25A4TaskCardList.html)
*Direction: Vertical*
### TaskCard
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/Supervisor%25E2%2580%25A4TaskCard.html)
*Direction: Horizontal*
### UserCard
*Direction: Horizontal*
### Supervisor.TaskCanvas
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/Supervisor%25E2%2580%25A4TaskCanvas.html)
*Direction: Vertical*
### Supervisor.TaskCanvasHeader
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/Supervisor%25E2%2580%25A4TaskCanvasHeader.html)
*Direction: Vertical*
### Supervisor.TaskCanvasTabs
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/Supervisor%25E2%2580%25A4TaskCanvasTabs.html)
*Direction: Horizontal*
Worker directory contains 2 tabs by default:
* **Overview** - key `overview`. Overview Tab has dynamic content based on the type of task
* For standard conference based voice tasks - [ParticipantsCanvas](#participantscanvas)
* For messaging tasks - [MessagingCanvas](#messagingcanvas)
* **Info** - key `info`. Info tab Contains [SupervisorTaskInfoPanel](#supervisortaskinfopanel)
**Examples**
*Adding tabs and content*
```javascript
Flex.Supervisor.TaskCanvasTabs.Content.add(
"Hello World"
);
```
### SupervisorTaskInfoPanel
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/Supervisor%25E2%2580%25A4TaskInfoPanel.html)
*Direction: Horizontal*
### WorkerCanvas
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/WorkerCanvas.html)
*Direction: Vertical*
### WorkerCanvasHeader
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/WorkerCanvasHeader.html)
*Direction: Vertical*
### WorkerProfile
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/WorkerProfile.html)
*Direction: Vertical*
### WorkerSkills
[View Full Component Reference >](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/WorkerSkills.html)
*Direction: Vertical*
