The Avatar control is a modern control designed to display user icons.
While this control has relatively fewer features compared to other controls, I’ve investigated the various ways it can be utilized effectively.
Basic Usage
The Avatar control primarily uses three properties: “Image,” “Name,” and “Badge.”
The Image property is used to specify the user’s thumbnail image.
The Name property displays the user’s name when no thumbnail is set.
Note: It appears that Japanese characters are not supported – when kanji is entered, a generic person icon is displayed instead.
The Badge property toggles the user’s status badge (such as Available, Busy, etc.).
Integration with Office 365 Users Connector
This Avatar control can be effectively used in two main scenarios: “displaying information about the current app user” or “showing information about other users retrieved through the Office 365 Users connector.”
When displaying a list of users retrieved from the Users connector in a gallery, set the Image property to the UserPhotoV2 result.
For the Name property, you can use either the ‘Mail’ or ‘DisplayName’ field. Note: However, if DisplayName is set in Japanese in your environment, it will default to showing a generic person icon instead.
Synchronizing Badges with User Status
The challenge lies in the “Badge” feature – to retrieve a user’s current status, you need to use GraphAPI through a custom connector. Although this might not be widely used due to its premium requirements, here are the steps to implement it.
Changing Badges Based on User Status
First, create a custom connector following the steps in this article:
Next, add the created custom connector to your app through [Add data].
Finally, call the custom connector using the “Id” retrieved from the Office 365 Users connector as a parameter, and set the “activity” property from the result directly to the Badge property.
The badge will then change according to the user’s status.
Additionally, you can set the badge to “Out of Office” status by setting OutOfOffice to “true”.
Additional Tips: Other Customization Options
Setting the shape to ‘Square’ will make the thumbnail appear as a square instead of a circle,
And increasing the font size will make the user’s name appear larger.
コメント