ui5-avatar-group: users can define the number of overflowButton

[JosephineSu]

Is your feature request related to a problem? Please describe.
In most cases, there are more than 99 avatar items in avatar group in our app. If all of these avatars rendered in dom tree, it is a big challenge to make good performance. So we suggest that avatar group component only render avatars displayed on page and the overflowButton when current screen size is limit. For the hidden avatar items, there is no need to render. Besides, we need show the total count of avatars no matter how many avatars we pass to avatar group. So we need an interface to define the number of overflowButton.
Describe the solution you'd like
1、 The number of overflowButton can be defined by user.
2、Don't render hidden avatar items.
Describe alternatives you've considered
Using "..." in overflowButton to indicate rest of avatars.
Additional context
Add any other context or screenshots about the feature request here.

[JosephineSu]

Hi @terezamch
Would this be developed this week？we'll use it in B2105 release, and the deadline is Mar 19. So it's a bit hurry.
Thank you so much！

[vladitasev]

Hello @JosephineSu

We discussed this today internally and created a PoC. Here are the results:

• We are going to implement a new property that would allow app developers to specify the number of hidden avatars (in place of the default "99+". This part will be relatively trivial.
• However, most of the optimization related to loading many avatars would need to be carried out by the app.

Let me elaborate on the second: Let's say you have 1000 users in the database. You want to show them in an AvatarGroup.

Instead of loading all 1000 users:

<ui5-avatar-group>
  <ui5-avatar initials="AA"></ui5-avatar>
  <ui5-avatar initials="AB"></ui5-avatar>
  <ui5-avatar initials="AC"></ui5-avatar>
  <ui5-avatar initials="AD"></ui5-avatar>
  .................................... x 1000
</ui5-avatar-group> 

which would make them all appear in DOM (although only the first few will be visible inside the AvatarGroup), the application should instead only load a few, let's say the first 20 and set the new property to show the total number of items (in this case 1000). If the AvatarGroup manages to show only the first 8, the overflow button will then show "992". When the user clicks on the overflow button, the app reacts to the event (that already exists on the avatar group) and loads inside the popover some/or all of the remaining avatars.

If the new property is called totalAvatarsCount for example, it would be like this:

<ui5-avatar-group total-avatars-count="1000">
  <ui5-avatar initials="AA"></ui5-avatar>
  <ui5-avatar initials="AB"></ui5-avatar>
  <ui5-avatar initials="AC"></ui5-avatar>
  <ui5-avatar initials="AD"></ui5-avatar>
  .................................... x 20
</ui5-avatar-group> 

and the overflow button will show: 1000 minus the number of avatars that could be displayed in the visible space.

Does this make sense?
We could also discuss on today's meeting.

Regards,
Vladi

[JosephineSu]

Hi @vladitasev ,
That sounds good. I want to confirm that whether the overflow button will show "+number" or only "number", it's better be "+number", if remaining avatars(total-avatar-count minus avatars displayed in visible space) is more than 99, then show "+99". In our app, when click overflow button, it will open a list dialog to show basic user information of all users.

[JosephineSu]

Hi @ilhan007 ,
Could you add this to V0.29.X?

[JosephineSu]

Hi @ilhan007 ,
The overflow button needs a A11Y label, in our app, it's "more recipients". Please take this into consideration. A new property may be required.

[ilhan007]

Hello @JosephineSu we discussed your last request for a way to set aria-label to the overflow button and in order to full-fill that (+ the initial requirement to define the number/text of the button) we decided to change the solution to:

Providing a new slot "overflowButton", instead of two properties - one the text and another for the aria-label
This will mean that you will be able to pass a ui5-button, define the text and the aria-label by yourself.
The usage will look like:

<ui5-avatar-group>
  <ui5-button aria-label="more recipients" slot="overflowButton">+99</ui5-button>
</ui5-avatar-group>

This will also mean that you will be responsible to update the text of the button and to do so we will provide an event whenever avatars hide/shows. So whenever something changes, we will be notified by an event and you will be able to set the correct number.

Would that make sense?

[sfsf-xweb-sh]

Hi @ilhan007
That sounds good. And there is one thing I wanna confirm. What's the specific event you provided? Will it tell user the number of hidden/show avatars?