Use Lightning Web Components in Visualforce

Use Lightning Web Components in Visualforce

In this post, we will see how we can use LWC in Visualforce Pages or how to display Lightning Web Component In Visualforce Page. Even though the use of lightning is growing day by day, still some customers are using salesforce classic because of many reasons. Sometimes there is a requirement to use lightning web component in visualforce page.

Lightning Web Components for Visualforce is based on Lightning Out, a powerful and flexible feature that lets you embed Lightning web components into almost any web page. When used with Visualforce, some of the details become simpler. For example, you don’t need to deal with authentication, and you don’t need to configure a Connected App. If you are looking for using lightning aura components in visualforce pages, please refer to Use Lightning Components in Visualforce Pages.

In this example, we will see a very basic example of the lightning web component and then display lightning web component in the visualforce page.

helloComponentForVFLWC.html

<template>
    <lightning-card title="Use LWC in Visualforce" icon-name="custom:custom19">
        <div class="slds-m-around_medium">
            Hello, This is LWC for visualforce page
        </div>
    </lightning-card>
</template>

helloComponentForVFLWC.js

import { LightningElement } from 'lwc';
export default class HelloComponentForVFLWC extends LightningElement {}

HelloLWCExampleApp.app

Here important point is that ltng:outApp needs to be extended in app.

ltng:outApp adds SLDS resources to the page to allow our Lightning components to be styled with the Salesforce Lightning Design System. If we don’t want SLDS resources added to the page, we need to extend from ltng:outAppUnstyled instead.

<aura:application extends="ltng:outApp" access="GLOBAL">
    <aura:dependency resource="helloComponentForVFLWC" />
</aura:application>

HelloLWCExampleVF.page

<apex:page showHeader="false" sidebar="false">
    <apex:includeLightning />    
    <div id="LightningComponentid" />    
    <script>
    $Lightning.use("c:HelloLWCExampleApp", function() {
        $Lightning.createComponent("c:helloComponentForVFLWC",
          { 
          },
          "LightningComponentid",
          function(cmp) {
             console.log('LWC Componenet added in VF page');
          });
    });
    </script>
</apex:page>

In the above Visualforce page, apex:includeLightning tag imports necessary dependencies and scripts to enable Visualforce to act as Lightning component container.

We can use $Lightning.use() method in JavaScript to refer to Lightning Application which extends ltng:outApp.

We can use $Lightning.createComponent create Lightning Component dynamically.

We can call $Lightning.use() multiple times on a page, but all calls must reference the same Lightning dependency app.

We will get the following output

For more detail please refer to official link

Use Static Resource In LWC(Lightning Web Component)

Static Resource In LWC

First, Import static resources from the @salesforce/resourceUrl scoped module. Static resources can be archives (such as .zip and .jar files), images, style sheets, JavaScript, and other files.

The syntax for importing static resource in LWC

import myResource from '@salesforce/resourceUrl/resourceReference';

When static resource has namespace

import myResource from '@salesforce/resourceUrl/namespace__resourceReference';

• myResource—A name that refers to the static resource.
• resourceReference—The name of the static resource.A static resource name can contain only underscores and alphanumeric characters, and must be unique in your org. It must begin with a letter, not include spaces, not end with an underscore, and not contain two consecutive underscores.
• namespace—If the static resource is in a managed package, this value is the namespace of the managed package.

Use Static Resource In Lightning Web Component Example

We will create LWC component to show images. We will get the following output

Let’s create static resource with two images, css file and javascript files.

First, create myresource zip file with the following content. It contains images, css and js folder.

Go to Setup -> Static resource -> Create New

staticResourceLWCExample

<template>
    <lightning-card title="Static Resource Example LWC" icon-name="custom:custom19">
        <div class="slds-m-around_medium">
            <img src={spring20Logo}>
            <img src={summer20Logo}>
        </div>
    </lightning-card>
</template>

staticResourceLWCExample

import { LightningElement } from 'lwc';
import My_Resource from '@salesforce/resourceUrl/myResource';
export default class StaticResourceLWCExample extends LightningElement {
    spring20Logo = My_Resource + '/images/salesforce-spring-2020.jpg';
    summer20Logo = My_Resource + '/images/salesfoce-summer-2020.jpeg';
}

staticResourceLWCExample

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

Now we can add this lwc component on home page.

• Go to Home page
• Click Setup (Gear Icon) and select Edit Page.
• Under Custom Components, find your staticResourceLWCExample component and drag it on right hand side top.
• Click Save and activate.

For more details please refer to official link

Navigation Service in LWC(Lightning Web Components)

Navigation Service in LWC(Lightning Web Components)

To navigate in Lightning Experience, Lightning Communities, and the Salesforce app, use the navigation service, lightning/navigation.

The lightning/navigation service is supported only in Lightning Experience, Lightning Communities, and the Salesforce app. It isn’t supported in other containers, such as Lightning Components for Visualforce, or Lightning Out. This is true even if you access these containers inside Lightning Experience or the Salesforce app. We can use navigation services in LWC to Navigate to Pages, Records, and Lists.

There are different types of navigation options available. Let’s discuss the basic one

Basic Navigation

Use the navigation service, lightning/navigation, to navigate to many different page types, like records, list views, and objects. Also use the navigation service to open files.

Instead of a URL, the navigation service uses a PageReference. A PageReference is a JavaScript object that describes the page type, its attributes, and the state of 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.

Navigation service uses a PageReference. PageReference is a JavaScript object that describes the page type, its attributes, and the state of the page.

Page type(String) and attributes(Object) are required parameters, state(Object) is optional parameter.

Use Navigation Service in LWC

Here are steps to use the navigation service

1. First, we need to 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. To dispatch the navigation request, call the navigation service’s [NavigationMixin.Navigate](pageReference, [replace])

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

Navigation Service in LWC Example

navigationExampleLWC.html

<template>
    <lightning-card title="Navigation Service in LWC(Lightning Web Components)">
        <lightning-card title="Navigate To Record Example">
            <lightning-button label="New Account" onclick={navigateToNewAccountPage}></lightning-button>
            <lightning-button label="View Account" onclick={navigateToViewAccountPage}></lightning-button>
            <lightning-button label="Edit Account" onclick={navigateToEditAccountPage}></lightning-button>
        </lightning-card>
        <lightning-card title="Navigate To Views">
            <lightning-button label="Account Recent list View" onclick={navigateToAccountListView}></lightning-button>
            <lightning-button label="Account Related List" onclick={navigateToContactRelatedList}></lightning-button>
        </lightning-card>
        <lightning-card title="Navigate To Home">
            <lightning-button label="Navigate to Home" onclick={navigateToHomePage}></lightning-button>
            <lightning-button label="Navigate to Contact Home " class="slds-m-around_medium" onclick={navigateToContactHome}></lightning-button>
        </lightning-card>
        <lightning-card title="Navigate To Other">
            <lightning-button label="Navigate to Chatter Home" onclick={navigateToChatter}></lightning-button>
            <lightning-button label="Navigate to Reports" onclick={navigateToReports}></lightning-button>
            <lightning-button label="Navigate to Tab" onclick={navigateToTab}></lightning-button>
            <lightning-button label="Navigate to SFDCPoint" onclick={navigateToWebPage}></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 Visualforce page " onclick={navigateToVFPage}></lightning-button>
            <lightning-button label="Navigate to Aura Lightning Component " class="slds-m-around_medium" onclick={navigateToLightningComponent}></lightning-button>
        </lightning-card>
    </lightning-card>
</template>

navigationExampleLWC.js

import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class NavigationExampleLWC extends NavigationMixin(LightningElement) {
    @api recordId;
    // Navigate to New Account Page
    navigateToNewAccountPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'new'
            },
        });
    }
    // Navigate to View Account Page
    navigateToViewAccountPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'Account',
                actionName: 'view'
            },
        });
    }
    // Navigate to Edit Account Page
    navigateToEditAccountPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'Account',
                actionName: 'edit'
            },
        });
    }
    // Navigation to Account List view(recent)
    navigateToAccountListView() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'list'
            },
            state: {
                filterName: 'Recent'
            },
        });
    }
    // Navigation to Contact related list of account
    navigateToContactRelatedList() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordRelationshipPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'Account',
                relationshipApiName: 'Contacts',
                actionName: 'view'
            },
        });
    }
    //Navigate to home page
    navigateToHomePage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__namedPage',
            attributes: {
                pageName: 'home'
            },
        });
    }
    // Navigation to contant object home page
    navigateToContactHome() {
        this[NavigationMixin.Navigate]({
            "type": "standard__objectPage",
            "attributes": {
                "objectApiName": "Contact",
                "actionName": "home"
            }
        });
    }
    //Navigate to chatter
    navigateToChatter() {
        this[NavigationMixin.Navigate]({
            type: 'standard__namedPage',
            attributes: {
                pageName: 'chatter'
            },
        });
    }
    //Navigate to Reports
    navigateToReports() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Report',
                actionName: 'home'
            },
        });
    }
    //Navigate to Files home
    navigateToFilesHome() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'ContentDocument',
                actionName: 'home'
            },
        });
    }
    // Navigation to lightning component
    navigateToLightningComponent() {
        this[NavigationMixin.Navigate]({
            "type": "standard__component",
            "attributes": {
                //Here customLabelExampleAura is name of lightning aura component
                //This aura component should implement lightning:isUrlAddressable
                "componentName": "c__customLabelExampleAura"
            }
        });
    }
    // Navigation to web page 
    navigateToWebPage() {
        this[NavigationMixin.Navigate]({
            "type": "standard__webPage",
            "attributes": {
                "url": "https://www.sfdcpoint.com/"
            }
        });
    }
    //Navigate to visualforce page
    navigateToVFPage() {
        this[NavigationMixin.GenerateUrl]({
            type: 'standard__webPage',
            attributes: {
                url: '/apex/AccountVFExample?id=' + this.recordId
            }
        }).then(generatedUrl => {
            window.open(generatedUrl);
        });
    }
    // Navigation to Custom Tab
    navigateToTab() {
        this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                //Name of any CustomTab. Visualforce tabs, web tabs, Lightning Pages, and Lightning Component tabs
                apiName: 'CustomTabName'
            },
        });
    }
}

navigationExampleLWC.js-meta.xml

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

Now we can add this LWC component on the Account Record page.

• Go to Account detail record page
• Click Setup (Gear Icon) and select Edit Page.
• Under Custom Components, find your navigationExampleLWC component and drag it on right-hand side top.
• Click Save and activate.

We will get the following output

Navigate to New Record LWC

// Navigate to New Account Page
    navigateToNewAccountPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'new'
            },
        });
    }

Navigate to View Record LWC

// Navigate to View Account Page
    navigateToViewAccountPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'Account',
                actionName: 'view'
            },
        });
    }

Navigate to the Edit Record LWC

// Navigate to Edit Account Page
    navigateToEditAccountPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'Account',
                actionName: 'edit'
            },
        });
    }

Navigate to List View LWC

// Navigation to Account List view(recent)
    navigateToAccountListView() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'list'
            },
            state: {
                filterName: 'Recent'
            },
        });
    }

Navigate to Related List LWC

// Navigation to Contact related list of account
    navigateToContactRelatedList() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordRelationshipPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'Account',
                relationshipApiName: 'Contacts',
                actionName: 'view'
            },
        });
    }

Navigate to Home Page LWC

//Navigate to home page
    navigateToHomePage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__namedPage',
            attributes: {
                pageName: 'home'
            },
        });
    }

Navigate to Object Home LWC

// Navigation to contant object home page
    navigateToContactHome() {
        this[NavigationMixin.Navigate]({
            "type": "standard__objectPage",
            "attributes": {
                "objectApiName": "Contact",
                "actionName": "home"
            }
        });
    }

Navigate to Chatter Home LWC

//Navigate to chatter
    navigateToChatter() {
        this[NavigationMixin.Navigate]({
            type: 'standard__namedPage',
            attributes: {
                pageName: 'chatter'
            },
        });
    }

Navigate to Reports Tab LWC

//Navigate to Reports
    navigateToReports() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Report',
                actionName: 'home'
            },
        });

Navigate to Files Home LWC

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

Navigate to Lightning Component LWC

// Navigation to lightning component
    navigateToLightningComponent() {
        this[NavigationMixin.Navigate]({
            "type": "standard__component",
            "attributes": {
                //Here customLabelExampleAura is name of lightning aura component
                //This aura component should implement lightning:isUrlAddressable
                "componentName": "c__customLabelExampleAura"
            }
        });
    }

Navigate to Web Page LWC

// Navigation to web page 
    navigateToWebPage() {
        this[NavigationMixin.Navigate]({
            "type": "standard__webPage",
            "attributes": {
                "url": "https://www.sfdcpoint.com/"
            }
        });
    }

Navigate to Visualforce page LWC

//Navigate to visualforce page
    navigateToVFPage() {
        this[NavigationMixin.GenerateUrl]({
            type: 'standard__webPage',
            attributes: {
                url: '/apex/AccountVFExample?id=' + this.recordId
            }
        }).then(generatedUrl => {
            window.open(generatedUrl);
        });
    }

Navigate to Custom Tab LWC

// Navigation to Custom Tab
    navigateToTab() {
        this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                //Name of any CustomTab. Visualforce tabs, web tabs, Lightning Pages, and Lightning Component tabs
                apiName: 'CustomTabName'
            },
        });
    }

For more details please refer to official link.