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]

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 1 times, 1 visits today)
(Visited 6,916 times, 1 visits today)

8 comments

  • 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}”
    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.

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

    • 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 ?

Leave a Reply