Custom List View salesforce

Dynamic Reusable Custom List View In Salesforce Lightning Component

Lightning Component

Hey salesforce freakies ! Salesforce evolves new features always. Recently introduced new lightning component called  “lightning:listView”. That helps us to see all records according to list views of particular object on lightning experience, lightning communities and salesforce mobile App. In standard ‘lightning:listview’ component we can show just a single list view at a time, and to change that we need to edit again in code. To make it more flexible and dynamic we have created a custom drop-down which will help us to change list view directly from lightning component output.

Dynamic Reusable Custom List View
Dynamic Reusable Custom List View Output

ListViewController [Apex Controller]

 * Date : 2/1/2019
 * API : 44
 * Source :
public class listViewController {
    /*apex method to fetch wrapper of list view*/ 
    public static list<listViewWrapper> listValues(string objectInfo){

        list<listViewWrapper> oListViewWrapper = new list<listViewWrapper>();

        for(ListView lv : [SELECT id, Name, DeveloperName FROM ListView
                           WHERE sObjectType = : objectInfo ORDER By Name ASC]){ 
            listViewWrapper oWrapper = new listViewWrapper();
            oWrapper.label = lv.Name;
            oWrapper.developerName = lv.DeveloperName;
        return oListViewWrapper; 

    /*wrapper class to store listView details*/ 
    public class listViewWrapper{
        @AuraEnabled public string label{get;set;} 
        @AuraEnabled public string developerName{get;set;} 

Lightning Component [CustomListView.cmp]

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
 <!-- call doInit js function on component load to fetch list view details-->   
    <aura:handler name="init" value="this" action="{!c.doInit}"/>
 <!-- aura attributes -->   
    <aura:attribute name="listViewResult" type="string[]"/>
    <aura:attribute name="objectInfo" type="string" default="Account"/>
    <aura:attribute name="currentListViewName" type="string" />
    <aura:attribute name="bShowListView" type="boolean" default="false"/> 
  <!-- custom dropdown to display available list view options-->
    <div class="slds-form-element">
        <lightning:select name="select1" onchange="{!c.onPicklistChange}" label=" " class="customCls">
            <aura:iteration items="{!v.listViewResult}" var="listView">
                <option value="{!listView.developerName}">{!listView.label}</option>
   <!-- lightning List View :> 
    <aura:if isTrue="{!v.bShowListView}">
        <lightning:listView objectApiName="{!v.objectInfo}"

In this list view example we have used Account object, you can change object API (case sensitive ) name as per your requirement on line number 10 of lightning component

JavaScript Controller [CustomListViewController.js]

    doInit : function(component, event, helper) {
        // call apex method to fetch list view dynamically 
        var action = component.get("c.listValues");
            "objectInfo" : component.get("v.objectInfo")
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var listViewResult = response.getReturnValue();
                if(listViewResult.length > 0){
                    // set listViewResult attribute with response
                    // set first value as default value
                    component.set("v.currentListViewName", listViewResult[0].developerName);
                    // rendere list view on component
                    component.set("v.bShowListView", true);     
                }            } 
            else if (state === "INCOMPLETE") {
                else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            console.log("Error message: " + 
                    } else {
                        console.log("Unknown error");
    onPicklistChange: function(component, event, helper) {
        // unrenders listView 
        component.set("v.bShowListView", false); 
        // get current selected listview Name 
        var lstViewName = event.getSource().get("v.value"); 
        // set new listName for listView
        component.set("v.currentListViewName", lstViewName);
        // rendere list view again with new listNew  
        component.set("v.bShowListView", true); 
  • Check code comments.

CSS [CustomListView.css]

/* align picklist inside list view*/
.THIS .customCls{
    margin-top: -10px;
    width: 50%;
    position: absolute;
    right: 17px;

Output :

Dynamic Reusable Custom List View
Dynamic Reusable Custom List View Output

Related Resources :

Other popular Post :

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box.

Happy Learning ?

About The contributor: 

Chanchal Soni

1 Post Contribute


  • Hi,
    I was facing an issue earlier , with lightning:listview.
    I have a page , where i call the lightning app and there by lightning component, which consists of <lightning:listview>
    the list view is visible , but the record name hyperlink and inline edit is not enabled.
    Any idea why these two are not working?,any help is appreciated.

  • thank you so much. copy pasting the above code with  minor changes directly solved my issue. you are a gem.

  • <lightning:listView objectApiName=”{!v.objectInfo}”

    I have added this code. The attribute showActionBar is set to true,but action bar is not visible on the mobile device.

  • <lightning:listView objectApiName=”{!v.objectInfo}”

    I have set showActionBar to true,but action bar is not displayed in mobile .

    • On a desktop, this component renders a full list view. On all other form factors, such as a tablet or mobile devices, the component renders a mobile-friendly alternative.

  • Can we use  Dynamic Reusable Custom List View when we have converted the list view to datatable ?

  • Drop down is visible above the list view name and not in the same row as shown in the image . I have pasted same code

  • Hello,

    Can you please explain how to translate the listview and display the same ?

    or any sample example on translating the list views.



    Prashanth R




    Prashanth R

Leave a Reply