Dynamic Reusable Custom List View In Salesforce 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]

Lightning Component [CustomListView.cmp]

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]

  • Check code comments.

CSS [CustomListView.css]

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

chacnhal soni sfdcMonkey

Post By Chanchal :

1.Dynamic Reusable Custom List View In Salesforce Lightning Component

(Visited 13 times, 1 visits today)
(Visited 19,159 times, 1 visits today)

16 thoughts on “Dynamic Reusable Custom List View In Salesforce Lightning Component”

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

    Reply
  2. <lightning:listView objectApiName=”{!v.objectInfo}”
    listName=”{!v.currentListViewName}”
    rows=”5″
    showSearchBar=”true”
    showActionBar=”true”
    enableInlineEdit=”true”
    showRowLevelActions=”true”/>

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

    Reply
  3. <lightning:listView objectApiName=”{!v.objectInfo}”
    listName=”{!v.currentListViewName}”
    rows=”5″
    showSearchBar=”true”
    showActionBar=”true”
    enableInlineEdit=”true”
    showRowLevelActions=”true”/>

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

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

      Reply
  4. Not sure if my previous comment was posted.

    How can I identify records that have been selected (checkbox marked) in the list view?

    Reply
  5. Hi where do we add this lightning component, when I try to add this component on home page or adding as quick action on Account object the component is not showing records. Am ending up with error “The list view you requested was deleted, or you don’t have permission to view it”

    Reply
  6. Your application looks awesome, but unfortunately the window selection list does NOT appear for me But everything else looks great. I am sure I have copied in your code correctly. Any ideas? Thanks very much.

    Reply

Leave a Comment