Day: February 2, 2019

Lightning Web Component Navigation Service

Let’s discuss here how to use the Lightning web components NavigationMixin. To navigate in Lightning Experience, Lightning Communities, and the Salesforce app, use the navigation service,lightning/navigation Instead of a URL, the navigation service uses a PageReference, which describes the page. Using a PageReference insulates your component from future changes to URL formats. It also allows your component to be used in multiple applications, each of which can use different URL formats. A PageReference is a JavaScript object that describes the page type, its attributes, and the state of the page. To navigate to a PageRefererence, use the navigation service. To Use the NavigationMixin

 1. Import the lightning/navigation module.
import { NavigationMixin } from 'lightning/navigation';

2. Apply the NavigationMixin function to your component’s base class.

export default class MyCustomElement extends NavigationMixin(LightningElement) {}

3. Create a plain JavaScript PageReference object that defines the page.
4.Call the navigation service’s [NavigationMixin.Navigate](pageReference, [replace]) function to dispatch the navigation request. Ifreplace is set to true, the pageReference replaces the existing entry in the browser history so the user doesn’t have to press the back button twice. The default value is false.

navigateNext() {
       this[NavigationMixin.Navigate]({
           type: 'standard__navItemPage',
           attributes: {
               apiName: this.tabName,
           },
       });
   }

 

The NavigationMixin adds two APIs to your component’s class. Since these APIs are methods on the class, they must be invoked with the this reference.

  • [NavigationMixin.Navigate](pageReference, [replace])
    A component calls this[NavigationMixin.Navigate] to navigate to another page in the application.
  • [NavigationMixin.GenerateUrl](pageReference)
    A component calls this[NavigationMixin.GenerateUrl] to get a promise that resolves to the resulting URL. The component can use the URL in the href attribute of an anchor. It can also use the URL to open a new window using the window.open(url) browser API.
Navigate to Object Home
Use this code to navigate to the account home
navigateToObjectHome() {
        // Navigate to the account object home page.
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'home'
            }
        });
    }

 

Navigate to List View

Use this sample code to navigate to the list view

 navigateToList() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'list'
            },
            state: {
                filterName: 'Recent'
            },
        });
    }

Navigate to New Record 

Use this code to navigate to the new record model popup.

navigateToNewAccount() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'new'
            },
        });
    }

 

Navigate to View Record

Use this code to navigate to the record view

    navigateToViewAccount() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: '001K000001VpnbDIAR',
                objectApiName: 'Account',
                actionName: 'view'
            },
        });
    }

Navigate to the Edit Record 

Use this code to navigate to the edit record model popup

    navigateToAccountEdit() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: '001K000001VpnbDIAR',
                objectApiName: 'Account',
                actionName: 'edit'
            },
        });
    }

Navigate to Related List 

Use this code to navigate to the related list

   
    navigateToRelatedList() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordRelationshipPage',
            attributes: {
                recordId: '001K000001VpnbDIAR',
                objectApiName: 'Account',
                relationshipApiName: 'Contacts',
                actionName: 'view'
            },
        });
    }

Navigate to Tab 

Use this code to navigate to the tab

navigateToTabPage() {
        // Navigate to a specific CustomTab.
        this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                apiName: 'Hello'
            }
        });
    }

Navigate to Files Home 

Use this code navigates to files

navigateToFilesHome() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'ContentDocument',
                actionName: 'home'
            },
        });
    }

 

Navigate to chatter 

Use this code to navigate to chatter

 navigateToChatter() {
        // Use the built-in 'Navigate' method
        this[NavigationMixin.Navigate]({
            // Pass in pageReference
            type: 'standard__namedPage',
            attributes: {
                pageName: 'chatter'
            },
        });
    }

 

Here is the complete code. now create a lightning web component using the following sfdx command

sfdx force:lightning:component:create --type lwc -n navexamples -d force-app/main/default/lwc

navexamples.html

 

<template>
    <lightning-card title="Navigate To Record Example">
        <lightning-button label=" New Account" onclick={navigateToNewAccount}></lightning-button>
        <lightning-button label="View Account" onclick={navigateToViewAccount}></lightning-button>
        <lightning-button label="Edit Account" onclick={navigateToAccountEdit}></lightning-button>
    </lightning-card>
    <lightning-card title="Navigate To Views">
        <lightning-button label="Account Recent list View" onclick={navigateToList}></lightning-button>
        <lightning-button label="Account Related List" onclick={navigateToRelatedList}></lightning-button>
    </lightning-card>
    <lightning-card title="Navigate To Standard Tab">
        <lightning-button label="Navigate to Home" onclick={navigateToHome}></lightning-button>
        <lightning-button label="Navigate to Chatter Home" onclick={navigateToChatter}></lightning-button>
        <lightning-button label="Navigate to Files " class="slds-m-around_medium" onclick={navigateToFilesHome}></lightning-button>
    </lightning-card>

    <lightning-card title="Navigate To Component">
        <lightning-button label="Navigate to Hello " class="slds-m-around_medium" onclick={navigateToHelloTab}></lightning-button>

    </lightning-card>
</template>

 

navexamples.js code

import {
    LightningElement,
    wire
} from 'lwc';
import {
    NavigationMixin
} from 'lightning/navigation';
export default class Navexamples extends NavigationMixin(LightningElement) {
    navigateToNewAccount() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'new'
            },
        });
    }
    navigateToViewAccount() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: '001K000001VpnbDIAR',
                objectApiName: 'Account',
                actionName: 'view'
            },
        });
    }

    navigateToAccountEdit() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: '001K000001VpnbDIAR',
                objectApiName: 'Account',
                actionName: 'edit'
            },
        });
    }
    navigateToList() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'list'
            },
            state: {
                filterName: 'Recent'
            },
        });
    }
    navigateToRelatedList() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordRelationshipPage',
            attributes: {
                recordId: '001K000001VpnbDIAR',
                objectApiName: 'Account',
                relationshipApiName: 'Contacts',
                actionName: 'view'
            },
        });
    }
    navigateToHome() {
        // Use the built-in 'Navigate' method
        this[NavigationMixin.Navigate]({
            // Pass in pageReference
            type: 'standard__namedPage',
            attributes: {
                pageName: 'home'
            },
        });
    }

    navigateToChatter() {
        // Use the built-in 'Navigate' method
        this[NavigationMixin.Navigate]({
            // Pass in pageReference
            type: 'standard__namedPage',
            attributes: {
                pageName: 'chatter'
            },
        });
    }
    navigateToFilesHome() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'ContentDocument',
                actionName: 'home'
            },
        });
    }
    navigateToHelloTab() {
        this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                apiName: 'Hello'
            },
        });
    }
}

navexamples.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>

</LightningComponentBundle>

 

Push changes to scratch org and add it to the page layout for testing .

 

 

Lightning Web components(LWC) Toast Messages

Let’s discuss here how to use the toast notification in Lightning web component.  A component can send a toast notification that pops up to alert users of a success, error, or warning. A toast can also simply provide information. To display a toast notification in Lightning Experience or Lightning communities, import ShowToastEvent from the lightning-platform-show-toast-event module. You can style a toast to provide information, an error, a success, or a warning. You can also configure the visibility of the toast. It can remain visible for three seconds, until the user clicks to dismiss it, or a combination of both. To trigger a toast from a Lightning web component, in the component’s JavaScript class, import ShowToastEventfrom lightning/platformShowToastEvent. Create a ShowToastEvent with a few parameters, and dispatch it. The app handles the rest.

1. Import ShowToastEvent from lightning/platformShowToastEvent. Create and dispatch a ShowToastEvent event with titlemessagevariant, and mode properties.

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

2. Create a ShowToastEvent with a few parameters, and dispatch it

showToast() {
        const event = new ShowToastEvent({
            title: 'Get Help',
            message: 'Salesforce documentation is available in the app. Click ? in the upper-right corner.',
        });
        this.dispatchEvent(event);
    }

 

Show Error Toast 

use this code to show the error toast message

const evt = new ShowToastEvent({
                title: 'Application Error',
                message: 'Something went wrong ',
                variant: 'error',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);

Show Warning Toast 

Use this code to show the warning Toast

 const evt = new ShowToastEvent({
                title: 'Application Warning',
                message: 'Something went wrong ',
                variant: 'warning',
                mode: 'pester'
            });
       this.dispatchEvent(evt);

Show Success Toast 

Use this code to show the success toast message

 const evt = new ShowToastEvent({
                title: 'Record Update',
                message: 'Application is loaded ',
                variant: 'success',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);

Show Info Toast 

Use this code to show the info toast

const evt = new ShowToastEvent({
                title: 'Application Info',
                message: 'Please contact System Admin ',
                variant: 'info',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);

Here is the complete code the custom lightning web component .create a new lightning web component using the SFDX command

sfdx force:lightning:component:create --type lwc -n Notification -d force-app/main/default/lwc

Here is the Notification.html code

<template>
    <h1> Notifications </h1>
    <lightning-button label="Show error" onclick={showErrorToast}></lightning-button>
    <lightning-button label="Show warning" onclick={showWarningToast}></lightning-button>
    <lightning-button label="Show success" onclick={showSuccessToast}></lightning-button>
   <lightning-button label="Show Info" onclick={showInfoToast}></lightning-button>
</template>

Here is the Notification.js JavaScript controller

import {
    LightningElement
} from 'lwc';
import {
    ShowToastEvent
} from 'lightning/platformShowToastEvent';
export default class Notification extends LightningElement {
    showErrorToast() {
            const evt = new ShowToastEvent({
                title: 'Application Error',
                message: 'Something went wrong ',
                variant: 'error',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);
        }
        showWarningToast() {
            const evt = new ShowToastEvent({
                title: 'Application Warning',
                message: 'Something went wrong ',
                variant: 'warning',
                mode: 'pester'
            });
            this.dispatchEvent(evt);
        }
        showSuccessToast() {
            const evt = new ShowToastEvent({
                title: 'Record Update',
                message: 'Application is loaded ',
                variant: 'success',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);
        }
        showInfoToast() {
            const evt = new ShowToastEvent({
                title: 'Application Info',
                message: 'Please contact System Admin ',
                variant: 'info',
                mode: 'dismissable'
            });
            this.dispatchEvent(evt);
        }
}

Use this Notification.js-meta.xml configuration files

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>
    <isExposed>false</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>

</LightningComponentBundle>

Push the changes to scratch org and add this component to the record page and you can able to see the different toast notification based on the button click.