search
YouTube ChannelBook A DemoContact SupportJoin The Community

diamond-turn-rightNavigate

hashtag
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.

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

hashtag
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.

hashtag
Configuration

hashtag
Record Page (Most Common)

Use this to open the detail, edit, or clone screen for a specific record.

  • Object API Name: The API name of the target object (e.g., Account, Contact).

  • Action Name: Choose view (detail page), edit, or clone.

  • Record ID: You must specify which record the interaction should act on. You have two primary ways to do this:

hashtag
Option A: From a Table Row

Use this when: Your component contains a list or table, and you want to open the record the user just clicked.

  • Syntax: Record:Id

  • Example: A user clicks a "View" button next to a specific contact in your custom list. The interaction grabs the ID of just that row.

hashtag
Option B: From the Current Page (@recordId)

Use this when: Your component is sitting on a Record Detail Page (like an Account page) and you want to trigger an action on that exact record.

  • Syntax: $Component.RecordId

  • What it does: It automatically grabs the 18-digit ID from the browser URL of the page the user is currently viewing.

  • Example: You place a custom "Edit Account" button on the Account Record Page.

    • If a user is looking at the "Acme Corp" account, $Component.RecordId automatically becomes the ID for Acme Corp.

    • If they switch to the "Global Industries" account, the exact same button now uses the ID for Global Industries.

circle-exclamation

hashtag
Important

Prerequisite for $Component.RecordId: For $Component.RecordId to work, you must set the Target Page Object in your component settings to match the page it lives on. If your component is on an Account page, set the Target Page Object to Account. This "unlocks" the component's ability to see the current record's ID.

spinner

hashtag
Object Page

Use this for high-level object navigation rather than specific records.

  • Object API Name: The target object (e.g., Lead).

  • Action Name: *

    • home: The object's home page.

    • list: A specific list view.

    • new: Opens a blank "New Record" modal.

circle-check

hashtag
💡 Tip

When using the new action, you can pre-populate fields. For example, when creating a Contact from an Account page, map AccountId to @recordId to link them automatically.

spinner

hashtag
Web Page

Navigate to any internal or external URL.

hashtag
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 record being viewed or selected.

hashtag
Troubleshooting Web Page Navigation

chevron-rightProblem: Clicking a button with a Web Page interaction does nothing, or navigation doesn't workhashtag

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.

hashtag
App

Use this to navigate to a Lightning App.

hashtag
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

hashtag
Knowledge Article

Use this to navigate to a specific Knowledge Article.

hashtag
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.

circle-exclamation

hashtag
Important

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

hashtag
Lightning Component

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

hashtag
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

hashtag
Login Page (Experience Builder Sites)

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

hashtag
Configuration

  1. Page Reference Type: Login Page

  2. Action Name:

    • login - Navigate to login page

    • logout - Log the user out

hashtag
Named Page (Standard)

Use this to: Navigate to standard Salesforce pages.

hashtag
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

hashtag
Record Relationship Page

The Record Relationship Page interaction acts as a "Deep Link" to a specific related list. Instead of just sending a user to a record's main page, it takes them directly to the "View All" screen for a related category (e.g., all Contacts for a specific Account).

hashtag
Configuration

To set this up, you need to define the Parent (where the data comes from) and the Relationship (which list you want to see).

  • Object API Name: The API name of that Parent record (e.g., Account).

  • Record ID: The ID of the "Anchor" or Parent record.

    • Example: If you are on an Account page, use $Component.RecordId.

    • Example: If clicking a row in a table of Accounts, use Record: Id.

  • Relationship API Name: The API name of the relationship you want to open.

    • Crucial Note: This is often plural and different from the Object name.

    • Common Examples: Contacts, Opportunities, Cases, or Custom_Objects__r.

A Visual Scenario

The Setup: You have a "Summary Component" on your Home Page showing high-priority Accounts. You add a button labeled "Manage All Contacts."

The Configuration:

  • Record ID: Record: Id

  • Object API Name: Account

  • Relationship API Name: Contacts

The Result: When the user selects "Acme Corp" in your table and clicks the button, Salesforce immediately opens the full-page list of every Contact associated with Acme Corp.

hashtag
Navigation Item Page

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

hashtag
Configuration

  1. Page Reference Type: Navigation Item Page

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

    • Example: My_Custom_Tab__c

Last updated

Was this helpful?