LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Product Tour
    • Quickstart Tutorial
    • Understanding The Essentials
      • Component Builder
      • Component Visibility
      • Target Page Object
      • Using Variables and Component Data
      • Publishing your Dynamic Components
      • Dynamic vs. Flow Components
    • Avonni Components App
      • Accessing the App
      • Folders
      • Templates
      • Version management
    • AppExchange Listing Page
    • Installation & Licenses Management
  • Tutorials
    • Projects
    • Components
      • Calendar
        • How to Create Events Quickly by Dragging
        • How to Add an Edit Action to Calendar Events
        • How to Add a New Event Button to the Calendar Header
        • How to Customize the Right-Click Menu
        • How to Reschedule Events with Drag and Drop
      • Columns
        • Creating a Responsive 3-Column Layout
      • Data Table
        • How to customize Data Table style
        • How to make a field editable
        • How to add clickable buttons
        • How to color-code badges
        • How to export data
        • How to configure search
        • How to set columns visibility
      • Kanban
        • Saving Changes on Drag-and-Drop
      • List
      • Metric
      • Record Detail
        • Saving Changes
    • Interactions
      • How to create an interaction to navigate to an object page
      • How to create an interaction to navigate to a record page
      • How to Pass Multiple Selected Records from a Dynamic Component to a Screen Flow
    • Reactive Components
      • Reactive Map and Data Table
      • Master-Detail Relationship with Data Tables
      • Vertical Tabs with Reactive Data Table
    • Style
      • How do you add space or a break between sections or fields?
    • Tips and Tricks
      • Using the Dynamic Component component
  • Component Builder
    • Overview
    • Configuring Components
      • Properties
      • Fields
      • Style
    • Data & Interactions
      • Data Sources
        • Manual
        • Picklist
      • Resources
        • Constant
        • Formula
        • Nested Queries
        • Query
        • Variable
      • Interactions
        • CRUD from Record Variable
        • Download
        • Execute Flow
        • Navigate
        • On Load
        • Open Alert Modal
        • Open Confirm
        • Open Dynamic Component Dialog
        • Open Dynamic Component Panel
        • Open Flow Panel
        • Open Flow Dialog
        • Show Toast
    • Advanced Topics
      • Undo / Redo
      • Copy and Paste
      • Keyboard Shortcut
  • Components
    • Explore All Components
    • Accordion
    • Alert
    • Audio Player
    • Avatar
    • Avatar Group
    • Badge
    • Barcode
    • Blockquote
    • Button
    • Button Group
    • Button Icon
    • Button Menu
    • Button Stateful
    • Calendar
    • Camera 🆕
    • Card
    • Carousel
    • Chart
    • Checkbox
    • Checkbox Button
    • Chip Container
    • Color Picker
    • Columns
    • Combobox
    • Container
    • Counter
    • Data LWC Container
    • Data Table
    • Date Picker
    • Date
    • Date Range
    • Dual Listbox
    • Dynamic Component
    • Formatted Address
    • Formatted Name
    • Formatted Value
    • Header
    • Icon
    • Icon Picker
    • Illustration
    • Image
    • Input Color
    • Input Date
    • Input Pen (Signature)
    • Input Text
    • Kanban
    • List
    • LWC Container
    • Map
    • Media Object
    • Metric
    • PDF Viewer
    • Pivot Table
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Rating
    • Record Detail
    • Relationship Graph
    • Scope Notification
    • Section
    • Separator
    • Slider
    • Status
    • Tabbed Container
    • Tabs
    • Text
    • Text Area
    • Timeline
    • Toggle
    • Tree
    • Vertical Visual Picker
    • Video Player
    • Visual Picker
    • Visual Picker Link
  • Help
    • Contact Support
    • Security
    • Performance Guide
    • Deployment Process
    • Release Notes
    • Report Bugs
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Navigate Interaction
  • Overview
  • Supported Components
  • Page Reference Types
  • Configuring Specific Page Reference Types
  • App
  • Knowledge Article
  • Lightning Component
  • Login Page (Experience Builder Sites)
  • Named Page (Standard)
  • Navigation Item Page
  • Object Page
  • Record Page
  • Web Page
  • Automatically Populated Fields When Creating a New Record
  • Tutorials
  • How to create an interaction to navigate to an object page
  • How to create an interaction to navigate to a record page

Was this helpful?

  1. Component Builder
  2. Data & Interactions
  3. Interactions

Navigate

Last updated 1 month ago

Was this helpful?

Navigate Interaction

The Navigate interaction lets you control what happens when a user clicks on a button, link, or other interactive element within an Avonni Dynamic Component. You can define the destination, whether it's another page within your Salesforce org, an external website, or a specific record or object.

Overview

The Navigate interaction is a powerful way to create a seamless user experience by guiding users to the appropriate locations within your application. Instead of just displaying static content, you can make your components interactive and connect them to other parts of Salesforce.

Supported Components

You can typically add the Navigate interaction to components that support user interaction, such as:

  • Buttons

  • Button Groups

  • Button Menus

  • Button Icons

  • Data Table (row actions, header actions)

  • List Items

  • And Potentially others.

Page Reference Types

The core of the Navigate interaction is the "Page Reference Type." This determines what kind of destination you're linking to. Avonni Dynamic Components support a wide range of page reference types:

The following sections detail how to configure each page reference type.

Configuring Specific Page Reference Types

App

Use this to navigate to a Lightning App.

  • Configuration:

    • Page Reference Type: App

    • App Target: Enter either:

      • The App ID (e.g., 06mRM0000008dNrYAI). You can find the App ID in the URL when editing the app in Setup > App Manager. The URL will look like: /lightning/app/06mRM0000008dNrYAI.

      • The App Developer Name (e.g., standard__LightningSales). This is the API name of the app.

    • Example URLS (For Information Only - you don't enter these URLs):

      • To App Homepage (using App ID): /lightning/app/06mRM0000008dNrYAI

      • To Object Home within App (using App ID): /lightning/app/06mRM0000008dNrYAI/o/Case/home

      • To App Homepage (using Developer Name): /lightning/app/standard__LightningSales

      • To Object Home within the App (using the Developer Name): /lightning/app/standard__LightningSales/o/Case/home

Knowledge Article

Use this to navigate to a specific Knowledge Article.

  • Configuration:

    • Page Reference Type: Knowledge Article

    • Article Type: Enter the API name of the Knowledge Article type (e.g., Knowledge__kav).

    • URL Name: Enter the URL Name of the specific article you want to link to.

    • Important Note: In Experience Builder sites, the Article Type is ignored; only the URL Name is used.

Lightning Component

Use this to navigate to a custom Lightning Web Component (LWC) or Aura component.

  • Configuration:

    • Page Reference Type: Lightning Component

    • Component Name: Enter the component's API name in the format namespace__componentName (e.g., c__myComponent for a component in the default namespace, or myNamespace__myComponent for a component in a managed package).

Login Page (Experience Builder Sites)

Use this to navigate to the login or logout page of an Experience Builder site.

  • Configuration:

    • Page Reference Type: Login Page

    • Action Name: Choose either:

      • login: To go to the login page.

      • logout: To log the user out.

Named Page (Standard)

Use this to navigate to standard Salesforce pages.

  • Configuration:

    • Page Reference Type: Named Page (Standard)

    • Page Name: Choose from the available standard page names:

      • home

      • chatter

      • today

      • dataAssessment

      • filePreview

Navigation Item Page

Use this to navigate to a page associated with a custom tab.

  • Configuration:

    • Page Reference Type: Navigation Item Page

    • Tab API Name: Enter the API name of the custom tab (e.g., My_Custom_Tab__c).

Object Page

Use this to navigate to standard or custom object pages without specifying a particular record. This differs from the "Record Page" option, which navigates to a specific record. Here, you're navigating to object-level views.

Configuration

  • Page Reference Type: Object Page

  • Object API Name: Enter the API name of the standard or custom object (e.g., Account, Case, My_Custom_Object__c).

  • Action Name: Choose the action:

    • home: Navigate to the object's home page (usually a list view).

    • list: Navigate to a specific list view. Note: To specify which list view, you often need additional configuration (which may depend on the specific Avonni component). Refer to the component's documentation for details.

    • new: Navigate to the "new record" creation page for the object

Record Page

Use this to navigate a specific record's detail, edit, or clone page within Salesforce.

Configuration

  • Page Reference Type: Record Page

  • Object API Name: Enter the API name of the object to which the record belongs (e.g., Account, Contact, My_Custom_Object__c). This determines the type of record you're linking to.

  • Record ID: For the Record ID, select the field that includes the record's ID. The available fields are determined by your Dynamic Component's Target Object API Name setting, or you can choose a variable containing a Record ID. A typical example is @AccountsTable.firstSelectedRow.Id to use the ID from a selected row in a Data Table

  • Action Name: Choose the action:

    • view: Go to the record's detail page.

    • edit: Go to the record's edit page.

    • clone: Go to the "clone record" page.

The dropdown will initially show ID fields from the object specified in the Object API Name setting, ensuring you select an ID field compatible with the target object.

Web Page

Use this to navigate a website by specifying a fixed URL or dynamically referencing a field containing a URL.

Configuration

  • Page Reference Type: Web Page

  • URL: You have two options:

    • Static URL: Enter the full URL of the website directly (e.g., https://www.example.com). This will always navigate to the same website.

    • Dynamic URL (from a Field): Select a field from the component's context that contains the URL. This formula field typically constructs the URL based on other data. For example, you might have a formula field on an Account object that generates a URL to the Account's website. You could then select that formula field here. This lets the destination URL change dynamically based on the viewed or selected record.

Automatically Populated Fields When Creating a New Record

When using the Navigate interaction with the Object Page and an action name of new you can automatically populate fields on a new record creation page. You can set variables for the new record page to be opened.

Tutorials

How to create an interaction to navigate to an object page

How to create an interaction to navigate to a record page

: Navigate to a specific Lightning App.

: Navigate to a specific Knowledge Article.

: Navigate to a custom Lightning Component.

: Navigate to the login page of an Experience Builder site.

: Navigate to standard Salesforce pages (like Home, Chatter, etc.).

: Navigate to a page associated with a custom tab.

: Navigate to a standard or custom object page (list view, new record page, etc.).

: Navigate to a specific record's detail page.

: Navigate to an external website (URL).

App
Knowledge Article
Lightning Component
Login Page
Named Page (Standard)
Navigation Item Page
Object Page
Record Page
Web Page