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 makes your interface more consistent.

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 keeps the look and feel of your app unified.

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

Screen Flow overview architecture

Final Result

Steps

1️⃣ Define global navigation items

Defining global navigation items using the Avonni Apex Action: "Navigation Item Collection" allows you to create navigation items once and reuse them throughout your screens.

How do we define global navigation items?

Here's a step-by-step guide to defining global navigation items with Avonni's Apex Action, "Navigation Item Collection":

1. 🎬 Start by adding an action element at the top of your screen flow.

2. 🎯 In the left menu, choose "Avonni".

3. 🔍 Find "New Navigation Item Collection" from the dropdown menu.

4. 🏷️ Provide a label for your collection.

5. ➕ Add the navigation items you want included in your Avonni Navigation component.

6. 🧩 Under the advanced section, opt for "Manually assign variable".

7. 📤 Create a new output resource called "navigationItems".

8. 🔄 In the Data Type dropdown, pick "Apex Defined".

9. 🌐 Enable the "Allow multiples values (collection)" checkbox.

10. 👨‍💻 In the Apex Class dropdown menu, select "avcmpbuilder__NavigationItem".

11. 💾 Don't forget to hit "Save" to apply your settings.

2️⃣ Create a router decision

Adding a router element to our flow is a great way to define the order of outcomes for your flow. Each outcome can be mapped to a specific navigation item, which manages its screen element, leading to a well-structured and intuitive user interface.

How to do it?

Here's your guide to adding a router element to your flow and mapping outcomes to navigation items for an intuitive user interface:

1. ✏️ Start by creating a text variable "activeNavItem". Add a default value corresponding to the first item in your left vertical navigation menu.

   
2. 🧩 Add a decision element below the previously created NavItems Apex Action.

   
3. 🗂️ Define the order of your outcomes. This order will generally mirror your vertical-left navigation menu.

4. 🏷️ Assign a label to each outcome for identification.

5. 🔄 Select the "activeNavItem" resource variable for each outcome.

6. 📐 Set the operator to 'Equal'.

7. 📋 Provide a value name for your activeNavItem resource (usually similar to the label, but without spaces).

8. 🔁 Repeat this process for each outcome in your decision element.

9. ✔️ Once all outcomes are defined, click "Done" to finalize.

3️⃣ Create the screens

Creating Screens for Each Decision

In this step, we'll create screens tailored to each decision outcome. Since we're building a left-menu vertical navigation component using the Avonni Navigation component, each decision must have a corresponding screen element.

We'll add these screen elements to each decision outcome and populate them with consistent components. This ensures a uniform look and feel across all screens, contributing to a cohesive user experience.

Screen element overview

Left-Side navigation configuration using Avonni Navigation

Configuring Avonni Navigation Interactions for Screen Transitions

For the Avonni Navigation component, after assigning the Data source to the Navigation items (as created in Step 1), it's crucial to configure an interaction that triggers navigation to the next screen. Specifically, the Avonni Navigation component needs an interaction configured to advance the flow. This ensures that the flow process continues as expected and proceeds to the next step, the assignment process we'll define in Step 4 below.

4️⃣ Define an assignment

One key step involves adding an assignment element to our screen flow, following the screen element we've added for each navigation item.

This step is essential because it allows us to assign a specific value to each screen for the active menu item. By doing so, we create a clear link between the selection in our navigation component and the content displayed on the screen.

5️⃣ Add a "Connect to an element"

In this final step, we'll connect each decision outcome from our routers to the Avonni NavItems Apex action. This connection is essential for restarting the screen flow process when selecting a navigation item.

Think of this "Connect To Element" as a bridge. It links each possible outcome of your routing logic to the Apex action that controls the Avonni Navigation component. By establishing this connection, we ensure that clicking a navigation item triggers the corresponding decision outcome and restarts the flow.

You must repeat this connection process for every navigation item within each assignment. This ensures that every navigation item click restarts the flow, regardless of which assignment it belongs to.

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