This article offers a focused guide on customizing the Flex UI Teams View to better manage up to 200 agents at once. You'll learn how to enhance the sorting of agent cards, which display each agent's name and activity.
By default, Flex will provide you with the following functionality:
- sort by agent name
- filter by current agent activity
Supervisors and managers may wish to customize the list further, such as sorting current agent activity without applying filters.
Flex Plugin
To achieve this functionality, use a Flex Plugin to set a custom sort parameter by leveraging the sortWorkers property of the WorkersDataTable component.
flex.WorkersDataTable.defaultProps.sortWorkers = (a, b) => { ... }
Sort by Worker Activity Name
Expanding on that, here is how one would sort the list by worker activity name:
flex.WorkersDataTable.defaultProps.defaultSortColumn = "worker";
flex.WorkersDataTable.defaultProps.sortWorkers = (a, b) => {
const activityOne = a.worker?.activityName || "";
const activityTwo = b.worker?.activityName || "";
return activityOne.localeCompare(activityTwo);
};
Sort by Worker Activity Name & Full Name
More sorting parameters can be added by including more conditions in the function. For example, you can add an additional sort for fullName:
flex.WorkersDataTable.defaultProps.sortWorkers = (a, b) => {
const activityOne = a.worker?.activityName || "";
const activityTwo = b.worker?.activityName || "";
const activityComparison = activityOne.localeCompare(activityTwo);
if (activityComparison !== 0) {
return activityComparison;
}
const fullNameOne = a.worker?.fullName || "";
const fullNameTwo = b.worker?.fullName || "";
return fullNameOne.localeCompare(fullNameTwo);
};
Sort by Worker Activity Name & Activity Duration
It is also possible to sort the list based on activity duration time, letting you efficiently monitor by those with the longest or shortest durations. To sort by duration of current activity, parse the value of the string provided in the parameter activityDuration.
flex.WorkersDataTable.defaultProps.sortWorkers = (a, b) =>
const activityOne = a.worker?.activityName || "";
const activityTwo = b.worker?.activityName || "";
const activityComparison = activityOne.localeCompare(activityTwo);
if (activityComparison !== 0) {
return activityComparison;
}
const durationOne = parseDuration(a.worker?.activityDuration || "0min");
const durationTwo = parseDuration(b.worker?.activityDuration || "0min");
return durationOne - durationTwo;
};
In the above code snippet, the parseDuration function can be defined as:
function parseDuration(duration: string): number {
if (duration.includes("h") || duration.includes("min")) {
const hoursMatch = duration.match(/(\d+)h/);
const minutesMatch = duration.match(/(\d+)min/);
const hours = hoursMatch ? parseInt(hoursMatch[1], 10) : 0;
const minutes = minutesMatch ? parseInt(minutesMatch[1], 10) : 0;
return hours * 60 + minutes;
} else if (duration.includes(":")) {
const [minutes, seconds] = duration.split(":").map(Number);
return minutes + seconds / 60;
}
return 0;
}