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 which screen is shown when a user clicks on a navigation item.

3. Build the Screens: We'll create the actual 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 to 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 to be 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

In this step, we'll create screens tailored to each decision outcome. Each decision must have a screen element as we build a left-menu vertical navigation component.

We'll add screen elements to each decision outcome, populating these screens with consistent components. This approach guarantees a uniform look and feels across your screens.

Screen element overview

Avonni Navigation configuration

Setting	Value
Active Navigation Item Value	activeNavItem variable created in step 2
Orientation	Vertical
Data Source	Mapped
Data Source Mapped Value	Navigation Items Apex Class element created in step 1

Left-Side navigation configuration using Avonni Navigation

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.

Settings	Value
Variable	activeNavItem created in step 2
Operator	Equal
Value	activeNavigationItemValue

5️⃣ Add a "Connect to an element"

In the final stage of this tutorial, we're adding a "Connect To Element". This critical step enables us to connect each router's decision outcome to the Avonni NavItems Apex action, thus restarting our screen flow process.

Essentially, this element acts as a bridge between the decision outcomes and our Apex action. It ensures the action gets triggered whenever a router decision outcome is activated. The purpose of this connection is to restart the screen flow process each time a navigation item is selected.

Repeat this step for each navigation item under each assignment.

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