This component is used to display an avatar that can be an image, text, or a font icon.
MAUI Variations
The Avatar component is enhances to provide additional features if the user is using the MAUI application.
MAUI App Behavior
When using the MAUI app and the Avatar field is configured to use an image there are additional options for uploading an image.
- Take Photo
- This option will attempt to access the devices camera where the user can take a picture and have it immediately be uploaded.
- Open File Picker
- This option will open the devices file system and allot the user to select the image on their device they want to upload.
Website Behavior
On the website when the image is changed the devices file explorer will be displayed where the user can select the image they want to upload.
Component Code
The first section of the code for the component contains the standard parameter set for field components along with the variables needed for the component to function. Following the variables are the methods used by the component which are listed below.
OnParametersSetAsync()
This is the first method called when the component is being initialized and when there are updates to the parent component. This method is used to give variables a value for the component to correctly display.
GetAvatarText()
This method is called by OnParametersSetAsync() if the AvatarType is Text. This methods purpose is to get the text for the avatar either from a target, the static value in the field definition, or from an XML element. If looking for a value from an XML element then first there is a check to see if the XML element contains an element called Initials, if it does that value is taken, otherwise the value of the XML element is taken.
The check for the Initials element is used to get the Initials off of a Contact field.
ChangeImageButtonSelected()
This method is called when the Change Image button is selected (selecting the avatar). This methods purpose is to check if there is already a custom image uploaded, if so then a window is displayed to either upload a new image, remove the uploaded image, or cancel the operation. If no custom image is uploaded then ChangeImage() is called.
ChangeImage()
This method is called by ChangeImageButtonSelected() and when the Change button is selected in the popup window. Its purpose is to call the JavaScript function clickButton in the helper.js file. This call will eventually trigger UploadImage().
RemoveImage()
This method is called when the Remove button is called in the popup window. Its purpose is to remove the custom image currently being used by the avatar component.
UploadImage(InputFileChangeEventArgs uploadedObject = null)
This method is called when an image has been selected on the website or when the Open File Picker / Photo has been taken by camera when using the MAUI application. Its purpose is to take the selected file, ensure it’s an image, validate that the file size is less than the specified max file size, then upload it to the specified storage location in the field definition.
UploadOptionButtonSelected(string uploadOption)
This method is called when the Take Photo option is selected when choosing how to upload an image (only available on the MAUI application). Its purpose is to call UploadImage().
