Persona control (preview)
[This article is pre-release documentation and is subject to change.]
A control designed to display formatted information.
Note
Full documentation and source code found in the GitHub code components repository.
Important
- This is a preview feature.
- Preview features aren’t meant for production use and may have restricted functionality. These features are available before an official release so that customers can get early access and provide feedback.
Description
A persona is a visual representation of a person across products, typically showcasing the image that person has chosen to upload themselves. The control can also be used to show that person's online status.
The complete control includes an individual's avatar (an uploaded image or a composition of the person’s initials on a background color), their name or identification, and online status.
The persona control is used in the PeoplePicker and Facepile controls.
This code component provides a wrapper around the Fluent UI Persona control for use in canvas & custom pages. See component documentation for best practices.
Key properties
| Property | Description |
|---|---|
ImageUrl |
Url to the image to use, should be a square aspect ratio and large enough to fit in the image area. |
ImageInitials |
The user's initials to display in the image area when there's no image. |
Text |
Primary text to display, usually the name of the person. |
SecondaryText |
Secondary text to display, usually the role of the user. |
TertiaryText |
Tertiary text to display, usually the status of the user. The tertiary text will only be shown when using size72 or size100. |
OptionalText |
Optional text to display, usually a custom message set. The optional text will only be shown when using size100. |
ImageAlt |
Alt text for the image to use. |
HidePersonaDetails |
Whether to not render persona details, and just render the persona image/initials. |
PersonaSize |
Size of the persona to appear on screen. |
Presence |
Presence of the person to display - won't display presence if undefined. Value should be from one of the following: away, blocked, busy, dnd, none, offline, online |
Style Properties
| Property | Description |
|---|---|
Theme |
Accepts a JSON string that is generated using Fluent UI Theme Designer (windows.net). Leaving this blank will use the default theme defined by Power Apps. See theming for guidance on how to configure. |
AccessibilityLabel |
Screen reader aria-label |
Example
Following are some example values that could be used in the Persona component:
| Property | Value |
|---|---|
Text |
"Megan Brown" |
SecondaryText |
"Software Engineer" |
TertiaryText |
"In a meeting" |
OptionalText |
"Available at 4:00pm" |
HidePersonaDetails |
false |
ImageUrl |
User().Image |
PersonaSize |
PowerCAT.Persona.PersonaSize.Size100 |
Presence |
PowerCAT.Persona.Presence.Online |
Limitations
This canvas component can only be used in canvas apps and custom pages.