Avatar – Everything you want to know about modern control #1

Introduction to Avatar control

Avatar control is actually pretty cool. I came to know about it only a few days ago. And honestly, this is the control that prompted me to write all about modern controls. I believe there are several modern controls that many people don't know about. And even the ones that makers do know about, there are certain properties that aren't clear. This control is used to show a graphic representation of a user (or a similar entity like team). This control shows an image and name initials along with a small badge to show status.

Properties

1. Image - A visual representation of the user/team/entity. The default value is User().Image
2. Badge - A visual representation of the user/team/entity's presence/status. The default value is Avatar.Badge.Available
3. Name - The name of the user/entity/entity. If an image isn't available, then the initials are displayed. The default value is User().FullName
4. Shape - The shape of the avatar. There are 2 options:
   1. 'Avatar.Shape'.Circular
   2. 'Avatar.Shape'.Square

      

5. Appearance - The colors used when an image is not available. There are 3 different options:
   1. 'Avatar.Appearance'.Brand - Uses the theme of the app (default value)
   2. 'Avatar.Appearance'.Neutral - Uses a gray scale
   3. 'Avatar.Appearance'.Colorful - Uses a random color based on the name initials

      

Using Avatar control

One of the first things that I thought about when I looked at this control was to use a user's actual presence to control the badge. I used a Graph API custom connector to fetch a user's presence. I will write a separate blog post about creating the connector. But, for now, I will share that there are 2 methods in the custom connector:

1. MicrosoftGraph.GetMyPresence()
2. MicrosoftGraph.GetUserPresenceV2(id)

So, here are the steps I took:

1. Add two Avatar controls and two buttons. One is to show and fetch the current user's details. And another one is to show and fetch another user's details
2. Set the Text property of one of the buttons to "My Presence" and set its OnSelect to:

   Set(
       gblMyPresence,
       MicrosoftGraph.GetMyPresence().availability
   )

3. Set the properties of the Avatar control to show current user's details as follows:
   1. Badge:

      Switch(
          gblMyPresense,
          "DoNotDisturb",
          'Avatar.Badge'.DoNotDisturb,
          "Available",
          'Avatar.Badge'.Available,
          "Blocked",
          'Avatar.Badge'.Blocked,
          "Away",
          'Avatar.Badge'.Away,
          "Busy",
          'Avatar.Badge'.Busy,
          "Offline",
          'Avatar.Badge'.Offline,
          "PresenceUnknown",
          'Avatar.Badge'.Unknown,
          "OutOfOffice",
          'Avatar.Badge'.OutOfOffice,
          'Avatar.Badge'.None
      )

4. Set the Text property of the other button to "User Presence" and set its OnSelect to:

   Set(
       gblUserPresence,
       MicrosoftGraph.GetUserPresencev2(Office365Users.UserProfileV2("shru.bahl@thepoweraddict.com").id).availability
   )

5. Set the properties of the other Avatar control to show current user's details as follows:
   1. Badge:

      Switch(
          gblUserPresense,
          "DoNotDisturb",
          'Avatar.Badge'.DoNotDisturb,
          "Available",
          'Avatar.Badge'.Available,
          "Blocked",
          'Avatar.Badge'.Blocked,
          "Away",
          'Avatar.Badge'.Away,
          "Busy",
          'Avatar.Badge'.Busy,
          "Offline",
          'Avatar.Badge'.Offline,
          "PresenceUnknown",
          'Avatar.Badge'.Unknown,
          "OutOfOffice",
          'Avatar.Badge'.OutOfOffice,
          'Avatar.Badge'.None
      )

   2. Image:

      Office365Users.UserPhotoV2(
          LookUp(
              Users,
              'Primary Email' = "shru.bahl@thepoweraddict.com"
          ).'Full Name'
      )

   3. Name:

      LookUp(
          Users,
          'Full Name' = "Shruti Bahl"
      ).'Full Name'

       

With these values, the controls look like this: (my user is away and the other user is offline)

After I made myself available in Teams and made the other user busy, this is how the controls looked:

Stay tuned for the remaining modern controls!

To read the official documentation of modern controls, click here.

Recent articles

1. How to use custom sorting in canvas apps
2. How to use Dataverse views to filter related records
   
3. Have you played Connect 4? In Power Apps?