Header
A header provides a short summary of content.
📘 Overview
The Avonni Header flow screen is a customizable UI component for creating visually appealing headers in Salesforce. It allows users to add icons, images, and navigation links to the header. The component is easy to configure and offers an intuitive interface for creating a professional-looking header. Its versatility makes it an essential component for any Salesforce Flow Screen toolkit.
🎓 Tutorials
Name | Description | Illustration |
---|---|---|
Learn to create and customize striking card headers in screen flows with the Header component. | ||
Master creating a profile card with a stunning, functional header in screen flows. | ||
Discover how to enhance your header component with actionable buttons in this step-by-step guide. | ||
Learn to easily add a background image to your header component with this straightforward guide, enhancing its visual appeal. |
🎚️ Changing the Properties
Adding a title
This is where you will add an overall title to the header component.
Adding a caption
Used to contain more information about the header component
Adding a background image
Here are some additional details about adding a background image to the header:
The background image can be any file type, such as JPEG, PNG, or GIF.
The background image will be displayed behind the header text and other content.
Various visual options
Is Joined
: to unify the header component to your subsequent components inside your screen flow.
Is Text Outside
: the title will be outside the header
Pull to Boundary
: to pull the elements on either side of the container to the boundary.
Adding an Avatar
The Avonni Header Flow Screen Component can display an avatar. The avatar can be a user's profile picture, a company logo, or any other image.
To add an avatar to the header, follow these steps:
Click on the Avatar section to expand settings.
Select an icon or an image from your computer.
Set various settings like variant, size and position.
The avatar will be displayed in the header. You can adjust the size and position of the avatar using the Image settings section.
Adding Actions
Expand the Actions menu to add actions on the header component. You can add as many actions as you want and define the number of visible action buttons you want to display.
🪄 Adding Interactions
Interactions define what will happen when users click on an action. You can find a list of interactions that are available here.
Here are the available Actions for the Header Component:
On
Action click
On
Avatar Action click
🎨 Styling
From the Styles panel, you can customize styling attributes for the Header:
Background
Title
Caption
Avatar
Avatar Action
Border Bottom
You can find the instructions for styling here.
🎛️ Specifications
Name | Type | Description |
---|---|---|
actions | HeaderAction[] | Display actions as buttons. |
avatar | HeaderAvatar | Display an Avatar in the header. |
avatarActions | HeaderAvatarAction[] | Display actions on the avatar with a button menu icon. |
backgroundSrc | String | Add a background image to the header. |
caption | String | The caption can include text, and is displayed over the title. |
isJoined | Boolean | To unify the header component to your subsequent components. |
isTextOutside | Boolean | Title will be outside the header content. |
pullToBoundary | Boolean | This attribute pulls the elements on either side of the container to the boundary. |
title | String | The title can include text, and is displayed in the header. |
variant | String | The Variant changes the shape of the avatar. |
visibleActionsButtons | Integer | Number of visible actions buttons to be displayed. |
Last updated