I am trying to develop a data table that can be generic for the most common Objects in Salesforce (Accounts, Cases, Contacts, Leads, and Opportunities). Basically, I am trying to mimic the list view for those objects but have a Combobox at the top of the page that allows the user to select an object and the data table will refresh with that object's records.
I already have the child objectCombobox component and it's passing the selected object to the parent objectDatatable component. I also have an apex controller class that's running a SOQL query retrieving the records for each object.
Is there a way to have the wire functions in if-statements so when an object is selected from the objectCombobox component and passed to the objectDatatable component then the appropriate wire function/apex classes would be called and grab the correct records?
Also is there a way for columns to be dynamically generated rather than what's shown in most Salesforce Developer Documentation on Datatables where they hardcode the columns as a const? Like based on the records that are being pulled from the selected objects wire function assigns the names of those fields as column names?
ObjectController.cls
public with sharing class ObjectController {
@AuraEnabled(cacheable=true)
public static List <Account> getAccounts(){
return [
SELECT Name, BillingCity, Phone, Type
FROM Account
];
}
@AuraEnabled(cacheable=true)
public static List <Contact> getContacts(){
return [
SELECT Name, AccountId, Title, Phone, Email, OwnerId
FROM Contact
];
}
@AuraEnabled(cacheable=true)
public static List <Case> getCases(){
return [
SELECT CaseNumber, Subject, Status, CreatedDate, OwnerId
FROM Case
];
}
@AuraEnabled(cacheable=true)
public static List <Lead> getLeads(){
return [
SELECT Name, Company, Address, Email, Status
FROM Lead
];
}
@AuraEnabled(cacheable=true)
public static List <Opportunity> getOpportunities(){
return [
SELECT Name, AccountId, Amount, CloseDate, StageName, OwnerId
FROM Opportunity
];
}
}
objectCombobox.js
import {LightningElement, api} from 'lwc';
export default class ObjectCombobox extends LightningElement {
@api selectedObjectValue;
get options() {
return [{
label: "Account",
value: 'account'
},
{
label: "Contact",
value: 'contact'
},
{
label: "Case",
value: 'case'
},
{
label: "Lead",
value: 'lead'
},
{
label: "Opportunity",
value: 'opportunity'
},
];
}
handleChange(event) {
this.selectedObjectValue = event.target.value;
//console.log("Selcted value: " + this.selectedObjectValue);
const selectedEvent = new CustomEvent("objectvaluechange", {
detail: this.selectedObjectValue
});
this.dispatchEvent(selectedEvent);
}
}
objectCombobox.html
<template>
<lightning-combobox
name="objects"
value={selectedObjectValue}
placeholder="Select an Object"
options={options}
onchange={handleChange}>
</lightning-combobox>
</template>
objectDatatable.js
import { LightningElement, track, api, wire } from 'lwc';
import { updateRecord } from 'lightning/uiRecordApi';
import { deleteRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import getAccounts from '@salesforce/apex/ObjectController.getAccounts';
import getCases from '@salesforce/apex/ObjectController.getCases';
import getContacts from '@salesforce/apex/ObjectController.getContacts';
import getLeads from '@salesforce/apex/ObjectController.getLeads';
import getOpportunities from '@salesforce/apex/ObjectController.getOpportunities';
export default class ObjectDatatable extends LightningElement {
@track selectedObject;
@track records;
handleObjectChange(event) {
this.selectedObject = event.detail;
//console.log(this.selectedObject);
}
}
objectDatatable.html
<template>
<lightning-card title="Object Datatable" icon-name="custom:custom63">
<div class="slds-m-around_medium">
<c-object-combobox
onobjectvaluechange={handleObjectChange}
></c-object-combobox>
</div>
</lightning-card>
</template>