Menu

Queues View Programmability

BETA

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.

Real-Time Queues Dashboard Annotated

The Real-time Queues View allows you to see a snapshot of the queue status in your Flex Contact Center. Because it's a part of Flex, you can customize and extend your Queues View, just like with other portions of the Flex UI. You can enable the 'Real-time Queues View' from the Pre-Release Features Page.

QueuesStatsView Component

The Real-time Queues View is rendered by the 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
QueuesStatsView.Content.remove("tiles");
// Add your own component
QueuesStatsView.Content.add(<CustomTiles key="custom-tiles" />, {
  sortOrder: 0
});

Add or Remove Individual Data Tiles

        
        
        
        

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

        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

        Modify the 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. If you'd like custom formatting on any of the default columns, you can 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

              Sort the QueuesDataTable

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

              Sorting capabilities are only available in @twilio/flex-ui@1.14.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:

              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.

              QueuesStats.QueuesDataTable.Content.add(
                <ColumnDefinition
                  key="pending-tasks"
                  header="Pending tasks"
                  content={(queue: Flex.QueuesStats.WorkerQueue) =>
                    queue.tasks_by_status.pending
                  }
                  sortingFn={(
                    a: Flex.QueuesStats.WorkerQueue,
                    b: Flex.QueuesStats.WorkerQueue
                  ) => a.tasks_by_status.pending - b.tasks_by_status.pending}
                  sortDirection="asc"
                />
              );
              

              Filter the Queues View

              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:

              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.

              Add Additional Columns with SLA Metrics

              This feature is in Private Beta and available in @twilio/flex-ui@1.20.0 and later. Please, contact support to enable this feature.

              SLA metrics feature adds extra columns to Flex.QueuesStats.QueuesDataTable with the following keys:

              • sla-30min

              • sla-today
              • handled-tasks-30min

              • handled-tasks-today
              • abandoned-tasks-30min

              • abandoned-tasks-today

              SLA metrics are calculated for two timeframes: the last 30 minute floating window and the current business day. The exact time a new business day starts and all SLA threshold values can be configured via Flex's configuration API.

                    
                    
                    
                    

                    There are more metrics available than those displayed by default. See below for the full list of metrics.

                          
                          
                          
                          

                          In this snippet, Flex adds two columns to the QueuesDataTable table that show the number of short abandoned tasks in the last 30 minutes and for the day. You can use QueuesDataTableCell in the content render function in order to add additional, expandable rows of channel specific data.

                          List of SLA Metrics

                          The WorkerQueue data object is extended with sla_30_min and sla_today keys that contain all SLA metrics for the queue. WorkerQueueSLA include the following metrics:

                          • total_tasks_count
                          • handled_tasks_count
                          • handled_tasks_within_sl_threshold_count
                          • handled_tasks_within_sl_threshold_percentage
                          • short_abandoned_tasks_count
                          • short_abandoned_tasks_percentage
                          • abandoned_tasks_count
                          • abandoned_tasks_percentage
                          • flow_out_tasks_count
                          • flow_out_tasks_percentage
                          • sla_percentage

                          If a queue handles multiple channels, the SLA data is also available per channel. The channels key on WorkerQueue contains an array of WorkerQueueChannel, which has the following keys:

                          • sid
                          • unique_name
                          • friendly_name
                          • sla_30_min (WorkerQueueSLA)
                          • sla_today (WorkerQueueSLA)
                          workerQueue.channels[0].sla_30_min.total_tasks_count
                          

                          Subheaders and Header Colspan

                          This feature is only available in @twilio/flex-ui@1.20.0 and later.

                                
                                
                                
                                

                                Subheaders can be added to columns using an optional subHeader property on ColumnDefinition.

                                If adjacent columns happen to have the same header and you wish to merge these table header cells, set the same headerColSpanKey on these columns.

                                Display the Queues View on a Monitor

                                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:

                                QueuesStatsView.fullscreen.enabled = true
                                
                                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.

                                Thank you for your feedback!

                                We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

                                Sending your feedback...
                                🎉 Thank you for your feedback!
                                Something went wrong. Please try again.

                                Thanks for your feedback!

                                Refer us and get $10 in 3 simple steps!

                                Step 1

                                Get link

                                Get a free personal referral link here

                                Step 2

                                Give $10

                                Your user signs up and upgrade using link

                                Step 3

                                Get $10

                                1,250 free SMSes
                                OR 1,000 free voice mins
                                OR 12,000 chats
                                OR more