A new version of the Avonni Dynamic Components is now available!
Read the Release Notes
YouTube ChannelBook A DemoContact SupportSubscribe for Updates

Navigate

Overview

The Navigate interaction lets you control where users go when they click interactive elements (such as buttons, links, or table rows) in your Dynamic Component. You can send users to:

  • Other pages within Salesforce

  • Specific records or objects

  • External websites

  • Custom Lightning components

Important: Navigate interactions only work on deployed Lightning Pages. They will not function in Preview Mode.

Understanding Page Reference Types

When you add a Navigate interaction, you first choose a Page Reference Type. This tells Salesforce what kind of destination you're navigating to.

Available types:

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

Configuring Guide by Types

Record Page (Most Common)

Use this to: Open a specific record's detail page, edit page, or clone page.

Example scenarios

  • Click a button to view an Account record

  • Click a table row to edit a Contact

  • Clone an Opportunity from a custom action

Configuration

  1. Page Reference Type: Record Page

  2. Object API Name: The object type of the record you're opening

    • Examples: Account, Contact, Opportunity, My_Custom_Object__c

  3. Record ID: Where to get the record's ID from

    • From a table row: Use @TableName.firstSelectedRow.Id

    • From the current record: Use @recordId

    • From a variable: Select your variable containing the ID

  4. Action Name: What page to open

    • view - Detail page (default)

    • edit - Edit page

    • clone - Clone/duplicate page

Example: Navigate to view an Account when clicking a button

  • Object API Name: Account

  • Record ID: @AccountsTable.firstSelectedRow.Id

  • Action Name: view

Watch the tutorial

Object Page

Use this to: Navigate to an object-level page (not a specific record).

Example scenarios

  • Click a button to create a new Account

  • Open the Cases home page

  • View all Opportunities

Configuration

  1. Page Reference Type: Object Page

  2. Object API Name: The object you want to navigate to

    • Examples: Account, Case, Opportunity

  3. Action Name: Which page to open

    • home - Object's home page (typically shows the default list view)

    • list - Specific list view (may require additional configuration)

    • new - New record creation page

Example: Create a new Contact

  • Object API Name: Contact

  • Action Name: new

💡 Tip: When using new, you can pre-populate fields on the new record form. See Automatically Populated Fields below.

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.

Troubleshooting Web Page Navigation

Problem: Clicking a button with a Web Page interaction does nothing, or navigation doesn't work.

Possible Causes & Solutions:

  1. Preview Mode Limitation

    • ⚠️ Interactions do not work in Preview Mode

    • You must deploy your Dynamic Component to a Lightning Page and view it in the actual Salesforce environment to test navigation interactions

    • Preview mode is only for visual layout verification, not functional testing

  2. Invalid or Empty URL

    • Verify the URL is formatted correctly and includes the protocol (e.g., https://)

    • If using a dynamic URL field, check that the field actually contains a valid URL value

    • Test the URL directly in a browser to ensure it's accessible

    • Use the browser Developer Tools (F12) Console to check for JavaScript errors

  3. Missing Protocol (http:// or https://)

    • URLs must include the full protocol: https://www.example.com (correct)

    • www.example.com alone will not work (incorrect)

    • If using a dynamic field, ensure the field value includes the protocol

  4. Salesforce Security Restrictions

    • External URLs may need to be added to your org's Trusted Sites

    • Go to Setup → CSP Trusted Sites and add the domain

    • Some organizations have strict Content Security Policies that block external navigation

  5. Pop-up Blockers

    • If the navigation opens in a new tab/window, browser pop-up blockers may prevent it

    • Check browser settings and allow pop-ups for your Salesforce domain

    • Consider using navigation that opens in the same tab instead

  6. Dynamic URL Field Issues

    • Verify the field reference is correct and pointing to the right object/record

    • Check that the field has data (not null or empty)

    • For formula fields, verify the formula is correctly constructing the URL

    • Test the field value independently to ensure it contains a valid URL

  7. Interaction Not Properly Configured

    • Verify the interaction is actually added to the component (check the Interactions panel)

    • Ensure the correct event trigger is selected (e.g., "On Click" for buttons)

    • Check that the Navigate action is configured correctly within the interactio.n

  8. Component Context Issues

    • If using a dynamic URL from a selected row or record, ensure a record is actually selected

    • For Data Table components, verify that row selection is enabled and working

    • Check that the context variable (e.g., @AccountsTable.firstSelectedRow.Website__c) has a value.

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

  1. Page Reference Type: Lightning Component

  2. Component Name: The component's API name

    • Format: namespace__componentName

    • Default namespace: c__myComponent

    • Managed package: myNamespace__myComponent

Login Page (Experience Builder Sites)

Use this to: Navigate to login or logout pages in Experience Builder sites.

Configuration

  1. Page Reference Type: Login Page

  2. Action Name:

    • login - Navigate to login page

    • logout - Log the user out

Named Page (Standard)

Use this to: Navigate to standard Salesforce pages.

Configuration

  1. Page Reference Type: Named Page (Standard)

  2. Page Name: Choose from:

    • home - Salesforce home page

    • chatter - Chatter feed

    • today - Today's calendar view

    • dataAssessment - Data assessment page

    • filePreview - File preview page

Navigation Item Page

Use this to: Navigate to a page associated with a custom tab.

Configuration

  1. Page Reference Type: Navigation Item Page

  2. Tab API Name: The API name of your custom tab

    • Example: My_Custom_Tab__c

Automatically Populated Fields When Creating a New Record

When navigating to create a new record (Object Page with action new), you can pre-populate fields on the form.

Use case

Create a new Contact that's automatically linked to the current Account.

How it works

  • Set up field mappings in the Navigate interaction

  • The new record form opens with those fields already filled in

  • Users can still modify the values before saving

Example

Pre-populate Account field when creating a Contact from an Account page

  • Navigate to Object Page: Contact

  • Action: new

  • Add field mapping: AccountId = @Record: Id

Tutorials

How to create an interaction to navigate to an object page

How to create an interaction to navigate to a record page

Last updated

Was this helpful?