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?

Teams View, Agents Data Table and Call Monitoring

Teams View


Teams view is visible for users with supervisor or admin role

TeamsView programmable components

The following components exist for the Supervisor Desktop View, aligned by their depth in the JSX tree:


AgentsDataTable component

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


By default, AgentsDataTable contains the following rows:

  • Agent - UserCard component.
    • SupervisorUserCardFirstLine - default value retrieves full name of the worker if exists and identity, if not. Variables provided to 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 voice channel in assigned and wrapping state
  • Other tasks - TaskCardList component, showing tasks of all channels, apart from voice, in assigned and wrapping state

TaskCardList contains TaskCards.


The first and second line are templatable strings with names:

  • SupervisorTaskCardHeader - by default name of the customer is shown. Variables provided to the template: task
  • SupervisorTaskCardDetail - by default has value {{helper.taskDetailedInfo}} that is a cumulative property based on templates SupervisorTaskLive, SupervisorTaskWrapUp, SupervisorTaskCompleted, depending on the task status. Variables given to the template are: task, helper

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


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

       <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}/>);

Customizing filters

By default, AgentsDataTable has 2 filters:

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

Filters for the Agents Table can be programmatically changed, by defining filters property of AgentsDataTable component

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

With configuration object

   componentProps: {
        AgentsDataTable: {
            filters: [
                    query: 'data.activity_name == "Break"',
                    text: "Agents on break"

With defaultProps API

Flex.AgentsDataTable.defaultProps.filters = {
           query: 'data.activity_name == "Break"',
           text: "Agents 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




worker's current activity friendly name



worker's attributes

Key value pair


date of the last activity change of the current worker

Datetime ISO8601


worker's friendly name



worker's current activity sid



worker's sid



worker's workspace sid


Query operators

Queries are written in infix notation in the form `field [operator] “value”. Only string types are supported for values. The following operators are supported:

Operand Description Alternative forms Example
and Logical AND operation. and, AND, && a == "b" AND c != "d"
or Logical OR operation. or, OR, || a == "b" OR c != "d"
in Evaluates whether an attribute's value matches an element (possibly many) from the given array. in, IN field IN ["value1", "value2"]
eq Checks if an attribute has a specified value. eq, EQ, == field EQ "value"
not_in Evaluates whether an attribute has any values other than those specified in the given array. not_in, NOT_IN field NOT_IN ["value1", "value2"]
not_eq Checks if an attribute has any values other than the given one. not_eq, NOT_EQ, != field NOT_EQ "value"
() Start and end of evaluation block, determines operator precedence. n/a (field == "value" OR lang IN ["es", "en"]) AND team EQ "engineering"
[] Start and end of array block, enumerates a list of elements. n/a ["value1", "value2"]
, Comma is used to separate elements in array. n/a n/a
"..." Value of a string type must be double-quoted within the query expression. Use empty string "" for wildcard searches. n/a n/a

Call monitoring

The call monitoring feature enables a supervisor to:

1. Open any voice call task and view its info panel


2. Invoke call monitoring on any voice call, which also displays a persistent bar (LiveCommsBar) indicating active call monitoring


Know issue for Call Monitoring Beta: A supervisor must be in an unavailable state to invoke call monitoring. Otherwise, we cannot guarantee the stability of the monitoring function.

Programmable components

The following programmable components have been added for the new feature:

  • Supervisor.TaskCanvas - task canvas in supervisor view, when selecting a task
  • Supervisor.TaskCanvasHeader - header component of the previous
  • Supervisor.TaskCanvasTabs - tabs component of the previous
  • Supervisor.TaskInfoPanel - content of the info panel in supervisor task canvas
  • Supervisor.TaskOverviewCanvas - inner view (name, icon, monitor button) of task overview canvas
  • LiveCommsBar - the blue persistant bar that comes up when you monitor a call
  • LiveCommsBarItem - contents of the LiveCommsBar
  • LiveCommsBarItemAction - actions inside a live CommsBar

New actions

The following new actions are now available in the Actions Framework to hook into:

1. MonitorCall - params:

export interface SupervisorMonitorCallPayload {
  taskSid: string;
   reservationSid: string;

2. StopMonitoringCall - no params

3. SelectTaskInSupervisor - payload: ITask (the Insights SDK Task object, not the TR task object)

Templatable strings

The following strings and templates can be used in new components for call monitoring:

SupervisorTaskViewContentHeader: "{{worker.fullName}},  {{}}",
SupervisorTaskViewContentDetail: "{{helper.taskDetailedInfo}}",
SupervisorTaskHeaderLine: "{{worker.fullName}},  {{}}",
SupervisorTaskLive: "{{helper.durationSinceUpdateShort}}",
SupervisorTaskWrapUp: "Wrap up | {{helper.durationSinceUpdateShort}}",
SupervisorTaskCompleted: "Completed | {{helper.durationSinceUpdateShort}}",
SupervisorTaskCardHeader: "{{}}",
SupervisorTaskCardDetail: "{{helper.taskDetailedInfo}}",
SupervisorTaskInfoPanelContent: infoPanelContent,
LiveCommsMessage: "You are listening to a call with {{}} and {{}}",
LiveCommsBarReturnToCall: "RETURN TO CALL",
LiveCommsBarStopListening: "STOP LISTENING"

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.