New Header Avatar Action Collection

Overview:

The New Header Avatar Action Collection enhances your screen flow headers by adding a customizable user avatar with dropdown functionality. This action creates a personalized and interactive element that allows users to access profile information or quickly perform relevant actions.

Benefits:

• Personalized User Experience: Create a welcoming and user-centric interface by displaying a user's avatar or initials.

• Quick Access to Actions: Provide convenient access to common user actions or profile settings via a dropdown menu.

• Clean Interface: Consolidate user-specific actions in a compact dropdown, keeping the header uncluttered.

• Visual Appeal: Add a touch of personalization and visual interest to your flow's header.

How It Works

1. Drag and Drop: From the Avonni Actions section of Flow Builder, locate the New Header Avatar Action Collection and drag it onto the desired screen element.

2. Configure Avatar:

   • Label: Set the text you want displayed next to or below the avatar (e.g., the user's name).

   • Icon Name: (Optional) Choose an icon to represent the avatar if a user image isn't available. The icon will often be the user's initials.

3. Configure Dropdown Actions:

   • Action Type: For each action in the dropdown, choose the desired behavior (e.g., navigate to a profile page, trigger a logout flow, open user settings).

   • Action Logic: Define the specific details of each action (e.g., which screen to navigate to, which flow to activate).

Settings and Options

• Label: Customize the text accompanying the avatar.

• Icon Name: Select an icon for situations where a user image isn't available or preferred.

Example Use Cases

• User Profile: Provide direct access to a user's profile page.

• Account Settings: Link to settings where users can manage preferences or security.

• Logout: Offer a quick and easy way for users to log out of the flow or application.

• Notifications: Display a notification badge on the avatar icon if the user has unread notifications.

• Help/Support: Provide a link to help resources or a contact form.

Tips and Considerations

• Respect User Privacy: If using user images, ensure you have appropriate permissions and handle data sensitively.

• Prioritize Relevant Actions: Limit the number of dropdown actions to those most frequently used or essential.

• Use Clear Labels: Make sure dropdown action labels are descriptive and easy to understand.

Integration with Avonni Components

The New Header Avatar Action Collection seamlessly integrates with other Avonni components. You could pair it with the Avonni Notification component to display a notification badge on the avatar when new notifications are available.

Additional Notes

• Consider adding a tooltip to the avatar icon that displays the user's full name or email address.

• Explore options for customizing the appearance of the avatar and dropdown (e.g., colors, styles).