Avatar

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 Image component is recommended for this functionality. If more than one Avatar needs to be displayed in a group, you can use the Avatar Group component.

A full example setup of the Avatar is available in our Showroom. You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register on Showroom Signup.

Settings

Avatar Image

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.

Icon

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.

Letters

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.

Tooltip

Here you can configure text which appears when the user hovers over the Avatar component.

Badge

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 Badge is automatically hidden if the output is 0 or an empty string.

Conditional Properties

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.

Event Handlers

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.