3

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!

2

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() {
     //...
}
1
  • 1
    Oh, I see. I forgot one of the most important part! It is working now, thanks for pointing that one out :))
    – Ertyq
    Oct 19 '20 at 12: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.