Dynamic Custom Datatable using dual List
Dynamically Selected Objects, Fields and Click on button to display Dynamic Datatable
Order
Account
<template>
<div style="display:block; width:100%;">
<div style="width:50%; float: left; display: inline-block;">
<div class="slds-p-horizontal_medium">
<lightning-combobox name="types" label="Object" value={value} options={options} onchange={handleTypeChange}> </lightning-combobox>
</div>
<lightning-dual-listbox name="languages"
label="Select Fields"
source-label="Available"
selected-label="Selected"
field-level-help="Select Fields to display"
options={fieldAPIoptions}
onchange={handleChange}></lightning-dual-listbox>
<div class="slds-box" >
<p>Selected values are: {selected}</p>
</div>
<lightning-button label="display Record" onclick={onButtonClick}></lightning-button>
</div>
<div style="width:50%; float: left; display: inline-block;">
<template if:true={displayTable}>
<lightning-card>
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
<thead>
<tr class="slds-line-height_reset oos1">
<template for:each={selected} for:item="fldLabel">
<th class="" scope="col" key={fldLabel}>
<div class="slds-truncate" title={fldLabel}>{fldLabel}</div>
</th>
</template>
</tr>
</thead>
<tbody>
<template for:each={records} for:item="record" >
<tr class="slds-hint-parent ooss4" key={record.Id} >
<template for:each={record} for:item="rec">
<td class="" scope="col" key={rec.key}>
<div class="slds-truncate" title={rec.key}>{rec.value}</div>
</td>
</template>
</tr>
</template>
</tbody>
</table>
</lightning-card>
</template>
</div>
</div>
</template>
Js
import { LightningElement,track,wire } from 'lwc';
import getFeildApiNames from '@salesforce/apex/dualListExample.getFeildApiNames';
import getSObjects from '@salesforce/apex/dualListExample.getSObjects';
import getList from '@salesforce/apex/dualListExample.getList';
export default class DynamicDatatable extends LightningElement {
selected = [];
displayTable=false;
@track listOfObjectNames=[];
@track records=[];
@track options;
@track fieldAPIoptions;
objectName;
connectedCallback() {
this.getSObjectOptions();
}
/* To get the list of sobjects */
getSObjectOptions() {
getSObjects()
.then((response) => {
let options = [];
for (var key in response) {
options.push({ label: key, value: response[key] });
}
options.sort();
this.options = options;
})
.catch((error) => {
// toast your error
});
}
/* To get the list of fields of Selected Sobjects */
@wire(getFeildApiNames, {objectName:'$objectName'})
WiredObjects_Type({ error, data }) {
if (data) {
try {
let options = [];
for (var key in data) {
options.push({ label: key, value: data[key] });
}
this.fieldAPIoptions = options;
} catch (error) {
console.error('check error here', error);
}
} else if (error) {
console.error('check error here', error);
}
}
/* On Change of picklist Object is selected */
handleTypeChange(event){
var Picklist_Value = event.target.value;
this.objectName=event.target.value;
console.log('Picklist_Value',this.objectName);
}
/* The Selected Fields moved to selected Box*/
handleChange(event){
console.log('event.detail.value',event.detail.value);
const selectedOptionsList = event.detail.value;
this.selected = selectedOptionsList;
}
/* Dynamically Display Datatable*/
handleLoad() {
let tempListData = [];
getList({ fields: this.selected,objectName:this.objectName })
.then(result => {
result.forEach(currentItem => {
let recordListTemp=[];
for (const [key, value] of Object.entries(currentItem)) {
console.log(key);
if(key!=='Id'){
if (currentItem.hasOwnProperty(key)) {
recordListTemp.push({value:currentItem[key], key:key});
}
else{
recordListTemp.push({value:'', key:key});
}
}}
tempListData.push(recordListTemp);
});
this.records=tempListData;
console.log(JSON.stringify(this.records));
})
.catch(error => {
this.error = error;
});
}
onButtonClick(){
this.displayTable=true;
this.handleLoad();
}
}
Apex:
public class dualListExample {
@AuraEnabled(cacheable=true)
public static Map<String, String> getSObjects() {
Map<String, String> sObjectNamebyLabel = new Map<String, String>();
for(SObjectType objectType : Schema.getGlobalDescribe().values()) {
DescribeSObjectResult sObjectDescribe = objectType.getDescribe();
if(sObjectDescribe.isAccessible() && sObjectDescribe.isQueryable()) {
sObjectNamebyLabel.put(sObjectDescribe.getLabel(),sObjectDescribe.getName());
}
}
return sObjectNamebyLabel;
}
@AuraEnabled(cacheable=true)
public static Map<String, String> getFeildApiNames(String objectName){
Map<String, String> fieldApiNamebyLabel = new Map<String, String>();
List<string> fieldNames=new List<string>();
try {
Map<String, Schema.SObjectType> schemaMap = Schema.getGlobalDescribe();
Map<String, Schema.SObjectField> fields = schemaMap.get(objectName).getDescribe().fields.getMap();
Schema.DescribeFieldResult fieldInfo = null;
for (Schema.SObjectField field : fields.values()) {
fieldInfo = field.getDescribe();
system.debug(fieldInfo.getName()+'====='+fieldInfo.getLabel());
fieldApiNamebyLabel.put(fieldInfo.getLabel(),fieldInfo.getName());
}
} catch (Exception e) {
System.debug('Exception: '+e.getMessage());
return null;
}
return fieldApiNamebyLabel;
}
@AuraEnabled
public static List<sObject> getList(List<String> fields,String objectName) {
string commaSepratedFields='';
for(String s: fields){
if(commaSepratedFields == null || commaSepratedFields == ''){
commaSepratedFields = s;
}else{
commaSepratedFields = commaSepratedFields + ', ' + s;
}
}
string query = 'select ' + commaSepratedFields + ' from ' + objectName + ' Limit 5';
system.debug(query);
return database.query(query);
}
}
Comments
Post a Comment