Adding Action Buttons to Headers
Last updated
Last updated
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.
Type Flow in the setup menu
Click on the "New Flow" button to create a new flow
Select "Screen Flow"
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.
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
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: Equals
Select "New Resource" in the Value field to create the ContactID variable.
Resource Type: Variable
API Name: OppID
Data Type: Record
Object: Opportunity
Available for input
Select ID from our new created variable.
Click "Done" and "Done"
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)
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.Name
Is Joined: True
Pull to Boundary: True
Action: Edit
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 button
Select the target name we just created before
Type > select "Navigate"
Page reference type > Record Page
Object API Name > Opportunity
Record Id: Item:name
Action 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.
