0

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

1 Answer 1

0

You just need to make the property reactive:

@wire(getDynamicTableDataList, {TableName: '$objRecId'})

Now that your wire handler will be called at least twice, once with no data, and once with the provisioned data.

3
  • Made the change back to the $objRecId format. Unfortunately it continues to exhibit the same behaviour. Highlights from my console log shows the full object as happy as I can be followed by - Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'TableTitle') And for the record TabeTitle is perfectly readable if it has the object in question. I checked that. I've also been playing with <apexRefresh> with no real result. Currently considering pre-loading the data and sending it along with CreateComponent that makes the datatable though that seems extreme.
    – sfBruce
    Dec 20, 2021 at 23:36
  • @sfBruce Without more context, it's hard to say, but the reactive feature is the intended path. See the documentation on this. Make sure your variable names are correctly case-matching (JS is notoriously case sensitive), and make sure the parameter names match, etc. Your template looks right, as the outer if:true should block the inner parts from rendering.
    – sfdcfox
    Dec 20, 2021 at 23:59
  • Thank you for looking it over and making suggestions. I'm sticking with the reactive rather than this. and going over everything. Got a $10 bill says it's a param or typo and I've been staring at it for so long I can't see it anymore. I'll give it a couple days to see if anyone happens to figure it out but if I get it figured out before that or no other suggestions forthcoming, I'll mark you up for correct as it was helpful.
    – sfBruce
    Dec 21, 2021 at 17:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.