Avatar
Last updated
Was this helpful?
Last updated
Was this helpful?
The Avatar component is used to display a single image, usually a profile picture or similar. It can also be used to display other images, but the component is recommended for this functionality. If more than one Avatar needs to be displayed in a group, you can use the component.
This is where you connect the Image to your Data.
Examples of what the Image UI Component may be connected to:
A Resource File uploaded to Appfarm Create named background.png
An object from the File Object Class Task Photos
, connected to the property File Content
(which is in fact a URL)
A property Company Logo
of type Image URL, found on the Object Class Company
.
The icon that will show if the Avatar Image is empty, or obtains no results. This can be bound to an Enum through the Icon Value setting.
These can also be used if the image has no value. This will display a pair of letters instead of the icon. For instance, a user's initials could be shown if they do not have a profile picture.
Here you can configure text which appears when the user hovers over the Avatar component.
A potential use for the Avatar component is to combine it with a Badge. This badge can be used to display a numerical or String value to the user. For example, in an app that has in-built notifications, an Avatar component can be configured with a Badge to display the number of new notifications that the current user has.
The Icon property can be overwritten based on a specified condition. Icons are only visible when the Avatar's image cannot be found, or is empty.
An Avatar component can be linked to the On Click event handler, which will trigger an action when the component is clicked on by the user. For example, clicking on a user's avatar could open a dialog or a popup which contains more information about that user.