Flex teams - Combobox functionality and Search

[Porlin]

Hello, I am looking for feedback on the Combobox functionality and Search.

Background: Team based segregation has been introduced on the Flex Teams page that allows Flex customers to restrict their supervisors to monitoring only their own team's agents, reducing privacy concerns and improving operational efficiency.

Without the 'Teams' construct in Flex, the Teams page was applied to the entire organization, allowing supervisors to monitor agents beyond their own teams, which led to privacy concerns and operational inefficiencies.

For a Supervisor the current behaviour to select a Team is by selecting via the single select combobox and then clicking 'Apply.' We are now incorporating hierarchy to include Business units and Departments. We would need to visualize this on the Team's view page in the current combobox.

Q. Can we combine the style of 'Menu with sub-items' with 'Single select combobox functionality?'
Please see example link

And secondly could we add a Search inside the combobox to allow Supervisors to search a team across Business units and Departments?
Please see example

Relevant links
Figma designs

Stage of design
High-fidelity designs. Flex Teams page in Private Beta.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Required feedback on an unofficial component as a temporary solution - Answer (updated: 10/11/2022, similarity score: 88%)
• Groupings within combobox (updated: 06/13/2022, similarity score: 87%)
• Combobox Improvements (updated: 08/10/2022, similarity score: 87%)

[serifluous]

Hey @Porlin ! The 2nd discussion PasteBot shared (#2170) has an explanation for why a nested Combobox, either for hierarchical options or search, isn't possible.

There are a few other options you could consider though:

1. Progressive disclosures of Comboboxes (which is what's suggested in the previous discusssion)
2. Using description text in the option name to show the department name. That way, if you use the autocomplete variant of Combobox (which essentially functions like a search through options), people will also be able to "search" for department names and team names.
3. If there are only a reasonable number of business units that a company would have, business units could be exposed at a higher level, through Tabs or In Page Navigation.

I mocked up those options here: https://www.figma.com/design/KlWRgdZx0mfbPEnOB7ZuYp/Paste-Feedback?node-id=495-28962&t=jBiOKnfD5njSflay-4

Let us know what solution you end up going with, or if there are other constraints you can share that can help!

[Porlin]

Thanks @serifluous , I have tried using the option 2 suggestion. You can review in my Figma here
I will book in an office hours with my PM and lets have a discussion to see if you can help with any custom dev for multi-level. I will add this Github on the sign up sheet.

[krisantrobus]

Hey @Porlin, I have created. asnadbox you can access here

It is a working example of going with option 2 only for team selection. You will be able to search for all hierarchy levels when selecting a team. With this solution you would be able to filter by values that aren't listed in the description too or if you needed to abbreviate things for scalability. You can also customize the options as much as you want. I included another template option using something other than the Text component but these are not design approved just an example of the freedom you have. Keep screen readers in mind when adding large amounts of text per option. If you want to filter on department and units they should have their own inputs so it is clear what users are filtering on.

I look forward to seeing how this exploration goes!

[roxanagomez]

Hi @Porlin Thank you for coming to Office Hours a short recap for context:

At the moment, it is not possible to create an accessible, hierarchical/multilevel Combobox, so our suggestions remain the same:

• Use an Autocomplete Combobox with descriptions and categories to facilitate the search and selection of items. (@krisantrobus shared a sanbox on how the interaction would work)
• Consider using progressive disclosure with multiple Comboboxes.
• If your content may expand to more levels, consider using a different surface, such as a Side Modal or Side Panel, to nest the items.

Here is the session's recording in case you want to revisit at some point.

[Porlin]

Hi @roxanagomez and team, circling back on the Teams hierarchy we have decided to move the functionality into the Side modal. We want to explore something like this. Some context: Users would land on the default page which is 'All my agents' and they can either select 'All my agents' or deselect and select up to 3 Teams individually only (we will start with 3 only for time being).

We will have up to 3-5 levels of hierarchy potentially. Here I have illustrated Team, Departments and Business units. Please see the examples below.

Video 1 - Team owner access (No hierarchy)

Video 2 - Two Department unit owner access

Video 3 - Business unit owner access

I would like feedback if we can display the checkboxes in this way where you only select the leaf node for Teams selection as currently we will not have users selecting at Department or at Business unit level.

Figma file

Thank you

[serifluous]

Hey @Porlin ! Since the default is "All my agents", you can remove that checkbox as an option from your Side Modal, and provide a "Clear" button instead: https://paste.twilio.design/patterns/filter#clearing-filters That way, you can simplify the Checkbox interaction to something more like this:

For Disclosures, you can nest them, but I'd suggest putting a "Selected" badge in the header, like shown in the Filter pattern: https://paste.twilio.design/patterns/filter so it's clear where the selection is happening without a user have to expand/collapse until they find them.

[roxanagomez]

+1 to @serifluous comments, also if you want to avoid the three level nesting in BUs you could surface the Business Units as Headings and the departments to be non-selectable Disclosures (since technically the users can't select an entire BU or departments)

[Porlin]

Thank you @serifluous and @roxanagomez I have applied this example in the designs. I have 3 questions I would like some of your input on.

1. Flex Teams_Side modal button location - example image
Currently in Flex we have the Apply button anchored to the RHS and the number of agents to the LHS.
The location sits on the bottom and stays persistent if a scroll is applied.

In the example you have provided the ‘Apply’ and ‘Clear all’ buttons are anchored to the LHS.

Is this the recommended pattern? And should the buttons stay anchored at the bottom of the page OR in line with the content?

2. Apply button functionality - example image
We have two tabs illustrated here being “Activities’ and ‘Teams’ inside the filter side panel. Is the ‘Apply button’ commonplace across all the tabs or does it function individually per tab?

3. Clear all or Reset button functionality - example image
We have two tabs illustrated here being “Activities’ and ‘Teams’ inside the filter side panel.

• Can we replace the ‘Clear all’ with a ‘Reset’ button?

• Is the ‘Clear all’ or ‘Reset’ button commonplace across all the tabs or does it and can it function individually per tab?

I have a new Figma link here

Happy to jump on a call if preferred.

[nkrantz]

Update: this was reposted as a new discussion and is continuing in #4090