0

I am currently overriding the standard Edit button in Case record detail page using both Aura components and LWC. But upon load of custom form when clicking Edit button in one of the existing records, existing case field values are blank.

How can I fix this?

caseEditPage.html

<template>

    <div class="slds-box slds-theme_default">

        <lightning-record-edit-form object-api-name="Case" 
                                    onsuccess={handleSuccess}
                                    record-id={recordId}>

           
            <div class="slds-grid slds-wrap"> 
                <div class="slds-col slds-size_1-of-2">                             
                    <lightning-input-field field-name="AccountId"> 
                    </lightning-input-field> 
                </div> 
                <div class="slds-col slds-size_1-of-2"> 
                    <lightning-input-field field-name="Status"> 
                    </lightning-input-field> 
                </div> 
                <div class="slds-col slds-size_1-of-2">                             
                    <lightning-input-field field-name="Type"> 
                    </lightning-input-field> 
                </div> 
                <div class="slds-col slds-size_1-of-2">                             
                    <lightning-input-field field-name="Origin"> 
                    </lightning-input-field> 
                </div>
            </div>      
            <lightning-button class="slds-var-m-top_small" 
                              type="submit" 
                              label="Update"> 
                            </lightning-button>                           

        </lightning-record-edit-form>

    </div>
</template>

caseEditPage.js

import { LightningElement, api } from 'lwc'; 
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
 
export default class CaseEditPage extends LightningElement { 
 
    @api recordId; 

    handleSuccess( event ) { 
         
        const toastEvent = new ShowToastEvent({ 
            title: 'Case Updated', 
            message: 'Case Updated Successfully!!!', 
            variant: 'success' 
        }); 
        this.dispatchEvent( toastEvent ); 
 
    }

}

caseEditPageAura.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,lightning:actionOverride" access="global">
   
    <aura:handler name="change" value="{!v.inputValue}" action="{!c.handleValueChange}"/>
    <c:caseEditPage onvaluechange="{!c.getValueFromLwc}"></c:caseEditPage>  
    
</aura:component>

caseEditPageAura.js

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

LWC or Aura component can get recordId only when its directly embedded in lightning page.

Here, you are implementing c:caseEditPage inside caseEditPageAura.cmp and so the LWC component should get recordId from Aura component. PFB:

caseEditPageAura.cmp:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,lightning:actionOverride" access="global">
   
    <aura:handler name="change" value="{!v.inputValue}" action="{!c.handleValueChange}"/>
    <c:caseEditPage recordId="{!v.recordId}" onvaluechange="{!c.getValueFromLwc}"></c:caseEditPage>  
    
</aura:component>

Notice the addition of recordId="{!v.recordId}" attribute.

1
  • Upon applying the following in cmp file, values are now displaying. Never thought the problem is on Aura component though, as I assumed that recordId is controlled in LWC side.Thanks for the help!
    – lol
    Oct 14 '20 at 9:41

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.