Overview

A Material UI Avatar Group for Mendix. This widget renders an appealing UI that displays a group of avatars stacked over each other. You can specify the number you want to display directly in the UI, and the rest will be shown in a popover, featuring a list of users' avatars along with their full names or email addresses.

The widget will respond to any updates in the data on the page. For instance, if there are changes in the users list that is sent to the widget (like adding new users), the widget will detect this and update itself automatically to include that new user.

Documentation

AvatarGroup

A Material UI avatar group widget for Mendix.

Features

The widget renders a Material-UI avatar stacked group, utilizing a Mendix datasource. Users can pass in attributes linked to the datasource, such as Name, Email, and users' images. Additionally, users can select how many avatars to display initially and the number to show as 'additional' users. Clicking on the 'additional' user avatars will display a popover to show the rest of the list.

How to use file images with this widget? 

The limitation of this widget is that you cannot directly use an entity with the generalization of a file image with this widget. However, there is a workaround for this. You can store an image URL of your file image by using this path: {YourApplicationURL}/file?guid={YourImageObjectGUID}.

To build this URL, you can follow this small guide (See image for example):

1. In your microflow, retrieve your file object linked to the main object that you want to use for this widget.
2. From the Community Commons, use the "GetGUID" Java action on your file object to get the GUID required to build the URL.
3. From the Community Commons, use the "GetApplicationURL" Java action to get the application URL required for building the URL.
4. Perform a string concatenation to build the URL into the following format: {YourApplicationURL}/file?guid={YourImageObjectGUID}.
5. Save this string to your object attribute.
6. Use that attribute as the image URL.

Issues, suggestions and feature requests

[link to GitHub issues]

Known issues

 -  N/A

Development and contribution

1. Install NPM package dependencies by using: npm install. If you use NPM v7.x.x, which can be checked by executing npm -v, execute: npm install --legacy-peer-deps.

2. Run npm start to watch for code changes. On every change:

   • the widget will be bundled;
   • the bundle will be included in a dist folder in the root directory of the project;
   • the bundle will be included in the deployment and widgets folder of the Mendix test project.

3. Actively accepting pull requests