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

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

<figure><img src="/files/fZTGAW1YfTJAzYa5bb1O" alt=""><figcaption></figcaption></figure>

***

## 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**:

* [**App**](#app)**:** Navigate to a specific Lightning App.
* [**Knowledge Article**](#knowledge-article)**:** Navigate to a particular article of knowledge.
* [**Lightning Component**](#lightning-component)**:** Navigate to a custom Lightning Component.
* [**Login Page**](#login-page-experience-builder-sites)**:** Navigate to the login page of an Experience Builder site.
* [**Named Page (Standard)**](#named-page-standard)**:** Navigate to standard Salesforce pages (like Home, Chatter, etc.).
* [**Navigation Item Page**](#navigation-item-page)**:** Navigate to a page associated with a custom tab.
* [**Object Page**](#object-page)**:** Navigate to a standard or custom object page (list view, new record page, etc.).
* [**Record Page**](#record-page-most-common)**:** Navigate to a specific record's detail page.
* [**Record Relationship Page**](#record-relationship-page): A specific related list for a record (e.g., an Account's Contacts).
* [**Web Page**](#web-page)**:** Navigate to an external website (URL).

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

***

## Configuration

### 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:

#### **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`&#x20;
* **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*.

#### **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.

{% hint style="warning" %}

#### Important

Prerequisite for `$Component.RecordId`: For `$Component.RecordId` to work, you must set the [**Target Page Object**](/dynamic-components/core-concepts/target-page-object.md) 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.
{% endhint %}

{% @arcade/embed flowId="iMxXZbQESywpcC8OFa2W" url="<https://app.arcade.software/share/iMxXZbQESywpcC8OFa2W>" %}

***

### Object Page

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

* **Object API Name**: The target object (e.g., `Lead`).
* **Action Name**: \*&#x20;
  * `home`: The object's home page.
  * `list`: A specific list view.
  * `new`: Opens a blank "New Record" modal.

{% hint style="success" %}

#### **💡 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.
{% endhint %}

{% @arcade/embed flowId="OrrlygDeqJsK1R9gedpz" url="<https://app.arcade.software/share/OrrlygDeqJsK1R9gedpz>" %}

***

### Web Page

Navigate to any internal or external 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 record being viewed or selected.

#### Troubleshooting Web Page Navigation

<details>

<summary><strong>Problem:</strong> Clicking a button with a Web Page interaction does nothing, or navigation doesn't work</summary>

**Possible Causes & Solutions:**

1. **Preview Mode Limitation**
   * <mark style="background-color:orange;">⚠️</mark> <mark style="background-color:orange;"></mark><mark style="background-color:orange;">**Interactions do not work in Preview Mode**</mark>
   * 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.

</details>

***

### 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&#x20;*****enter*****&#x20;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.

{% hint style="warning" %}

#### Important

In Experience Builder sites, the `Article Type` is ignored; only the `URL Name` is used.
{% endhint %}

***

### 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

***

### 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).

#### 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.
  * *<mark style="background-color:red;">Crucial Note</mark>:* 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.

<figure><img src="/files/3BWPUwYE5QCixCWAoqly" alt="" width="375"><figcaption></figcaption></figure>

***

### 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`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/navigation-and-notifications/navigate.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.