User Avatar Control

Add a control that displays avatar from the user profile of the logged in user.

Control Description

The User Avatar control displays the profile picture set as the avatar for the currently logged-in user. This control can be used to display user avatars on dashboards, welcome screens, or other display-type screens.

This control is only available for the Display-type Screen. See Screen Types.

Permissions

Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:

  • Screens: Edit Screens

  • Screens: View Screens

See the Screens permissions or ask your Administrator for assistance.

Add the Control to a Screen

Follow these steps to add this control to the Screen:

  1. Open a Display-type screen where you want to add the control.

  2. Drag and drop the User Avatar icon in the screen editor. The positioning of existing controls adjusts based on where you drag the control.

  3. Configure properties for the User Avatar control. See Settings.

  4. Validate that the control is configured correctly. See Validate Your Screen.

Below is a User Avatar control displayed in a user's welcome screen.

Settings

The User Avatar control has the following properties panel that contain settings:

Design Panel Settings

Advanced Panel Settings

Click the control while in Design mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.

Below are settings for this control in the Advanced panel:

  • Visibility Rule

  • Device Visibility

  • CSS Selector Name

Visibility Rule

Note the following regarding how to use visibility rules:

Device Visibility

Select on which device types this control displays:

  • Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.

  • Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.

CSS Selector Name

See the following best practices regarding custom CSS in Screens:

Last updated

© Copyright 2000-2024 ProcessMaker Inc. All rights reserved.