Lightning Web Components Workshop

Exercise 6Using lightning-record-form

Objectives

Use lightning-record-form to view and update a record
Understand field-level integrity

Step 1 - Create a Broker Card

Create a new Lightning Web Component with the name brokerCard.

Add the following markup to the component template:

 <lightning-card title={cardTitle}
                 icon-name="custom:custom85">
     <div class="slds-m-around_medium">

     </div>
 </lightning-card>

Save the file.
In brokerCard.js, add api, track, wire to the imports from lwc.

Import getRecord and add a constant fields before the class declaration:

 import { getRecord } from 'lightning/uiRecordApi';
 import { ShowToastEvent } from 'lightning/platformShowToastEvent';
	
 const fields = [
     'Property__c.Name',
     'Property__c.Broker__c'
 ]

Add the following to the BrokerCard class:

 @api recordId;
 @track property;
 @track cardTitle;
 @track brokerId;
	
 @wire(getRecord, { recordId: '$recordId', fields })
 wiredProperty(value) {
     if (value.data) {
         this.property = value.data;
         this.cardTitle = 'Broker for ' + this.property.fields.Name.value;
         this.brokerId = this.property.fields.Broker__c.value;
     } else if (value.error) {
         console.log("ERROR: ", value.error)
     }
 }	
	
 fireToast() {
     const evt = new ShowToastEvent({
         title: "Success!",
         message: "The Broker's record has been successfully saved.",
         variant: "success",
     });
     this.dispatchEvent(evt);
 }

Save the file.

Update the contents of the LightningComponentBundle in brokerCard.js-meta.xml:

<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Broker Card</masterLabel>
<description>This component shows the Broker info for a Property.</description>
<targets>
    <target>lightning__RecordPage</target>
</targets>
<targetConfigs>
    <targetConfig targets="lightning__RecordPage">
        <objects>
            <object>Property__c</object>
        </objects>
    </targetConfig>
</targetConfigs>

Save the file.
Right-click on the brokerCard folder in VS Code’s File Explorer and choose New File.
Name the file brokerCard.svg.

Paste the following into the file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#f26891"/>
        <path fill="#fff" d="m80 71.2v2.8c0 3.3-2.7 6-6 6h-48c-3.3 0-6-2.7-6-6v-2.8c0-7.3 8.5-11.7 16.5-15.2 0.3-0.1 0.5-0.2 0.8-0.4 0.6-0.3 1.3-0.3 1.9 0.1 3.2 2.1 6.9 3.3 10.8 3.3 3.9 0 7.6-1.2 10.8-3.2 0.6-0.4 1.3-0.4 1.9-0.1 0.3 0.1 0.5 0.2 0.8 0.4 8 3.4 16.5 7.8 16.5 15.1z"></path><ellipse fill="#fff" cx="50" cy="36.5" rx="14.9" ry="16.5"></ellipse>
    </g>
</svg>

Save the file, then push to your scratch org.
Click on the Setup icon in the upper righthand corner of the Property Detail page and choose Edit Page.
Add the brokerCard component to the righthand column above the Similar Properties component.
Click the Save button, and then click the Back link to return to the Property Record page.

Step 2 - Add a lightning-record-form

In the Developer Console, add the following code to the BrokerCard component on line 12:

 <lightning-record-form record-id={brokerId}
                        object-api-name="Broker__c"
                        layout-type="Full"
                        onsuccess={fireToast}></lightning-record-form>

Save the component, then push to your scratch org.
Refresh the Property Record page.

Step 3 - Change the recordForm mode

Add the following attribute to the lightning-record-form:
```
 mode="View"
```
Save the file, push to your scratch org, and refresh the Property Record page.
Click any field to edit it, then click Save.

Step 4 - Change the layout of the form

Change the layoutType of the recordForm to Compact.
Save the file, push to your scratch org, and refresh the Property Record page.

Step 5 - Limit the fields to display

Add the following property in brokerCard.js:

 @track brokerFields = ['Name', 'Title__c', 'Phone__c', 'Mobile_Phone__c','Email__c'];

Remove layoutType="Compact" from the lightning-record-form.
Add the following to the lightning-record-form:
```
 fields={brokerFields}
 columns="2"
```
Save the file, push to your scratch org, and refresh the Property Record page.

Step 6 - Ensure Referential Integrity

Add the following imports to brokerCard.js:

 import NAME_FIELD from '@salesforce/schema/Broker__c.Name';
 import TITLE_FIELD from '@salesforce/schema/Broker__c.Title__c';
 import PHONE_FIELD from '@salesforce/schema/Broker__c.Phone__c';
 import MOBILE_FIELD from '@salesforce/schema/Broker__c.Mobile_Phone__c';
 import EMAIL_FIELD from '@salesforce/schema/Broker__c.Email__c';

Update brokerFields to:

 @track brokerFields = [NAME_FIELD, TITLE_FIELD, PHONE_FIELD, MOBILE_FIELD, EMAIL_FIELD];

Save the file, push to your scratch org, and refresh the Property Record page.

Nothing has changed, but now, the LWC framework will ensure that those fields cannot be deleted because they are in use by the component. Additionally, the framework cascades any renamed objects and fields into your component’s source code.

My component isn’t working! Check your code against the following:

brokerCard.html

<template>
    <lightning-card title={cardTitle}
                    icon-name="custom:custom85">
        <div class="slds-m-around_medium">
            <lightning-record-form record-id={brokerId}
                                   object-api-name="Broker__c"
                                   mode="View"
                                   fields={brokerFields}
                                   columns="2"
                                   onsuccess={fireToast}></lightning-record-form>
        </div>
    </lightning-card>
</template>

brokerCard.js

import { LightningElement, api, track, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import NAME_FIELD from '@salesforce/schema/Broker__c.Name';
import TITLE_FIELD from '@salesforce/schema/Broker__c.Title__c';
import PHONE_FIELD from '@salesforce/schema/Broker__c.Phone__c';
import MOBILE_FIELD from '@salesforce/schema/Broker__c.Mobile_Phone__c';
import EMAIL_FIELD from '@salesforce/schema/Broker__c.Email__c';

const fields = [
    'Property__c.Name',
    'Property__c.Broker__c'
]

export default class BrokerCard extends LightningElement {
    @api recordId;
    @track property;
    @track cardTitle;
    @track brokerId;
    @track brokerFields = [NAME_FIELD, TITLE_FIELD, PHONE_FIELD, MOBILE_FIELD, EMAIL_FIELD];

    @wire(getRecord, { recordId: '$recordId', fields })
    wiredProperty(value) {
        if (value.data) {
            this.property = value.data;
            this.cardTitle = 'Broker for ' + this.property.fields.Name.value;
            this.brokerId = this.property.fields.Broker__c.value;
        } else if (value.error) {
            console.log("ERROR: ", value.error)
        }
    } 
    
    fireToast() {
        const evt = new ShowToastEvent({
            title: "Success!",
            message: "The Broker's record has been successfully saved.",
            variant: "success",
        });
        this.dispatchEvent(evt);
    }
}

brokerCard.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="brokerCard">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Broker Card</masterLabel>
    <description>This component shows the Broker info for a Property.</description>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Property__c</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Previous Next

exercises

Next Steps