Navegación en Lightning Web Components

Una de las herramientas que nos ofrece Salesforce es la navegación en Lightning Web Components. Esto se puede realizar en Lightning Experience, Experience Builder Sites y en Salesforce Mobile App haciendo uso del servicio ‘lightning/navigation’.

Navegación Básica en Lightning Web Components

Se usa el servicio ‘lightning/navigation’ para poder navegar a diferentes tipos de paginas. Así mismo, se puede usar este servicio para abrir archivos.

El servicio ‘lightning/navigation’ usa un objeto PageReference para describir la navegación a realizar. Sus propiedades son:

Type: es una propiedad obligatorio que genera un formato de URL único y define atributos que se aplican a todas las páginas de ese tipo. Por ejemplo: standard__app, standard__navItemPage, standard__webPage, etc.
Attributes: es una propiedad obligatoria tipo Objeto que se usa para definir la pagina destino. La propiedad Type nos permite definir el conjunto de Atributtes.
State: Esta propiedad opcional nos permite personalizar condicionalmente el contenido dentro de una página determinada.

Ejemplo de un objeto PageReference que nos permite navegar a un ListView Recent de Accounts:

{
    type: 'standard__objectPage',
    attributes: {
        objectApiName: 'Account',
        actionName: 'list'
    },
    state: {
        filterName: 'Recent'
    }
}

¿Cómo usamos el Servicio de Navegación en Salesforce?

El servicio de Navegación se usa en el código de Javascript de un Lightning Web Component. Para utilizarlo, importamos el modulo ‘lightning/navigation’.

import { NavigationMixin } from 'lightning/navigation';

Aplicamos la función ‘NavigationMixin’ a la clase base del componente.

export default class MyCustomElement extends NavigationMixin(LightningElement) {}

Además, también debemos declarar un objeto PageReference para definir la página a donde queremos navegar. Por ejemplo un objeto que nos permita navegar a una Web Page que contenga pagina de Salesforce(http://salesforce.com)

{
    type: 'standard__webPage',
    attributes: {
        url: 'http://salesforce.com'
    }
}

Ejemplo de Navegación en Lightning Web Component

En el siguiente ejemplo, creamos un link en una plantilla de un Lightning Web Component nos permita navegar al Account Home Page.

<template>
    <div>
        <a href={url} onclick={handleClick}>Account Home</a>
    </div>
</template>

Cuando el usuario haga click en el link, se ejecutará el método ‘handleClick’, el cual va a permitir navegar a otra página.

import { LightningElement, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class NavigationLinkExample extends NavigationMixin(LightningElement) {

    url;

    connectedCallback() {
        this.accountHomePageRef = {
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'home'
            }
        };
        this[NavigationMixin.GenerateUrl](this.accountHomePageRef)
            .then(url => this.url = url);
    }

    handleClick(evt) {
        evt.preventDefault();
        evt.stopPropagation();
        this[NavigationMixin.Navigate](this.accountHomePageRef);
    }
}