function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SalesForce_52436SalesForce_52436 

Display Table based on object selected

I have written a lightning component to display the picklist values.But i want to display data in tables based on object selected in the picklist.
User-added image
This is the reference image.Please help me how to achieve this?
Khan AnasKhan Anas (Salesforce Developers) 
Hi,

I trust you are doing very well.

Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.


1. This code is to display all fields of an object:

Component: 
<aura:component controller="Schema_TaskSvrController"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" 
                access="global" >
	
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <aura:attribute name="PageHeading" type="String" default="Schema Class In Lightning to Query all Objects"/>
    <aura:attribute name="mydata" type="List"/>
    <aura:attribute name="pickl" type="List" />
    <aura:attribute name="selectedValue" type="String" />
    
    <div class="slds-m-top--xx-large">
    	<div class="slds-page-header">
    		<div class="slds-align--absolute-center">
        		<div class="slds-text-heading--large">       
    				{!v.PageHeading}
                </div>
        	</div>
    	</div>
    </div>
    <br/> <br/>
    
    <div class = "slds-size--3-of-8">
    	<lightning:select aura:id="selectid" label="Select Object" name="obj" value="{!v.selectedValue}">
            <option value="" text="- None -" />
            <aura:iteration items="{!v.pickl}" var="per">
            	<option value="{!per}" text="{!per}" />  
        	</aura:iteration>
        </lightning:select>
        <br/>
        <lightning:button label="Search" onclick="{!c.doSearch}"/>
    </div>
    <br/>
    
    <div class="slds">
        <table data-reactroot="" class="slds-table slds-table_bordered slds-table_cell-buffer">
            <thead>
                <tr class="slds-text-title_caps">
                    <th scope="col">
            			<div class="slds-truncate" title="Fields Name">Fields Name</div>
          			</th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.mydata}" var="row">
                    <tr>
                    	<td>{!row}</td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
</aura:component>

Controller: 
({
	doInit : function(component, event, helper) {
        var action = component.get("c.objectNames");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {           
                var allValues = response.getReturnValue();
                component.set("v.pickl", allValues);
            }        	         
            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);
	},
    
    doSearch : function(component, event, helper) {
        /*component.set('v.mycolumns', [
            {label: 'Fields Name', fieldName: '', type: 'text'}
        ]);*/
        var pickselected = component.find("selectid").get("v.value");
        console.log('pickselected--->' + pickselected);
		component.set('v.selectedValue', pickselected);
        var selected = component.get('v.selectedValue');
        console.log('Selected--->' + selected);
        var action = component.get("c.objectFields");
        action.setParams({selectedObject : selected});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {           
                var allValues = response.getReturnValue();
            	console.log('allValues--->' + allValues);
                component.set("v.mydata", allValues);
            }        	         
            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);
    }
})

CSS: 
.THIS {
}

.THIS.slds-size--3-of-8 {
    margin-left: 475px;
}

Apex: 
public class Schema_TaskSvrController {
	
    @AuraEnabled
    public static List<String> objectNames(){
        List<Schema.SObjectType> gd = Schema.getGlobalDescribe().Values();    
        List<String> options = new List<String>();
        for(SObjectType f : gd){
            options.add(f.getDescribe().getName());
            options.sort();        
        }
        System.debug('options--->>' + options);
        return options;
    }
    
    @AuraEnabled
    public static List<String> objectFields(String selectedObject){
        List<String> fields = new List<String>();
        Map<String , Schema.SObjectType> globalDescription = Schema.getGlobalDescribe();
        Schema.sObjectType objType = globalDescription.get(selectedObject); 
        Schema.DescribeSObjectResult r1 = objType.getDescribe(); 
        
        Map<String , Schema.SObjectField> mapFieldList = r1.fields.getMap();  

        for(Schema.SObjectField field : mapFieldList.values())  {  
            Schema.DescribeFieldResult fieldResult = field.getDescribe();  
            
            if(fieldResult.isAccessible())  {  
                fields.add(fieldResult.getName());
            }  
        }
        List<String> so = new List<String>();
        for(String fs : fields){
            so.add(fs);
            so.sort();
        } 
        System.debug('so---->>' + so);
        return so;
    }
}


2. This code is to display records of an object:

Component: 
<aura:component controller="SchemaRecord_TaskSvrController"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" 
                access="global" >
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <aura:attribute name="PageHeading" type="String" default="Schema Class In Lightning to Query all Objects"/>
    <aura:attribute name="pickl" type="List" />
    <aura:attribute name="selectedValue" type="String" />
    
    <div class="slds-m-top--xx-large">
        <div class="slds-page-header">
            <div class="slds-align--absolute-center">
                <div class="slds-text-heading--large">       
                    {!v.PageHeading}
                </div>
            </div>
        </div>
    </div>
    <br/> <br/>
    
    <div class = "slds-size--3-of-8">
        <lightning:select aura:id="selectid" label="Select Object" name="obj" value="{!v.selectedValue}">
            <option value="" text="- None -" />
            <aura:iteration items="{!v.pickl}" var="per">
                <option value="{!per}" text="{!per}" />
            </aura:iteration>
        </lightning:select>
        <br/>
        <lightning:button label="Search" onclick="{!c.doSearch}"/>
    </div>
    <br/>
    
    <!-- division that will show the dynamic content --> 
    <div class="slds-scrollable_x"> 
        <table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal slds-table_col-bordered">
            <tbody id='sfdctable' />
        </table>
    </div>
    
</aura:component>

Controller: 
({
	doInit : function(component, event, helper) {
        var action = component.get("c.objectNames");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {           
                var allValues = response.getReturnValue();
                component.set("v.pickl", allValues);
            }        	         
            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);
	},
    
    doSearch : function(component, event, helper) {
        var pickselected = component.find("selectid").get("v.value");
        console.log('pickselected--->' + pickselected);
		component.set('v.selectedValue', pickselected);
        var selected = component.get('v.selectedValue');
        console.log('Selected--->' + selected);
        var action = component.get("c.objectRecords");
        action.setParams({selectedObject : selected});
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {  
                //component.find('sfdcDiv').set("v.body",[]);
                var allValues = response.getReturnValue();
            	console.log('allValues--->' + allValues);
                var objectValue = allValues.sObjectData;
                console.log('objectValue--->' + objectValue);
                var fieldList = allValues.fieldList;
                console.log('fieldList--->' + fieldList);
                
                /* Create Dynamic Table */
                var sObjectDataTableHeader = [];
                // Create table Header
                for (var i=0; i<fieldList.length; i++) {
                	sObjectDataTableHeader.push(fieldList[i].label);
                }
                console.log('sObjectDataTableHeader--->>' + sObjectDataTableHeader);
                //Get the count of columns.
                var columnCount = sObjectDataTableHeader.length;
                //Create a HTML Table element.
                var table = document.createElement("TABLE");
                //table.border='2';
                //Add the header row.
                var row = table.insertRow(-1);
                for (var i=0; i<columnCount; i++) {
                	var headerCell = document.createElement("TH");
                    //headerCell.width='75';
                    headerCell.innerHTML = sObjectDataTableHeader[i];
                    headerCell.className='headerClass';
                    row.appendChild(headerCell);
                }
                var dvTable = document.getElementById("sfdctable");
                dvTable.innerHTML = "";
                dvTable.appendChild(table);
                
                /* Create Dynamic Table End */    
                if(objectValue.length){
                	for(var j=0; j<objectValue.length; j++){
                    	// Dynamic table Row
                        row = table.insertRow(-1);
                        // Dynamic Table Row End
                        for (var i=0; i<fieldList.length; i++) {
                        	// Dynamic table Row
                            var cell = row.insertCell(-1);
                            cell.innerHTML = objectValue[j][fieldList[i].apiName]; 
                        }
                    }
                }
            }        	         
            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);
    }
})

CSS: 
.THIS {
}

.THIS.slds-size--3-of-8 {
    margin-left: 475px;
}

.THIS.headerClass {
    width: 200px;
}

Apex: 
public class SchemaRecord_TaskSvrController {
	
    @AuraEnabled
    public static List<String> objectNames(){
        List<Schema.SObjectType> gd = Schema.getGlobalDescribe().Values();    
        List<String> options = new List<String>();
        for(SObjectType f : gd){
            options.add(f.getDescribe().getName());
            options.sort();        
        }
        return options;
    }
    
    @AuraEnabled
    public static DynamicBindingWrapper objectRecords(String selectedObject){
        DynamicBindingWrapper dynamicData = new DynamicBindingWrapper();
        List<fieldDataWrapper> wrapperList =  new List<fieldDataWrapper>();
        List<String> fields = new List<String>();
        Map<String , Schema.SObjectType> globalDescription = Schema.getGlobalDescribe();
        Schema.sObjectType objType = globalDescription.get(selectedObject); 
        Schema.DescribeSObjectResult r1 = objType.getDescribe(); 
        
        Map<String , Schema.SObjectField> mapFieldList = r1.fields.getMap();  

        for(Schema.SObjectField field : mapFieldList.values())  {  
            Schema.DescribeFieldResult fieldResult = field.getDescribe();  
            
            if(fieldResult.isAccessible())  {  
                fields.add(fieldResult.getName());
            }
            fieldDataWrapper wrapper = new fieldDataWrapper();
            wrapper.label = field.getDescribe().getLabel();
            wrapper.apiName = field.getDescribe().getName();
            wrapperList.add(wrapper);
        }
        Integer i = 0;
        String fieldsToFetch = '';
        for(String temp:fields){       
            Integer len = fields.size();
            if(i==len-1){
                  fieldsToFetch = fieldsToFetch + temp;
            }
            else{
                  fieldsToFetch = fieldsToFetch + temp + ',';
            }
            i++;
        }
        String sql = ' SELECT ' + fieldsToFetch + ' FROM ' + selectedObject + ' ORDER BY CreatedDate DESC LIMIT 5';
        List<Sobject> objRecords = new List<Sobject>();
        objRecords = Database.Query(sql);
        System.debug('objRecords--->' + objRecords);
        if(objRecords!=null && objRecords.size()>0){
        	dynamicData.sObjectData = objRecords;
        }
        else{
            dynamicData.sObjectData = new List<sObject>();
        }
        dynamicData.fieldList = wrapperList;
        System.debug('dynamicData.sObjectData--->' + dynamicData.sObjectData);
        System.debug('dynamicData.fieldList--->' + dynamicData.fieldList);
        System.debug('dynamicData--->' + dynamicData);
        return dynamicData;
        } 
    
    //Class to store the dynamic data and list of related fields
    public class DynamicBindingWrapper{
        @AuraEnabled
        public List<sObject> sObjectData {get; set;}
        @AuraEnabled
        public List<fieldDataWrapper> fieldList {get; set;}
    }
    
    //Class to store the field information
    public class fieldDataWrapper{
        @AuraEnabled
        public String label {get; set;}
        @AuraEnabled
        public String apiName {get; set;}
    }
}

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Thanks and Regards,
Khan Anas
Kumar Gaurav 98Kumar Gaurav 98
helo sir,
i want to use event here ,so that on selecting any object its fields will be shown in second component ,how could it be done ...please help
 
arti rathodarti rathod
Hi 
Khan Anas  ,
i want to use event here ,so that on selecting any object its fields will be shown in second component ,how could it be done . and that feild hove to clone to source object ...can u please help me with this
 
Purushotham b 8Purushotham b 8
I wants to show  list objects,then selected object records should me display