Left-Side Vertical Navigation
Overview
This tutorial requires installing the Avonni Flow Screen Components managed package on your Salesforce org.
This step-by-step tutorial on creating a Left-Side Vertical Navigation component uses the powerful capabilities of the Avonni Navigation component.
Discover key concepts, best practices, and tips to enhance your application's user interface and user experience. By the end of this tutorial, you'll be proficient in creating intuitive, responsive Left-Side Vertical Navigation components, and you'll have taken a significant step towards mastering Avonni Flow Screen Components
Throughout this tutorial, we'll walk through the following steps:
Defining Global Navigation Items: Using Avonni's "Navigation Item Collection" Apex Action, we define reusable global navigation items, enhancing interface coherence and reducing development effort and time.
Creating a Router Decision: We add a router to sequence flow outcomes, each linked to a navigation item and its screen. This provides a structured, user-friendly interface for effortless screen navigation.
Creating the Screens: We create screens for each decision outcome, associating them with a left-menu navigation component. This maintains uniformity and a consistent look across all screens.
Defining an Assignment: The final part of this tutorial will be revealed in due course.
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
