Avatar group

The UI component Avatar Group allows you to easily set up a collection of Avatars. A data source is iterated, and a corresponding image is displayed to the user. A number of avatars are displayed, before one final shape which contains "+X", corresponding to the number of remaining items in the data source.

An example setup of the Avatar Group is showcased in our Showroom! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register here.

Settings

Here are some of the properties in Appfarm Create which are custom for an Avatar Group:

Data Source

This is the data source which the component will iterate. This data source should either hold the images themselves (i.e. the data source is a File Object Class), or the data source should have a reference to a File Object Class, or a property of data type Image URL.

Avatar Image

This is the image that will be displayed in each Avatar in the group, corresponding to the appropriate object in the Data Source. The data type must be Internet URL or Image URL. Note that the File Content URL property of File Object Classes is of data type Internet URL.

Tooltip

An optional piece of text can appear below the appropriate Avatar item when it is hovered over. For example, in an Avatar Group of users, the user's name can be bound to the tooltip.

Non-persistent

This property is available once a Tooltip is chosen. If this is toggled on, the tooltip will disappear when the cursor hovers over the Tooltip. For optimal usability, it is recommended that this option remains unchecked.

Max Count

This is the maximum number of Avatars that are displayed before the final "+X" item is displayed.

Variant

This property controls the shape of the avatars in the group. The choice can be made from Circular, Rounded, Square or Circle.

Spacing

This can be set to Small or Medium. This controls the gap between each item in the group.

Event Handlers

Event Handlers can detect a specific event occurring in Appfarm Create and can link these events to actions. Two Event Handlers are available for the Avatar Group component:

On Click: This Event Handler will run an action when one of the avatars is clicked. For instance, this could show a user dialog when a user profile picture is clicked.

On Count Click: This Event Handler will run an action when the "+X" shape at the end is clicked. For example, this could show a full list of users who are shown through the Avatar Group.

Examples of these Event Handlers and potential use cases are available in the Showroom.