Common Navigation Actions

Open an Arbitrary URL

Navigate to another web page or URL. The equivalent of clicking a link, or entering a URL into the browser location field.

Don’t use window.open() to open or navigate to a new URL. Instead, use the navigation service to navigate to the URL using a web page PageReference.

1import { NavigationMixin } from "lightning/navigation";
2// ...
3
4  navigateToDsc() {
5    this[NavigationMixin.Navigate]({
6      type: "standard__webPage",
7      attributes: {
8        "url": "https://developer.salesforce.com"
9      },
10    });
11  }

In addition to standard URLs, you can use the navigation service to open other apps or features. See PageReference Types and the deep link documentation for your mobile apps for additional details on the kinds and format of special URL types.

Close a Modal Quick Action Panel

Close a modal panel opened by a quick action, usually to dismiss or cancel the action.

When used to close or cancel a quick action, this is a special case of the Go Back navigation action. As a result, it’s tempting to use the built-in window.history.back() JavaScript function. This works in some, but not all, contexts.

The correct approach in Lightning Web Components is to fire the CloseActionScreenEvent event, and let the framework take care of closing the panel, disposing of framework resources, and so on. For example:

1import { CloseActionScreenEvent } from "lightning/actions";
2// ...
3
4  handleCancelClick(clickEvent) {
5    // Close the modal window 
6    this.dispatchEvent(new CloseActionScreenEvent());
7  }

Not all Salesforce mobile apps support the CloseActionScreenEvent event. For those mobile apps, use window.history.back() as a work-around.

Go Back

Navigate back to the previous page, the equivalent of clicking the browser Back button.

This navigation action is so common, it’s built into all browsers. As a result, it generally doesn’t have on screen user interface elements in most web apps. However, Salesforce mobile apps don’t have a Back button in the standard user interface. If you want to provide a button or other UI element to navigate backwards, you’ll need to build it yourself.

The standard method for doing so is to use the window.history.back() JavaScript function that’s available in most browser containers. This function depends on the history mechanism built into the browser, or the web view of a mobile app, where it requires explicit support. As a result, window.history.back() can behave differently across different browsers and mobile apps. It’s not supported on all Salesforce mobile apps.