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?

Queues View Programmability


This Twilio product is currently available as a beta release. Some features are not yet implemented and others may be changed before the product is declared as Generally Available. Beta products are not covered by a Twilio SLA.

Learn more about beta product support.

This feature is in Public Beta. You can enable the 'Real-time Queues View' from the Pre-Release Features Page.

Real-Time Queues Dashboard Annotated

QueuesStatsView Component

The Real-time Queues View is rendered by QueuesStatsView component. QueuesStatsView is a programmable component that contains:

  1. QueuesStats.AggregatedQueuesDataTiles (key: tiles)
  2. QueuesStats.QueuesDataTable (key: table)

As a programmable component, you can modify QueuesStatsView via the Content property.

// Remove all tiles from the view
// Add your own component
Flex.QueuesStatsView.Content.add(<CustomTiles key="custom-tiles" />, {
  sortOrder: 0

Adding/Removing Individual Data Tiles

To add custom tiles or remove existing ones, use QueuesStats.AggregatedQueuesDataTiles programmable component.

import * as Flex from "@twilio/flex-ui";
import { connect } from "react-redux";

// Connect to Flex's redux store and display the number of wrapping tasks
const WrappingTasksTile = connect((state: Flex.FlexState) => ({
  wrappingTasks: state.flex.realtimeQueues.workspaceStats
    ? state.flex.realtimeQueues.workspaceStats.tasks_by_status.wrapping.toString()
    : ""
}))(({ wrappingTasks }) => (
  <Flex.AggregatedDataTile title="Wrapping Tasks" content={wrappingTasks} />

// Add the WrappingTasksTile to the view
  <WrappingTasksTile key="wrapping-tasks-tile" />,
  { sortOrder: -1 }

Aggregated data tiles present out of the box have the following keys:

  • active-tasks-tile
  • waiting-tasks-tile
  • longest-wait-time-tile
  • agents-by-activity-chart-tile

Modifying QueuesDataTable

To add or remove columns in the QueuesDataTable, use QueuesStats.QueuesDataTable programmable component. Default columns have the following keys:

  • friendly-name
  • active-tasks
  • waiting-tasks
  • longest-wait-time
  • agents

To add a column, add a ColumnDefinition component to QueuesStats.QueuesDataTable.

In the example below, you will add a column that will display happy emoji next to a queue if the waiting time is lower than a minute, or a sad emoji if it's higher than that.

import * as Flex from "@twilio/flex-ui";

const WaitTimeIndicator = (workerQueue: Flex.QueuesStats.WorkerQueue) =>
  workerQueue.longest_task_waiting_age > 60 ? "☹️" : "🙂";

  { sortOrder: -1 }

This approach can be used for custom formatting of any column. Remove the original column and create a new one with your custom formatting.

In this example, you show the number of waiting tasks in red, if it's higher than 10.

// Remove the original column

// Create a new column with custom formatting
    header="Waiting tasks"
    content={(queue: Flex.QueuesStats.WorkerQueue) => {
      // Calculate number of waiting tasks by adding pending and reserved
      const { pending, reserved } = queue.tasks_by_status;
      const waitingTasks = pending + reserved;

      // Set the style to color: red if # of waiting tasks is > 10
      const spanStyle = waitingTasks > 10 ? { color: "red" } : {};

      // Return the element to render
      return <span style={spanStyle}>{waitingTasks}</span>;
  { sortOrder: 1 } // Put this after the second column

The sorting capabilities are only available in @twilio/flex-ui@1.14.0 and later.

The defaultSortColumn and sortDirection props are only available in @twilio/flex-ui@1.19.0 and later.

The QueuesDataTable allows you to click on the header of a predefined column to sort the table by those values. The table is initially sorted by queue name.

To change the column the table is initially sorted by, set the following prop to the key of the column you want to use:

Flex.QueuesStats.QueuesDataTable.defaultProps.defaultSortColumn = "column-key"

Sorting in Custom Columns

When adding a custom column, you can specify the parameter sortingFn: (a, b) => number, which works in the same way as the compareFunction parameter in JavaScript's Array.sort().

Keep in mind that the default order of sorting is descending. This can obviously be changed by inverting the value returned from the sortingFn, but in that case the visualization in the column header won't be correct. To change the initial sort direction to ascending, use the sortDirection prop on the ColumnDefinition component.

In this example, you will display a new column with pending tasks and allow sorting by the values in this column.

    header="Pending tasks"
    content={(queue: Flex.QueuesStats.WorkerQueue) =>
      a: Flex.QueuesStats.WorkerQueue,
      b: Flex.QueuesStats.WorkerQueue
    ) => a.tasks_by_status.pending - b.tasks_by_status.pending}

The filtering is only available in @twilio/flex-ui@1.14.0 and later.

Out of the box, all of your Queues will be displayed in the UI. If you wish to hide any of them or show only the specific ones, you can apply a filter:

Flex.QueuesStats.setFilter((queue: Flex.QueuesStats.WorkerQueue) =>
  queue.friendly_name !== "Invisible Queue"

The setFilter takes a single parameter, a filter function with a signature of (queue: WorkerQueue) => boolean. This function will be evaluated for each Queue and added to the view if the return value is true.

The filtering will not affect the numbers in Agents aggregated panel. Please note that using the filter might cause some discrepancy between the number of agents you see in the QueuesDataTable and the Agents panel.

The fullscreen view is only available in @twilio/flex-ui@1.14.0 and later.

To display the queue statistics on a tv or a monitor, you can bring the view fullscreen, hiding everything else, with a small button in the bottom right corner.

To enable the button (hidden by default), set the following property:

Flex.QueuesStatsView.fullscreen.enabled = true

Read more about Real-time Queues View.

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.