Building a Navigation Menu with Related Records

Overview

This tutorial demonstrates creating a navigation menu displaying related records on a record page using the Avonni Navigation component within a Salesforce Flow. We'll use Accounts and Opportunities as examples, but the principles apply to related objects.

1. Retrieving Related Records

Getting Opportunity Records

• Add a "Get Records" element to your Flow.

• Object: Opportunity

• Filter: AccountId = {!AccountRecordId} (where AccountRecordId is a text variable available for input in your Flow. This allows the Flow to be used on different Account record pages by passing the Account ID into the flow). This assumes your Flow is launched from an Account record page or another context where the Account ID can be provided to the AccountRecordId input variable.

• How Many Records to Store: All records

• How to Store Record Data: Automatically store all fields (or choose specific fields)

• The "Get Records" element automatically creates a record collection variable (e.g., OpportunitiesFromGetRecords). This is your data source.

2. Configuring the Navigation Component

Adding the Component

• In your screen element, add the Avonni Navigation component.

• Data Source: Variable

• Items (Variable): Select the record collection variable (e.g., OpportunitiesFromGetRecords).

3. Adding Sub-Menus (Nested Navigation)

Creating Sub-Item Collections

• You need a separate record collection variable for nested navigation for each sub-item level.

• Add another "Get Records" element (or use a Loop and Assignment if the sub-items are related to the main items). This "Get Records" should retrieve the records for your sub-items (e.g., Contacts related to an Opportunity). Ensure the selected fields match the expected structure.

Linking Parent and Child Records (Assignment)

• Use an "Assignment" element (within a loop if sub items are related to parent item) to connect the main item with the sub-items:

  1. Create a record collection that will hold the main item + linked sub-items collection.

  2. Loop through the main record collection.

  3. Get the sub-item records.

  4. Create another collection variable to hold each sub-item record.

  5. Assign the sub-item collection variable to the items field in your main record collection variable.

Configuring the Navigation Component for Sub-Items

• The items property in your Navigation component will now point to this second, combined record collection variable.

4. Setting the Active Navigation Item

Creating a Text Variable

• Create a new text variable (e.g., ActiveNavItemValue).

Setting the Active Item Value

• Use an "Assignment" element (usually before the screen) to set this variable to the Id of the item you want to be active. For example: {!ActiveNavItemValue} = {!$Record.Id} (if you want the current record's ID to determine the active item).

Connecting the Variable to the Component

• In the Navigation component's properties, set "Active Navigation Item Value" to your text variable (e.g., {!ActiveNavItemValue}).

5. Using Navigation Item Value for Component Visibility

Setting Component Visibility

• Select the component you want to control.

• In the component's properties, go to "Set Component Visibility."

• Choose "Filter Type > All Conditions Are Met (AND)" and create a condition like this:

  • Resource: {!NavigationComponent.activeNavigationItemValue} (replace NavigationComponent with the actual API name of your Navigation component)

  • Operator: Equals

  • Value: Enter the Id of the record corresponding to the navigation item that should make this component visible. You could also use a formula or a text variable here.

6. Interactions (On Select)

While "On Select" interactions are available, using component visibility provides greater flexibility for handling navigation item selections.

7. Troubleshooting

Items Not Appearing

• Verify your "Get Records" element correctly retrieves records using Flow debug mode.

• Ensure your record collection variable is selected in the Navigation component's properties.

• Double-check that the field names in your records match the "Record Collection Field" names in the table above.

Sub-Items Not Appearing

• Ensure you have a separate record collection variable for sub-items.

• Verify your "Assignment" element correctly links the sub-items to your primary record collection.

Active Item Not Highlighting

• Ensure "Active Navigation Item Value" is set to the Record ID of the desired item. Check for typos. Use Flow debug to see the value.