Navigate

Overview

The Navigate interaction allows you to define navigation actions when users interact with components, such as clicking a button. This feature enables seamless redirection to various page types, enhancing user engagement and creating a smooth browsing experience across your site.

Key Features

• Supports multiple page reference types

• Customizable navigation actions

• Improves site navigation flow

Use Cases

• Product Page: Redirect to a detailed product spec page.

• Support Page: Navigate to a help article or contact form.

• Community Page: Link to a member profile or discussion thread.

• Event Page: Direct to an event registration form.

• Landing Page: Guide to a campaign details page.

• Profile Page: Navigate to related contact records.

Configuration

Add the Navigate interaction to a component (e.g., Button) on an Experience Cloud site page and configure it via the Interactions Tab in Experience Builder.

Available Navigation Types

These page reference types define where users are directed.

Best Practice: Choose the type based on the target (e.g., Record Page for records); test navigation in preview.

Configuring Navigation to a Specific Page

To set up navigation to a specific page or resource, follow these steps based on your use case:

Navigate to a Named Page

1. Add a Button component and go to the Interactions Tab.

2. Select Navigate and choose Named Page.

3. Page Name: Enter the API name of the target page (e.g., Content_Document__c).

4. Why this? Directs users to an internal page (e.g., a content document page) defined in Experience Builder.

Navigate to a Record Page

1. Select Navigate and choose Record Page.

2. Object API Name: Enter the object (e.g., Contact).

3. Record ID: Select the correct record ID field for redirection; usually, it is “Record: Id”.

4. Action Name: Set to View (default for details).

5. Why this? Takes users to a specific record’s detail page (e.g., a Contact record).

Navigate to an External Web Page

• Setup: Choose the Navigate interaction and select the Web Page option.

• Target URL: You can either:

  • Select a field (e.g., a formula field on the record that stores the URL) to set the redirection target dynamically.

  • Or, choose Custom and manually enter an external URL (e.g., https://www.example.com).

• Why this? This option redirects users to an external website or resource, enhancing site connectivity.

• Troubleshooting: If the navigation doesn’t work, check that the URL or selected field value is valid, and ensure the user has the necessary permissions to access the target site.

Passing URL Parameters with Navigate to Named Page

This feature allows you to send dynamic data (e.g., a record ID) to a target page, customizing its content based on user context. It’s perfect for creating personalized experiences, such as showing specific record details on a new page.

1

Set Up the Target Page

Add a component like Avonni Record Detail to the target page (e.g., CustomerDetails). In its "Record ID" attribute, use the expression {!Route.recordId} to capture a URL parameter named recordId.

2

Set Up the Button

On the source page (e.g., homepage), add an Avonni Button. In the Navigate settings, choose Named Page and enter the API name (e.g., CustomerDetails).

3

Add Parameters

• Name: Enter recordId (matching the target component’s attribute).

• Value: Select a field (e.g., {!Record.Id}) or enter a specific record ID to pass.

4

Why is this Useful

This feature allows you to send dynamic data (e.g., a record ID) to the target page, customizing its content. For example, clicking a button on the homepage can take users to a CustomerDetails page showing a specific Contact’s info based on the passed recordId.

5

Analogy

Think of it like addressing a letter—the Navigate to Named Page is the envelope, and the URL parameter (e.g., recordId) is the address, telling the system where to go and what data to bring

6

Troubleshooting

If the target page doesn’t load correctly, ensure the recordId parameter matches the target component’s attribute and that the ID is valid.

Navigate to a Knowledge Article

1. Select Navigate and choose Knowledge Article.

2. Url Name: Enter the expression {{Record.UrlName}} to dynamically link to the Knowledge Article associated with the current record.

3. Why this? Directs users to a specific Knowledge Article page based on the UrlName field of the current record, simplifying access to support content.

4. Tip: The {{Record.UrlName}} expression uses the LWR syntax to pull the unique URL name of the Knowledge Article (e.g., from a related record). Ensure the record has a valid UrlName field populated.

5. Troubleshooting: If navigation fails, verify the UrlName field exists and contains a valid Knowledge Article URL segment (e.g., article-title); check user permissions to access the article.

Examples

Example 1: Navigate to Support Page

This example adds a button to navigate to a support page on an Experience Cloud site.

1. Configure Button:

   • Label: "Get Support"

   • Icon Name: utility:help

   • Variant: neutral

   • Why this? Creates a help button for user assistance.

2. Set Link To Interaction:

   • Navigate:

     • Type: Named Page

     • Page Name: Customer_Support__c

     • Why this? Redirects to the CustomerSupport page defined in Experience Builder.

Result: Users click the button on any page, navigating to the support page.

Key Considerations

• Target Accuracy: Ensure page names or IDs match exactly.

• Performance: Keep navigation targets lightweight.

• Accessibility: Test button focus and contrast.

• Security: Validate external URLs to prevent issues.

Troubleshooting Common Issues

• Navigation Not Working: Check the selected type and target (e.g., correct Page Name or Record ID); verify permissions.

• Page Not Found: Ensure the named page or object exists in Experience Builder.

• Dynamic ID Fails: Confirm the record ID source (e.g., {!Record.Id}) is valid.

• If Issues Persist: Contact our support team at [email protected] for assistance.

Summary

The Avonni Navigate component enhances Experience Cloud sites with customizable navigation actions. It’s perfect for guiding users to pages or resources