Building Left-Side Vertical Navigation

Overview

This tutorial will walk you through creating a left-side vertical navigation menu for your app using the Avonni Navigation component. You'll learn key concepts, best practices, and helpful tips to improve your app's overall user experience.

By the end of this tutorial, you'll be able to

• Confidently build intuitive and user-friendly left-side navigation menus

• Understand how to use Avonni Flow Screen Components effectively

Here's what we'll cover

1. Create Reusable Navigation Items: We'll use Avonni's "Navigation Item Collection" tool to define global navigation items that can be used throughout your app. This saves development time and ensures a more consistent interface.

2. Set Up Navigation Logic: We'll add a "router" to control the screen shown when a user clicks on a navigation item.

3. Build the Screens: We'll create the screens for each navigation item and connect them to the left-menu navigation component. This maintains the look and feel of your app's unified appearance.

4. The final step will be revealed later in the tutorial. (Keep reading to find out!)

Screen Flow overview architecture

Final Result

Guided Steps

1

Define global navigation items

First, we need to create the list of items that will appear in our side navigation menu. We do this once at the beginning of the Flow.

1. Add an Action Element: On your Flow canvas, add an Action element.

2. Find the Avonni Action: In the "Category" list, choose Avonni, then select Navigation Item Collection as the Action.

3. Name and Add Items:

   • Give the action a clear Label (e.g., "Define Main Navigation").

   • Under Navigation Items, click Add Item for each menu option you want. For each item, provide a Label (what the user sees, e.g., "Welcome") and a Name (a unique API-style name, e.g., welcome).

4. Store the Output:

   • Go to the Advanced section and check Manually assign variables.

   • Under "Store Output Values," create a New Resource.

   • Resource Type: Variable

   • API Name: navigationItems

   • Data Type: Apex-Defined

   • Check the box for Allow multiple values (collection).

   • Apex Class: Select avcmpbuilder__NavigationItem.

   • Click Done. You've now created a collection variable (navigationItems) that holds all your menu item data.

2

Create a Variable to Track the Active Screen

We need a simple text variable to keep track of which screen the user is currently viewing.

1. Create a New Resource: In the Flow's toolbox, create a New Resource.

2. Resource Type: Variable

3. API Name: activeNavItem

4. Data Type: Text

5. Default Value: Set this to the unique Name of the first item you created in Step 1 (e.g., generalSettings). This ensures the "General Settings" screen shows first.

3

Build the Main "Router"

This Decision element will direct the Flow to the correct screen based on the activeNavItem variable.

1. Add a Decision Element: Add a Decision element to your canvas after the Apex Action from Step 1.

2. Create an Outcome for Each Navigation Item:

   • For your first outcome, set the Label to "Go to Welcome".

   • Condition: {!activeNavItem} Equals generalSettings.

   • Repeat this for every navigation item you created in Step 1, creating a separate outcome path for each (e.g., "Go to Step 2" where {!activeNavItem} equals step2).

   • Click Done. You should now have your router with a path for each possible screen.

4

Create Your First Screen and Its Assignment

Now we'll build the first complete path: the screen itself and the assignment logic that follows it.

• Add a Screen Element: Drag a Screen element onto the canvas and connect it to the "General Settings" outcome of your Decision router.

• Add the Avonni Navigation Component:

  • Drag the Avonni Navigation component onto the screen canvas.

  • Configure its properties:

    • Data Source: Set this to your {!navigationItems} collection variable.

    • Value: Set this to your {!activeNavItem} variable. This ensures the correct item is highlighted.

• Add Screen Content: Drag other components for your "General Settings" view onto the screen.

• Add an Assignment Element: This is a key step. Drag an Assignment element onto the canvas and connect the "Settings" screen to this Assignment.

• Configure the Assignment:

  • Label: Give it a name like "Set Active Item from Settings Screen".

  • Set Variable Values: Configure the assignment to update your state variable.

    • Variable: {!activeNavItem}

    • Operator: Equals

    • Value: Select the Avonni Navigation component from the "Screen Components" section, and then select its value attribute.

  • Click Done.

5

Complete the Navigation Loop

This final connection ensures continuous navigation.

1. Connect Back to the Router: Drag the connector from the Assignment element you just created back to the Decision element from Step 3.

How this logic works: When the user clicks a new item in the Navigation component, its value changes. When the user proceeds from the screen (e.g., clicks the Flow's "Next" button), the Assignment element captures that new value and updates the activeNavItem variable. The loop then sends the Flow back to the Decision element, which now reads the new value and routes the user to the correct screen.

6

Build and Connect the Remaining Screens

Now that the pattern is established, repeat the process for all other outcome paths from your Decision router:

1. Add a Screen element for the next outcome (e.g., "Go to Step 2").

2. Inside the screen, add and configure the Avonni Navigation component and your content, just as you did in Step 4.

3. Add an Assignment element after the new screen, configuring it to set {!activeNavItem} from this new screen's navigation component value.

4. Connect the Assignment back to the Decision element to complete the loop for this path.

5. Repeat until all navigation paths are built

Having trouble with this tutorial? Contact Avonni support for help.