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

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: 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"

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.Name

  • Is Joined: True

  • Pull to Boundary: True

  • Action: 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 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.