gefvert.org

Salesforce Lightning Data Services

2020-09-24

Read or Modify Data with Record Form Base Components

accountCreator.html: (No recordId means "edit" mode and "create" record on submit.)

<template>
    <lightning-card>
        <lightning-record-form
            object-api-name={objectApiName}
            fields={fields}
            onsuccess={handleSuccess}>
        </lightning-record-form>
    </lightning-card>
</template>

accountCreator.js:

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

// Binding in this way assures referential integrity and keeps fields from being deleted
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';

export default class AccountCreator extends LightningElement {
    objectApiName = ACCOUNT_OBJECT;
    fields = [NAME_FIELD, REVENUE_FIELD, INDUSTRY_FIELD];
    handleSuccess(event) {
        const toastEvent = new ShowToastEvent({
            title: "Account created",
            message: "Record ID: " + event.detail.id,
            variant: "success"
        });
        this.dispatchEvent(toastEvent);
    }
}

Read Data with Lightning Data Services (LDS) Wire Adapters

Decorating a property - wireGetRecordProperty.js:

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';  // Import getRecord wire adapter

import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';  // Import reference

export default class WireGetRecordProperty extends LightningElement {
    @api recordId;
    
    // Populate automatically by selecting what wire adapter to use (getRecord)
    // and the parameters it needs (recordId and fields to fetch).
    // By using $recordId, we make it reactive.
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    account;
}

Decorating a function - wireGetRecordFunction.js:

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

import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';

export default class WireGetRecord extends LightningElement {
    @api recordId;
    data;
    error;
    
    // Iterate over data each time records change.
    // An object is provisioned with two properties, data and error, which
    // we deconstruct using ES6 deconstructors. Can be called multiple times,
    // hence resetting properties to undefined so state is not carried over.
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    wiredAccount({data, error}) {
        console.log('Execute logic each time a new value is provisioned');
        if (data) {
            this.data = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.data = undefined;
        }
    }
}

Modifying Data with LDS Functions - IdsCreateRecord.js:

import { LightningElement} from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';  // Data modification function from LDS

import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';

export default class LdsCreateRecord extends LightningElement {
    handleButtonClick() {
        // Initialize a new data object, an account called "ACME"
        const recordInput = {
            apiName: ACCOUNT_OBJECT.objectApiName,
            fields: {
                [ACCOUNT_NAME_FIELD.fieldApiName] : 'ACME'
            }
        };
        
        createRecord(recordInput)
            .then(account => {
                // code to execute if create operation is successful
            })
            .catch(error => {
                // code to execute if create operation is not successful
            });
    }
}