+ Start a Discussion
Ken Koellner 7Ken Koellner 7 

LWC Lightning Web Component to both Create and Edit

I want to start prototyping a Lightning Web Component to create AND edit a record in a custom object.  All the examples I found have one component for Edit and one Component for Create.  

Anyone have an example of a component that does BOTH edit AND create?

 

Best Answer chosen by Ken Koellner 7
Ken Koellner 7Ken Koellner 7
I think that this blog has the answer -- https://blog.salesforcecasts.com/using-lightning-record-edit-from-in-lwc/

It states "In the below code if I don't provide `record-id` then I can use the same tag to create a new record. If recordId is provided then we can update the record."

All Answers

CharuDuttCharuDutt
Hii Ken
Try Below Code
<template>
    <lightning-card title="Datatable styling in lwc">
     <lightning-button label="New Record" onclick={HandleNewRecord}></lightning-button>
     <lightning-button label="Edit Record" onclick={HandleEditRecord}></lightning-button>
       <!--create new record-->
  <template if:true={newRecord}>
    <div class="slds-box slds-theme_shade">  
    <div class="slds-modal slds-fade-in-open slds-backdrop">  
    <div class="slds-modal__container">  
            <!--HEADER Section-->  

    <div class="slds-modal__header">  
              <lightning-button-icon icon-name="utility:close" alternative-text="Close this window" size="large"  
                variant="bare-inverse" onclick={closeModal} class="slds-modal__close">  
              </lightning-button-icon>  
              <h2>Create New Record</h2>  
    </div>  
            <!---Body Section-->  
    <div class="slds-modal__content slds-p-around_medium">  
                <lightning-record-form object-api-name='Account' layout-type="Full" columns="2"
                onsuccess={handleSuccess}>
            </lightning-record-form>
    </div>  
            <!------Footer Section
            <div class="slds-modal__footer">  
              </div>
            -->     
    </div>  
    </div>  
    </div>  
</template>
    </lightning-card>
</template>



import { LightningElement,api,track,wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class TestComponent extends NavigationMixin(LightningElement) {
    newRecord=false;
    @api recordId;
    @api handleSuccess(event){
        var recId = event.detail.id;
        
        var toast = new ShowToastEvent({
            'title': 'Account Created...',
            'message': recId + ' Successfully Created..',
            'variant': 'success'
        });
        this.dispatchEvent(toast);
        this.newRecord = false;
    }
    HandleEditRecord(event) {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'Account',
                actionName: 'edit'
            }
        });
    }
    HandleNewRecord(){
        this.newRecord = true;
    }
    closeModal(){
        this.newRecord = false;
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
     <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>
Please Mark It As Best Answer If It Helps
Thank You!
Suraj Tripathi 47Suraj Tripathi 47
Hi Ken Koellner,
You can combine both functionality in one Component according your requirement,
you should get reference from these links:
https://salesforce.stackexchange.com/questions/274109/how-to-embed-multiple-lightning-web-components-using-lightning-layout
https://www.sfdcpoint.com/salesforce/lightning-record-edit-form-lwc/

If you find your Solution then mark this as the best answer.  
Thank you!
 Regards,
 Suraj Tripathi 
Ken Koellner 7Ken Koellner 7

I should qualify that I want to customize the fields an the page so I'd be using lightning-record-edit-form with lightning-input-field and additional custom code.  (That's for the suggestion Charu but lightning-record-form won't allow me to custom code the interface.)

If I look here -- https://developer.salesforce.com/docs/component-library/bundle/lightning-record-edit-form/documentation  I see 

For Edit -- 

<lightning-record-edit-form
    object-api-name={objectApiName}
    record-id={recordId}>
        <lightning-input-field
            field-name={nameField}>
        </lightning-input-field>
....
And for Create --
<template>
    <lightning-record-edit-form object-api-name="Contact">
        <lightning-messages>
        </lightning-messages>
        <lightning-input-field field-name="Name">
        </lightning-input-field>
...


I don't want to repeat the whole tagging for the fields for both Create and Edit.  
 

Does anyone know if the first form can be used for create passing null for the record id?  It seems like there out to be a way to code it only once and have it work for Create and Edit.

mukesh guptamukesh gupta
Hi Ken,

For the Updation you need to pass record Id:-
<template>
   <lightning-record-edit-form record-id={recordId}
                               object-api-name={objectApiName}>
       <lightning-input-field field-name="Name"
                           value="My Field Value"></lightning-input-field>
       <lightning-button class="slds-m-top_small"
                       type="submit"
                       label="Update record"></lightning-button>
   </lightning-record-edit-form>
</template>

creaton time:-
 
<template>
    <lightning-record-edit-form object-api-name="Account" onsuccess={handleSuccess}>
        <lightning-messages></lightning-messages>
        <div class="slds-m-around_medium">
            <lightning-input-field field-name='Id' value={accountId}></lightning-input-field>
            <lightning-input-field field-name='Name'></lightning-input-field>
            <div class="slds-m-top_medium">
                <lightning-button variant="brand" type="submit" name="save" label="Create Account">
                </lightning-button>
           </div>
       </div>
    </lightning-record-edit-form>
</template>

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh 
Ken Koellner 7Ken Koellner 7

The prior answer repeats what I posted in my follow up.  I see in the manual an emample of how to code a create and an edit and I posted that above.  

What I'm trying to find it is if there's a way to combine them and have one set up tags do both.  Otherwise, suppose I have a page with 50 entry fields.  I'd have to code that same list of fields twice, once within the edit tag and once within the create tag.

 

 

Ken Koellner 7Ken Koellner 7
I think that this blog has the answer -- https://blog.salesforcecasts.com/using-lightning-record-edit-from-in-lwc/

It states "In the below code if I don't provide `record-id` then I can use the same tag to create a new record. If recordId is provided then we can update the record."
This was selected as the best answer