LWC Function Not Working When Referenced in Salesforce Aura Component Button

Question

I have a creation page for custom object, and I am trying to replicate the standard modal creation page. It is working so far, but I want it to be reusable, so I moved the modal class including the header and footer in aura component.

Upon testing its behavior, nothing's happening when I click the Save button. I inserted a console.log statement to see any values but it doesn't even reach that part.

How can I fix this?

Meanwhile, below are the codes I have:

CustomObjClass

public with sharing class CustomObjClass {
    
    @AuraEnabled
    public static CustomObj__c createCustomObj(CustomObj__c newCustomObj){
        insert newCustomObj;
        return newCustomObj;    
    }
   
}

newCustomObjLWC.html

<template>
    <template if:true={customRec}>            
        <lightning-messages></lightning-messages>
        <div class="slds-var-m-around_medium">
            <div class="slds-grid slds-wrap">    
                <div class="slds-col slds-size_1-of-2">     
                    <lightning-input type="text" 
                        name="Text1__c" 
                        label="Text1" 
                        value={customRec.Text1__c}
                        onchange={handleText1Change}>
                    </lightning-input>
                </div> 
                <div class="slds-col slds-size_1-of-2">     
                    <lightning-input type="text" 
                        name="Text2__c" 
                        label="Text1" 
                        value={customRec.Text2__c}
                        onchange={handleText2Change}>
                    </lightning-input>
                </div> 
                <div class="slds-col slds-size_1-of-2">     
                    <lightning-input type="number" 
                        name="Number1__c" 
                        label="Number1" 
                        value={customRec.Number1__c}
                        onchange={handleNumber1Change}>
                    </lightning-input>
                </div> 
                <div class="slds-col slds-size_1-of-2">     
                    <lightning-input type="number" 
                        name="Number2__c" 
                        label="Number2" 
                        value={customRec.Number2__c}
                        onchange={handleNumber2Change}>
                    </lightning-input>
                </div> 
            </div>   
        </div>
    </template>
</template>

newCustomObjLWC.js

import { LightningElement, track } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';

import createCustomObj from '@salesforce/apex/CustomObjClass.createCustomObj';
    
    export default class CustomObjClass extends NavigationMixin(LightningElement) {
      
    @track customRec = {CustomObj__c:""};
    @track error;
    @track data;
    
    handleText1Change(event) {
        this.customRec.Text1__c = event.detail.value;
    }

    handleText2Change(event) {
        this.customRec.Text2__c = event.detail.value;
    }

    handleNumber1Change(event) {
        this.customRec.Number1__c = event.target.value;
    }

    handleNumber2Change(event) {
        this.customRec.Number2__c = event.target.value;
    }

    saveCustObj() {

        createCustomObj({
            newCustomObj: this.customRec
        })
        .then(result => {
            
            this.customRec = result;
            console.log('Inserted record: ' + this.customRec);
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Record successfully inserted.',
                    variant: 'success',
                }),
            );
            
            this[NavigationMixin.Navigate]({
                type: 'standard__recordPage',
                attributes: {
                    recordId: this.customRec.Id,
                    objectApiName: 'CustomObj__c',
                    actionName: 'view',
                },
            });
        })
        .catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error',
                    message: error.body.message,
                    variant: 'error',
                }),
            );
            
        });
    }

}

newCustomObjAura.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,lightning:actionOverride,lightning:isUrlAddressable" access="global">
    
    <aura:handler name="change" value="{!v.inputValue}" action="{!c.handleValueChange}"/>
    
    <div class="slds-theme_default">
        <div class="edit-modal" style="height: 640px;"> 
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_medium">            
        <div class="slds-modal__container">  
            <header class="slds-modal__header">
                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">New Custom Object Record</h2>
            </header>
            <div class="slds-modal__content slds-var-p-around_medium" id="modal-content-id-1">
    
            <c:newCustomObjLWC aura:id="lwcid" onvaluechange="{!c.getValueFromLwc}"></c:newCustomObjLWC>       

            </div>
            <footer class="slds-modal__footer">   
                <lightning:button variant="brand" label="Save Record" onclick="{!c.handleSave}"></lightning:button>
            </footer>
        </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
        </div>
    </div>        
</aura:component>

newCustomObjAura.js

({
    getValueFromLwc : function(component, event, helper) {
        component.set("v.inputValue",event.getParam('value'));
    },
    
    handleValueChange : function(component, event, helper) {
        $A.get("e.force:closeQuickAction").fire();
    },

    handleSave : function(component, event, helper) {
        component.find('lwcid').saveCustObj();
    }
})

Based on my research, it is possible to call LWC functions inside Aura component buttons through delegating an aura:id to lwc component. I already did same thing, but there's still no success when saving the record itself.

I hope anyone can help me on this.

Thanks in advance!

Answer 1

You need to annotate the saveCustObj method with @api to make it public and accessible to the parent.

import { LightningElement, track, api } from 'lwc';

//...

@api
saveCustObj() {
     //...
}