Lightning Web Components Workshop

Exercise 4Editing Data with Record-Edit-Form

Objectives

Use recordEditForm to create a custom form to update a record
Understand conditional rendering
Fire a toast message

Step 1 - Create a recordEditForm

Switch back to similarProperty.html.

Add the following code after the closing </lightning-record-view-form> tag:

 <lightning-record-edit-form object-api-name="Property__c"
                           record-id={item.Id}
                           onsuccess={handleSuccess}
                           onerror={handleError}>
     <lightning-layout multiple-rows>
       <lightning-layout-item size="6">
         <lightning-input-field field-name="Price__c"></lightning-input-field>
       </lightning-layout-item>
       <lightning-layout-item size="6">
         <lightning-input-field field-name="Beds__c"></lightning-input-field>
       </lightning-layout-item>
       <lightning-layout-item size="6">
         <lightning-input-field field-name="Baths__c"></lightning-input-field>
       </lightning-layout-item>
       <lightning-layout-item size="6">
         <lightning-input-field field-name="Status__c"></lightning-input-field>
       </lightning-layout-item>
       <lightning-layout-item size="12">
         <lightning-input-field field-name="Broker__c"></lightning-input-field>
       </lightning-layout-item>
       <lightning-layout-item size="12">
         <div class="slds-m-top_large slds-grid slds-grid_align-center">
           <lightning-button variant="neutral"
                             label="Cancel"
                             title="Cancel"
                             type="text"
                             onclick={handleCancel}
                             class="slds-m-right_small"></lightning-button>
           <lightning-button variant="brand"
                             label="Submit"
                             title="Submit"
                             type="submit"></lightning-button>
         </div>
       </lightning-layout-item>
     </lightning-layout>
 </lightning-record-edit-form>	

Wrap the <lightning-record-view-form> with a template: <template if:false={editMode}>.
Wrap the <lightning-button-icon> with a template: <template if:false={editMode}>.
Wrap the <lightning-record-edit-form> with a template: <template if:true={editMode}>.
Save the file.

Step 2 - Toggle the Form

Switch to similarProperty.js.
Add track to the imports from lwc.
Add @track editMode = false; to the SimilarProperty class.
Replace the contents of the editRecord method with:
```
 this.editMode = true;
```
Save the file, and push to your scratch org.
Refresh the Property Detail page.
Click the Edit icon on a Similar Property. Notice that the forms switch.
Click the Cancel button and notice that nothing happens.

Step 3 - Handle Success and Cancel

Add the following import to similarProperty.js:

 import { ShowToastEvent } from 'lightning/platformShowToastEvent';

Add the following to the SimilarProperty class:

 handleSuccess() {
     const evt = new ShowToastEvent({
         title: "Success!",
         message: "The record has been successfully saved.",
         variant: "success",
     });
     this.dispatchEvent(evt);
     this.editMode = false;
 }
	
 handleError() {
     const evt = new ShowToastEvent({
         title: "Error!",
         message: "An error occurred while attempting to save the record.",
         variant: "error",
     });
     this.dispatchEvent(evt);
     this.editMode = false;
 }
	
 handleCancel(event) {
     this.editMode = false;
     event.preventDefault();
 }

Save the file, and push to your scratch org.
Refresh the Property Record page, then click the Edit icon for a property.
Edit one of the items, and click Save.
Repeat and click Cancel.

Oops, I might need some help! You can check your code against the following:

similarProperty.html

<template>
    <div class="slds-media">
        <div class="slds-media__figure">
            <img src={item.Thumbnail__c} class="slds-avatar_large slds-avatar_circle" alt={item.Title_c} />
            </div>
            <div class="slds-media__body">
                <div class="slds-grid slds-hint-parent">
                    <a onclick={navigateToRecord}>
                        <h3 class="slds-text-heading_small slds-m-bottom_xx-small">{item.Name}</h3>
                    </a>
                    <template if:false={editMode}>
                        <lightning-button-icon icon-name="utility:edit"
                                               class="slds-col_bump-left"
                                               icon-class="slds-button__icon_hint"
                                               variant="bare"
                                               alternative-text="Edit Record"
                                               onclick={editRecord}></lightning-button-icon>
                    </template>
                </div>
                <template if:false={editMode}>
                    <lightning-record-view-form object-api-name="Property__c"
                                                record-id={item.Id}>
                        <lightning-layout multiple-rows>
                            <lightning-layout-item size="6">
                                <lightning-output-field field-name="Price__c"></lightning-output-field>
                            </lightning-layout-item>
                            <lightning-layout-item size="6">
                                <lightning-output-field field-name="Beds__c"></lightning-output-field>
                            </lightning-layout-item>
                            <lightning-layout-item size="6">
                                <lightning-output-field field-name="Baths__c"></lightning-output-field>
                            </lightning-layout-item>
                            <lightning-layout-item size="6">
                                <lightning-output-field field-name="Status__c"></lightning-output-field>
                            </lightning-layout-item>
                            <lightning-layout-item size="12">
                                <lightning-output-field field-name="Broker__c"></lightning-output-field>
                            </lightning-layout-item>
                        </lightning-layout>
                    </lightning-record-view-form>
                </template>
                <template if:true={editMode}>
                    <lightning-record-edit-form object-api-name="Property__c"
                                                record-id={item.Id}
                                                onsuccess={handleSuccess}
                                                onerror={handleError}>
                        <lightning-layout multiple-rows>
                            <lightning-layout-item size="6">
                                <lightning-input-field field-name="Price__c"></lightning-input-field>
                            </lightning-layout-item>
                            <lightning-layout-item size="6">
                                <lightning-input-field field-name="Beds__c"></lightning-input-field>
                            </lightning-layout-item>
                            <lightning-layout-item size="6">
                                <lightning-input-field field-name="Baths__c"></lightning-input-field>
                            </lightning-layout-item>
                            <lightning-layout-item size="6">
                                <lightning-input-field field-name="Status__c"></lightning-input-field>
                            </lightning-layout-item>
                            <lightning-layout-item size="12">
                                <lightning-input-field field-name="Broker__c"></lightning-input-field>
                            </lightning-layout-item>
                            <lightning-layout-item size="12">
                                <div class="slds-m-top_large slds-grid slds-grid_align-center">
                                    <lightning-button variant="neutral"
                                                      label="Cancel"
                                                      title="Cancel"
                                                      type="text"
                                                      onclick={handleCancel}
                                                      class="slds-m-right_small"></lightning-button>
                                    <lightning-button variant="brand"
                                                      label="Submit"
                                                      title="Submit"
                                                      type="submit"></lightning-button>
                                </div>
                            </lightning-layout-item>
                        </lightning-layout>
                    </lightning-record-edit-form>
                </template>
            </div>
        </div>
</template>

similarProperty.js

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

export default class SimilarProperty extends NavigationMixin(LightningElement) {
    @api item;
    @track editMode = false;

    @wire(CurrentPageReference) pageRef;

    navigateToRecord() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.item.Id,
                objectApiName: 'Property__c',
                actionName: 'view',
            },
        });
    }

    editRecord() {
        this.editMode = true;
    }

    handleSuccess() {
        const evt = new ShowToastEvent({
            title: "Success!",
            message: "The record has been successfully saved.",
            variant: "success",
        });
        this.dispatchEvent(evt);
        this.editMode = false;
    }

    handleError() {
        const evt = new ShowToastEvent({
            title: "Error!",
            message: "An error occurred while attempting to save the record.",
            variant: "error",
        });
        this.dispatchEvent(evt);
        this.editMode = false;
    }

    handleCancel(event) {
        this.editMode = false;
        event.preventDefault();
    }
}

Previous Next

exercises

Next Steps