Dynamic Tab Set Component to show List Views of Multiple objects in Separate Tab

Business Requirement:- The user wants to view his records as list view without navigating to any tab in Navigation Panel on Home Page.

We have created a dynamic custom component to show multiple tabs based on object specified by admins in Lightning App Builder properties pane.

Design Consideration:- We have used lightning:tabset and lightning:tab inside an aura:iteration. Tab content is lazy loaded, and as such only the active and previously active tabs content is queryable. Design attributes helped us to expose component to Admins by allowing to get input from them.

Components Involved

• MyRecords.cmp
• MyRecordsController.js
• MyRecords.design
• MyRecordsController.apxc

MyRecords.cmp

This component iterates through the object list and create tabs and respective list view inside a lightning card.

<aura:component controller="MyRecordsController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="objectNamesForDesign" type="String" access="Public"/>
    <aura:attribute name="objectsLabel" type="String[]" access="Public"/>
    <aura:attribute name="objectNamesForApexParameter" type="String[]" access="Public"/>
    <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
    
    <lightning:card title="My Records" iconName="custom:custom1">
        <div class="slds-box">
            <lightning:tabset>
                <aura:iteration items="{!v.objectsLabel}" var="object" indexVar="key">
                    <lightning:tab label="{!object.label}" id="{!object.value}">
                        <lightning:listView aura:id="listViews"
                                            objectApiName="{!object.value}"
                                            rows="5"
                                            showSearchBar="true"
                                            showActionBar="true"
                                            enableInlineEdit="true"
                                            showRowLevelActions="true"
                                            />
                    </lightning:tab>
                </aura:iteration>
            </lightning:tabset>
        </div>
    </lightning:card>
</aura:component>

MyRecordsController.js

The controller calls apex method and fetch the map value of object name and label specified by admin in Lightning App Builder and set the value in the attributes used with aura:iteration.

({
	doinit : function(component, event, helper) {
        var objectnames= component.get("v.objectNamesForDesign");
        var parts= objectnames.split(",");
        var objectNameList=[];
        for(var i = 0; i < parts.length; i++){
            objectNameList.push(parts[i]);
        }
        component.set("v.objectNamesForApexParameter",objectNameList);
        var action = component.get("c.getAllObjectsLabel");
        action.setParams({ 
            objApiList : component.get("v.objectNamesForApexParameter") 
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.objectsLabel", response.getReturnValue());
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
                else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            console.log("Error message: " + 
                                        errors[0].message);
                        }
                    } else {
                        console.log("Unknown error");
                    }
                }
        });
        $A.enqueueAction(action);
        
    },
})

MyRecords.design

Design exposes the component in Lightning App Builder to interact with admins and provides a text box in properties pane so that admin can provide the object Api’s name separated by comma.

<design:component label="My records component">
	<design:attribute name="objectNamesForDesign" label="Object Names" description="Api name of Objects seperated by comma" />
</design:component>

MyRecordsController.apxc

A method to return a list of map of Object name and its label.

public with sharing class MyRecordsController {
	 @AuraEnabled
    public static List<Map<String, String>> getAllObjectsLabel(List<String> objApiList) {
        List<Map<String, String>> items = new List<Map<String, String>>();
        List<Schema.DescribeSObjectResult> describeSobjectsResult = Schema.describeSObjects(objApiList); 
        for(Schema.DescribeSObjectResult sd: describeSobjectsResult){
            items.add(new Map<String, String>{'value' => sd.getName(), 'label' => sd.getLabel()});
        }        
        return items;
    }
}

You can use this component on All types of pages, Tabs, Quick actions or inside utility Bar.