Adding Action Buttons to Headers
Overview
This tutorial offers a step-by-step approach to adding button actions to your header component. Follow along to learn how to seamlessly integrate a functional button in the header, enabling it to trigger specific actions within your flow.
Result
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FDw4nzNQBZ5pnkuI0gaov%252F2023-01-20_08-32-43.png%3Falt%3Dmedia%26token%3Dc2e7facc-d843-4de7-af51-05df1ce65e22&width=768&dpr=4&quality=100&sign=4414c2d4&sv=1)
Steps
Create the screen flow
Type Flow in the setup menu
Click on the "New Flow" button to create a new flow
Select "Screen Flow"
Create a Get Records collection
Creating a "get records" collection helps fetch contact information from our Salesforce. This allows efficient retrieval of the contact data we need for this example. Additionally, by creating a "get records" collection, the process of retrieving the information can be automated and streamlined, saving time and reducing potential errors.
Adding the Get Records element
Click on the + sign
Select the "Get Records" element
Enter a Get Records collection label
Select the "Opportunity" object to get the opportunity records information
Creating the RecordID variable
We will now create a variable resource to store the current record ID. It will allows us to reference and use that information throughout our flow easily. Getting the Opportunity record ID in a variable will be very useful to pass this into our flow for data processing and manipulation.
Steps to follow to create the filter condition:
In the field box, select ID
Operator
: EqualsSelect "New Resource" in the Value field to create the ContactID variable.
Resource Type
: VariableAPI Name
: OppIDData Type
: RecordObject
: OpportunityAvailable for input
Select ID from our new created variable.
Click "Done" and "Done"
Add a Screen element
Click on the + sign to add a screen element with the following settings:
Enter a Screen API Name
Remove the Screen Header and Footer (if needed)
Add the Header Component
Drag the Header Component from the custom list (or type Avatar Group from the search box)
Enter an API Name
Open the Component Builder to access all the component's settings
Set the following settings:
Title
: Record.NameIs Joined
: TruePull to Boundary
: TrueAction
: Edit
Configuring Action Buttons for User-Centric Interactions
Setting up the action for the button you've created is crucial for a smooth user experience. With the Avonni Components package, you can configure this button to perform various actions, like launching a new flow or showing a modal. The main focus is to align the button's action with the user's objectives and the specific context. By clearly understanding the intended result, you can effectively utilize the action button's capabilities to establish the desired interaction.
Here's how to create an interaction on the Edit action button
Click on the Interactions Pane
Click on the
Add Action click
buttonSelect the target name we just created before
Type
> select "Navigate"Page reference type
> Record PageObject API Name
> OpportunityRecord Id
: Item:nameAction name
: Edit
When implementing this example in Salesforce, remember to include the RecordID in App Builder. This step is crucial as it ensures the accurate retrieval of specific record information, directly impacting the effectiveness and reliability of this example.
Last updated