Building Left-Side Vertical Navigation

Define global navigation items

To start, we’ll create a centralized list of navigation items for your side menu. This step is essential because it enables you to manage all your menu options in one place, ensuring consistent navigation and making updates easy as your app grows. By defining these items at the beginning of your Flow, you ensure that every screen in your app references the same collection, saving time and reducing errors from duplicate or mismatched menus.

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

   • Select the box labeled '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.

Create a Variable to Track the Active Screen

Next, we need to set up a variable that tracks which screen the user is currently viewing. This variable acts as the “state” of your navigation, letting the Flow know which section to display at any given time.

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.

Build the Main "Router"

Now, set up the main “router” logic using a Decision element. This router is responsible for directing users to the correct screen based on which navigation item they’ve selected.

Why is this important? The router is the heart of your navigation system. Evaluating the `activeNavItem` variable ensures that users are directed to the correct screen when they interact with the menu.

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.

Create Your First Screen and Its Assignment

First Screen Creation

Next, you’ll build the first full navigation path by creating a screen and connecting it to your router logic. This step is crucial because it activates your navigation structure and ensures that users see the correct content when they select a menu item.

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

Configure the Navigation Interaction

This step is essential because it defines what happens when a user clicks on a navigation item. To set it up, open the component builder, go to the Interaction tab, and select the action for the navigation item. Choose the option to move to the next screen in the flow. This ensures that when a user selects a navigation item, the flow automatically takes them to the appropriate screen.

Assignment creation

Now, add an Assignment element to capture the user’s navigation choice and update the active screen variable. This step is essential because it keeps your navigation state in sync with the user’s actions, ensuring the Flow always displays the correct screen after a menu selection.

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

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.

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