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:
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.
Set Up Navigation Logic: We'll add a "router" to control which screen is shown when a user clicks on a navigation item.
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.
The final step will be revealed later in the tutorial. (Keep reading to find out!)
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":
🎬 Start by adding an action element at the top of your screen flow.
🎯 In the left menu, choose "Avonni".
🔍 Find "New Navigation Item Collection" from the dropdown menu.
🏷️ Provide a label for your collection.
➕ Add the navigation items you want to be included in your Avonni Navigation component.
🧩 Under the advanced section, opt for "Manually assign variable".
📤 Create a new output resource called "navigationItems".
🔄 In the Data Type dropdown, pick "Apex Defined".
🌐 Enable the "Allow multiples values (collection)" checkbox.
👨💻 In the Apex Class dropdown menu, select "avcmpbuilder__NavigationItem".
💾 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:
✏️ Start by creating a text variable "activeNavItem". Add a default value corresponding to the first item in your left vertical navigation menu.
🧩 Add a decision element below the previously created NavItems Apex Action.
🗂️ Define the order of your outcomes. This order will generally mirror your vertical-left navigation menu.
🏷️ Assign a label to each outcome for identification.
🔄 Select the "activeNavItem" resource variable for each outcome.
📐 Set the operator to 'Equal'.
📋 Provide a value name for your activeNavItem resource (usually similar to the label, but without spaces).
🔁 Repeat this process for each outcome in your decision element.
✔️ 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.
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 |
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 |
|
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.
Last updated
