Menu

Expand
Rate this page:

Real-Time Queues View Programmability

You can customize the Real-Time Queues View to display the queue statistics that you want to monitor in your contact center.

Real-Time Queues Dashboard Annotated

QueuesStatsView Component

The Real-Time Queues View is rendered by the QueuesStatsView component. This programmable Flex UI component contains the following children components:

  • QueuesStats.AggregatedQueuesDataTiles (key: tiles)
  • QueuesStats.QueuesDataTable (key: table)

Modify QueuesStatsView

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 tiles, modify QueuesStats.AggregatedQueuesDataTiles. Out of the box, this child component contains the following aggregated data tiles:

        • Active Tasks (key: active-tasks-tile)
        • Waiting Tasks (key: waiting-tasks-tile)
        • Longest Wait (key: longest-wait-time-tile)
        • Agents (key: agents-by-activity-chart-tile)

        Modify the QueuesDataTable

              
              
              

              The child component QueuesStats.QueuesDataTable lets you add or remove columns in the QueuesDataTable. Out of the box, the QueuesDataTable has the following columns:

              • Queues (key: friendly-name)
              • Active (key: active-tasks)
              • Waiting (key: waiting-tasks)
              • Longest (key: longest-wait-time)
              • Agents (key: agents)

              To add a column, add a ColumnDefinition component to QueuesStats.QueuesDataTable. If you want custom formatting on a default column, remove the original column and create a new one.

              Sort the QueuesDataTable

              The defaultSortColumn and sortDirection properties 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.

              You can click on the header of a predefined column to sort the QueuesDataTable by those values. By default, the table is sorted by queue name.

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

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

              Sorting with Custom Columns

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

              The default order of sorting is descending. To change the direction to ascending, use the sortDirection property on the ColumnDefinition component.

              If you change the order by inverting the value returned from sortingFn, the visualization in the column header will not display correctly.

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

              Flex.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 Real-Time Queues View

              Filtering is only available in @twilio/flex-ui@1.14.0 and later. Subscription filters are available in @twilio/flex-ui@1.24.0 and later.

              setFilter

              Out of the box, all of your queues display in the Flex UI. If you want to hide queues or only show specific queues, 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.

              setSubscriptionFilter

              For larger contact centers with a large number of queues, it may be more adequate to use the setSubscriptionFilter that is available in @twilio/flex-ui@1.24.0 with the SLA feature enabled. Unlike setFilter, this filter will stop the UI from subscribing to updates from hidden queues, which results in improved performance of the page.

              We recommend to subscribe to 100 or less queues for optimal performance. Subscribing to a high number of queues may be demanding on user internet connectivity and hardware.

              The setSubscriptionFilter lets you filter queues only by name or SID:

              const visibleQueues = ["Everyone", "Sales"];
              
              QueuesStats.setSubscriptionFilter((queue: { friendly_name: string; sid: string }) =>
                visibleQueues.includes(queue.friendly_name)
              );

              Both filters do not affect the numbers in the global numbers of available agents. However, using a filter might cause a discrepancy between the number of agents you see in individual queues in the QueuesDataTable and the Agents panel that shows the global number of available agents.

              Add Additional Columns with SLA Metrics

              This feature is in Public Beta and available in @twilio/flex-ui@1.27.0 and later.

              The SLA metrics feature adds the following columns to Flex.QueuesStats.QueuesDataTable:

              • SLA 30 min (key: sla-30min)

              • SLA Today (key: sla-today)
              • Handled 30 min (key: handled-tasks-30min)

              • Handled Today (key: handled-tasks-today
              • Abandoned 30 min (key: abandoned-tasks-30min)

              • Abandoned Today (key: abandoned-tasks-today)

              SLA metrics are calculated by both the last 30 minute floating window and the current business day.

              After the feature is enabled, you can remove any of the default columns listed above or add additional columns with SLA metrics. See the full list of available metrics.

                    
                    
                    

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

                    Configure SLA Thresholds and Business Day Start Times

                    You can configure the time a new business day starts and all SLA threshold values via the Flex Configuration API. There are three levels of SLA configurations:

                    • default
                    • queue_configurations
                    • queue_channel_configurations

                    Each lower level overrides the one above it. For example, a queue_configurations object has priority over the default configuration and a queue_channel_configurations object has priority over the default configuration and matching queue_configurations object.

                    The request body is validated by the Flex Configuration API and must adhere to the following requirements:

                    • Each request must include the default configuration, even if you set queue_configurations and/or queue_channel_configurations in the same request.
                    • Each configuration object included in the request must contain all required properties. The required properties for each configuration object type are as follows:
                      • default
                        • service_level_threshold
                        • short_abandoned_threshold
                        • reset_timezone
                        • reset_time
                      • queue_configurations
                        • queue_sid
                        • reset_timezone
                        • reset_time
                      • queue_channel_configurations
                        • queue_sid
                        • channel_sid
                        • service_level_threshold
                        • short_abandoned_threshold
                          
                          
                          

                          List of SLA Metrics

                          The WorkerQueue data object is extended with the sla_30_min and sla_today keys. These keys are both of the type WorkerQueueSLA, which contains all available SLA metrics for queues:

                          • 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 the 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.

                                
                                
                                

                                You can add subheaders to columns using a subHeader property on ColumnDefinition.

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

                                Display Real-Time Queues View on a Monitor

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

                                To display queue statistics on a tv or a monitor, use the fullscreen view by clicking the small button in the bottom-right corner.

                                The button is hidden by default. To enable the button, 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 by visiting Twilio's Community Forums or 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