Outline: aura component controller is creating a LWC component (data-table) inside of a created tab: aura js:
viewContent : function(component, event) {
console.log('viewContent invoked');
try {
var viewerID = component.get('v.tvId')
var tab = event.getSource();
var tabLabel = tab.get("v.id");
console.log('%c%s', 'color: #e711cb', 'viewContent: tabLabel (v.id): ', tabLabel);
$A.createComponent("c:dynamicLWCDataTableController", {
objRecId: tabLabel,
}, function (newContent, status ,error) {
if (status === "SUCCESS") {
console.log('viewContent Success');
tab.set('v.body', newContent);
} else {
console.log('viewContent error: ' + error);
throw new Error(error);
}
});
} catch (e) {
console.log('Error in viewContent: ' + e);
}
}
This gets caught by the LWC controller JS:
export default class Dynamic_LWC_Data_Table extends LightningElement {
@track DataTableResponseWrappper;
@track finalSObjectDataList;
@api objRecId;
@wire(getDynamicTableDataList, {TableName: this.objRecId})
wiredContacts({ error, data })
{
try {
console.log('%c%s', 'color: #2703f3', 'lwc objRecId: ', this.objRecId);
} catch (e) {
console.log('Error with console log: ' + e);
}
if(data) {
console.log('lwc data option invoked');
console.log('%c%s', 'color: #e50000', JSON.stringify(data));
/// various data transform or assignment code instructions from here ...
and the LWC HTML, which naturally loads first tries to immediately read this:
<div if:true={DataTableResponseWrappper}>
<div class="slds-text-heading_small">{DataTableResponseWrapper.TableTitle}</div>
<lightning-datatable data={finalSObjectDataList}
columns={DataTableResponseWrappper.lstDataTableColumns}
key-field="Id"
hide-checkbox-column="true"
></lightning-datatable>
Problem is in execution: the objRecId is undefined, eventually showing up. At this point nothing else happens because it is not wired so not necessarily reactive upon change.
Changing the Table Name to a hard coded TableName:
@wire(getDynamicTableDataList, {TableName: 'Example_Tabel'})
I get an initial undefined on the objRecId along with an error from HTML showing it cannot read the object and on the returning wrapper object, then a moment it later it auto-updates and the console log shows both the objRecId and the object but the HTML does not refresh so I do not get the table loaded.
I can think of a few possible solutions but have been encouraged to find a gold class solution to this issue so any assistance would be appreciated.
Ideal world:
- Enough of a delay for objRecId to load up and be used
- A delay or other solution to get the table loaded after the wrapper object has been delivered
