Pass List View Selected Values to Lightning Component

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

Pass list view selected to lightning 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.

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(){
        //'/lightning/cmp/c__LightningComponentName?c__listofAcounts=parameters'
        String returnUrl = '/lightning/cmp/c__ListViewCMP?c__listofAccounts='+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 component to render data as per selected value.

ListViewHandler.apxc

 public class ListViewHandler {
    
    @AuraEnabled
    public static List<Account> getAccounts(string sAccountIds){      
        List<String> AccountIds=sAccountIds.split('-');           
        Set<String> SobjectFields = Schema.getGlobalDescribe().get('Account').getDescribe().fields.getMap().keySet();
        String queryString='SELECT ' + String.join(new List<String>(SobjectFields), ',') + ' FROM Account WHERE Id IN (\''+String.join(AccountIds,'\',\'')+'\') Order by Name asc';
        return Database.query(queryString);
    }
 }

Step 4: Create a lightning component with following markup.

ListViewCMP.cmp

 <aura:component implements="lightning:isUrlAddressable" controller="ListViewHandler">
    <aura:attribute name="accountIds" type="String" default=""/>
    <aura:handler name="init" value="{!this}" action="{!c.onPageReferenceChange}"/>
    <aura:attribute name="acclist" type="Account[]"/>
    <lightning:card title="Account List" iconName="standard:record">
        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
            <thead>
                <tr>
                    <th scope="col">
                        <div class="slds-truncate" title="">Sr. No.</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Account Name">Account Name</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Type">Type</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Rating">Rating</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Phone">Phone</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Website">Website</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.acclist}" var="a" indexVar="icount">
                    <tr>  
                        <td scope="row">
                            {!icount+1}
                        </td>
                        <td scope="row">
                            {!a.Name}
                        </td>
                        <td scope="row">
                            {!a.Type}
                        </td>
                        <td scope="row">
                            {!a.Rating}
                        </td>
                        <td scope="row">
                            {!a.Phone}
                        </td>
                        <td scope="row">
                            {!a.Website}
                        </td>
                    </tr>
                </aura:iteration> 
            </tbody>
        </table>    
    </lightning:card>     
 </aura:component>

ListViewCMPController.js

 ({
    onPageReferenceChange : function(component, event, helper) {
        var myPageRef = component.get("v.pageReference");
        var accountIds = myPageRef.state.c__listofAccounts;            
        if(accountIds!=null && accountIds!=undefined){
            component.set("v.accountIds",accountIds);
            helper.pullAccount(component);
        }
    }
 })

ListViewCMPHelper.js

 ({
    pullAccount : function(component) {
        var action=component.get("c.getAccounts");
        action.setParams({            
            sAccountIds:component.get("v.accountIds") 
        });
        action.setCallback(this,function(e){
            if(e.getState()=='SUCCESS'){
                var result=e.getReturnValue();
                if(result!=null && result.length>0){
                    component.set("v.acclist",result);
                }
                else{
                    this.showToast("ERROR","error",'No record return'); 
                }
            }
            else{
                this.showToast("ERROR","error",JSON.stringify(e.getError())); 
            }
        });
        $A.enqueueAction(action);
    },
    
    showToast:function(title,type,message){
        var toastEvent = $A.get("e.force:showToast");
        if(toastEvent){
            toastEvent.setParams({"title": title,"type": type,"message": message}).fire();
        }
        else{
            alert(message);
        }
    },
    
 })

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

Step 6: 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.