Dynamically Show The List View Based on Selected Object Name and Show Object Records Based On List View Selection

HI Guys, in this Post I am showing how to Show List View Dynamically based on Object Name and Showing The Data Based On Selected List View Name.

Server Side Controller:

public class ListViewController {  
    @AuraEnabled
    public static list<String> fetchListViews(String strObjName) {
        list<String> lstListViews = new list<String>();
        if(strObjName != null && strObjName !=  ' ' && strObjName.length() != 0) {            
            list<ListView> lstViews = [Select Name,sobjectType From ListView where SobjectType =: strObjName];
            for(ListView iterator:lstViews) {
                lstListViews.add(iterator.Name);
            }
        }   
        return lstListViews;
    }
}

ListViewComponent

<aura:component controller="ListViewController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="objName" type="String" />
    <!--<aura:attribute name="objListView" type="String[]" />-->
    <aura:attribute name="viewName" type="String" />
    <div class="slds-box slds-theme_default">
        <div class="slds-box">
            <lightning:input aura:id="inputName" type="text" label="Enter Object Name:" required="true" />
            <lightning:button variant="brand" label="Show List View" name="List View" onclick="{!c.showData}"/>
        </div>
        <br/><br/>
        <div class="slds-theme_default slds-form-element slds-hide" aura:id="div1">
            <div class="slds-text-heading_medium">
                <strong>Select List View Name From Drop Down List:</strong> 
            </div>
            <div class="slds-select_container">
                <ui:inputSelect  aura:id="selectvalues" class="slds-select"  change="{!c.onListViewChange}"/>
            </div>
            <div class="slds-box slds-theme_default">
                <aura:If isTrue="{!v.viewName != null}">    
                    {!v.body}
                </aura:If> 
            </div>
        </div>
    </div>
</aura:component>

ListViewComponentController.js

({
    showData : function(component, event, helper) {
        helper.showListViewData(component, event, helper);
    },
    
    onListViewChange : function(component, event, helper) {
        helper.showRecordsData(component, event, helper);
    },
})

ListViewComponentHelper.js

({
    showListViewData : function(component, event, helper) {
        var strValue = component.find("inputName").get("v.value");
        var setOptions = component.find("selectvalues");
        component.set("v.objName", strValue);
        var action = component.get("c.fetchListViews");
        action.setParams({
            "strObjName" : strValue
        });
        var optionValues = [];
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state == "SUCCESS") {                 
                $A.util.removeClass(component.find('div1'), 'slds-hide');
                $A.util.addClass(component.find('div1'), 'slds-show');
                var listviewvalue = response.getReturnValue();
                if(listviewvalue != null && listviewvalue != undefined) {
                    optionValues.push({
                        class:"optionclass",
                        label:"--None--",
                        value:""
                    });
                }
                for(var i=0; i<listviewvalue.length; i++) {
                    optionValues.push({
                        class:"optionclass",
                        label:listviewvalue[i],
                        value:listviewvalue[i]
                    });
                }
                setOptions.set("v.options", optionValues);
            }
        });
        $A.enqueueAction(action); 
    },
    
    showRecordsData : function(component, event, helper) {
        var selectedName = component.find("selectvalues").get("v.value");
        var lstApi = selectedName.replace(/ /g,'');
        component.set("v.viewName", lstApi);
        component.set("v.body" , []);
        $A.createComponent(
            "lightning:listView",
            {
                "objectApiName" : component.find("inputName").get("v.value"),
                "listName" : component.get("v.viewName"),
                "rows": 8,
                "showActionBar":false,
                "enableInlineEdit":true,
                "showRowLevelActions":"true"
            },
            function(newListView, status, errorMessage){
                if (status === "SUCCESS") {
                    var body = component.get("v.body");
                    body.push(newListView);
                    component.set("v.body", body);
                }
                else if (status === "INCOMPLETE") {
                    console.log("No response from server or client is offline.")
                }
                    else if (status === "ERROR") {
                        console.log("Error: " + errorMessage);
                    }
            }
        );  
    },   
})

ListViewComponentApp

<aura:application extends="force:slds">
    <c:ListviewComponent/>
</aura:application>

Please Let Us Know If You Have Any Queries.

Happy Learning!