Pass List View Selected Values to Lightning Web Component

Hello friends, In this post you will see an example that helps you to pass selected value from list view to lightning web component. This is really helpful for those requirements in which you have to perform action on bulk records with the help of single button click. So let's get started,

Pass list view selected values to the lightning web component

To implement this example, I have used account object, you can choose any object as per your requirement. Please follow each step carefully to complete this example.

Git Repository - Pass List View Selected Values to Lightning Web Component

Step 1: Create an apex class that will used as an extension in visualforce page.

ListViewExtension.apxc

 public class ListViewExtension {
    public List<Account> selAccounts;
    public String accountIds;
    
    // Constructor
    public ListViewExtension(ApexPages.StandardSetController cntlr){
        selAccounts = cntlr.getSelected(); //get selected records from account list view
        accountIds = '';  
        for(Account acc : selAccounts){
            accountIds += acc.Id + '-'; //build list of ids string concatenated with comma                         
        }
        accountIds = accountIds.removeEnd('-'); 
    } 
    
    public PageReference redirectToLC(){
	/*
	Important:
	in the below line c__lwc=c:listviewlwc, listviewlwc is my lwc component, please make sure you will put 
	correct name of your lwc component in this parameter
	*/
        String returnUrl ='/lightning/cmp/c__ListViewCMP?c__lwc=c:listviewlwc&c__data='+accountIds;
        PageReference pgReturnPage = new PageReference(returnUrl);
        pgReturnPage.setRedirect(true);
        return pgReturnPage;
    }
 }

Step 2: Create a visualforce page named "ListViewVFP" and replace the following markup.

ListViewVFP.vfp

 <apex:page standardController="Account" recordSetVar="acc" extensions="ListViewExtension" action="{!redirectToLC}">
 </apex:page>

Step 3: Create an apex class that will used in lightning web component to render data as per selected list view records.

GetListViewAccount.apxc

 public class GetListViewAccount {
    @AuraEnabled(cacheable = true)
    public static List<Account> getAccounts(List<Id> lstRecIds){
        return [SELECT Id, Name,Type, Phone, Rating, Website FROM Account WHERE Id IN:lstRecIds ORDER BY Name];
    }
 }

Step 4: Create a lightning component with following markup.

ListViewCMP.cmp 

 <aura:component implements="lightning:isUrlAddressable">
    <aura:handler name="init" value="{!this}" action="{!c.init}"></aura:handler>
    <aura:handler name="change" value="{!v.pageReference}" action="{!c.init}"></aura:handler>
    <lightning:navigation aura:id="navService"></lightning:navigation>	
 </aura:component>

ListViewCMPController.js

 ({
    init : function(component, event, helper) {
        let pageRef = component.get("v.pageReference");         
        let encodedCompDef = btoa(
            JSON.stringify({
                componentDef: pageRef.state.c__lwc,
                attributes: pageRef.state
            })
        );        
        component.find("navService").navigate(
            {
                type: "standard__webPage",
                attributes: {
                    url: "/one/one.app#" + encodedCompDef
                }
            },
            true
        );
    }
 })

Step 5: Create a lightning web component with following markup.

ListViewlwc.html

 <template>
  <lightning-card title="Account List" icon-name="standard:account">   
    <template lwc:if={data}>
      <div class="slds-m-around_medium">
        <div><b><i>{count} Accounts</i></b></div>
          <!-- Datatable component -->
          <lightning-datatable columns={columns} 
                               data={data} 
                               hide-checkbox-column="true"                                        
                               key-field="id"></lightning-datatable>        
      </div>
  </template>
  <template lwc:else><div class="slds-m-around_medium"><b>No Record to display!!</b></div></template>
  </lightning-card>   
 </template>

ListViewlwc.js

 import { LightningElement,track,api} from 'lwc';
 import getAccountList from '@salesforce/apex/GetListViewAccount.getAccounts'; 
 import {ShowToastEvent} from 'lightning/platformShowToastEvent';
 // datatable columns
 const cols = [
    {label: 'Account Name',fieldName: 'Name'},     
    {label: 'Type',fieldName: 'Type'},     
    {label: 'Rating',fieldName: 'Rating'},
    {label: 'Phone',fieldName: 'Phone',type: 'phone'},
    {label: 'Website',fieldName: 'Website'},    
    ];
   
 export default class Listviewlwc extends LightningElement {
    @api c__data;
    @track error;
    @track data;
    @track columns = cols;	
    @track count;
    connectedCallback(){    
        if(this.c__data!="" && this.c__data!=null && this.c__data!=undefined){
            var recids=this.c__data.split('-');                       
            this.getallaccounts(recids);
        }		
    }

    // fetching accounts from server using apex handler
    getallaccounts(recids) {
	getAccountList({lstRecIds:recids}).then(result => {
		console.log(result);
		this.data = result;			
		this.count=result!=null?result.length:0;
		this.error = undefined;
	})
	.catch(error => {
		this.data = undefined;
		this.error = error;
		this.count=0;
		this.dispatchEvent(
			new ShowToastEvent({
				title: 'Error while getting accounts', 
				message: error.message, 
				variant: 'error'
			}),
		);        
	});
    }
 } 

ListViewlwc.js-meta.xml

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

Step 6: Create a list view custom button on account object like following image.

Step 7: Add the above created button in list view by navigating Setup | Object Manager | Account | List View Button Layout after that hit the save button.

Output : Time to test our example, so let's navigate to account list view and see the result.

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.

Thank you.