Use Lightning Data Service to Work with Data

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

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
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);
    }
}

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class WireGetRecordProperty extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    account;
    get name() {
        return getFieldValue(this.account.data, ACCOUNT_NAME_FIELD);
    }
}

<template>
  Account Name: {name}
</template>

wireGetRecordProperty is an example of decorating a property. We can decorate a function in the same way. This is useful when you want to execute some logic over the returned records. Here’s the previous example (wireGetRecordProperty), reworked to wire a function (wiredAccount) instead of a property.

wireGetRecordFunction.js

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class WireGetRecord extends LightningElement {
    @api recordId;
    data;
    error;
    @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;
        }
    }
    get name() {
        return getFieldValue(this.data, ACCOUNT_NAME_FIELD);
    }
}

Code highlights:

• Lines 8–9: Instead of decorating a property, we decorate the wiredAccount function. The function receives, as a parameter, an object that has two attributes: data and error. We use object ES6 destructuring to unpack the object attributes.
• Lines 11–17: Because LDS wire adapters provision not a single value, but a stream of values, the wiredAccount function can be invoked multiple times. As a result, a wired function must reset states that it influences. So here, in lines 11–17, if the wire adapter provisions new data, we store the data in the data property and set the error property to undefined. Alternatively, if there is an error, we store the error in the error property and set the data property to undefined.

In this example, we can access the name property the same way we accessed it in the previous example.

Modify Data with LDS Functions

LDS wire adapters are great for reading data, but to create, update, or delete records, you need an LDS function. Note that while wire adapters are invoked by the Lightning Web Components engine, you invoke functions imperatively. LDS functions notify the LDS cache when records are created, updated, or deleted. Consider this example, which uses the createRecord LDS function to create an account record.

ldsCreateRecord.js

import { LightningElement} from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class LdsCreateRecord extends LightningElement {
    handleButtonClick() {
        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
            });
    }
}

Code highlights:

• Line 2: We import the createRecord LDS function.
• Lines 3–4: We import the Account object and the Account.Name field (as we did in the previous examples) to ensure referential integrity.
• Line 6: We define the handleButtonClick method as an event handler. It responds to the event that occurs when a user clicks a lightning-button in the .html file (not shown). When handleButtonClick is invoked, it invokes the createRecord function imperatively.
• Line 10: Our event handler passes a string for the Account.Name field, which the adapter needs to create a new account.
• Line 13: When we invoke an LDS function imperatively, it returns a promise (a JavaScript object that simplifies performing asynchronous calls).
• Lines 14–16: In the then method, we define what happens if the account is created successfully.
• Lines 17–19: In the catch method, we define what happens if the account creation fails.

Note:  LDS functions allow you to work with single records only. Although you can use several functions in the same component (to create two different kinds of records in the same operation, for example), each function runs on its own independent transaction. Therefore, there is no common rollback logic. If you need a combined DML operation to be transactional, consider using Apex.

To learn more about LDS wire adapters and functions, and how to use them, visit the Lightning Web Components Developer Guide and the Salesforce Developers Blog.

Deploy a Lightning Web Component That Creates Accounts

Now that we’ve reviewed different ways to work with Lightning Data Service, let’s work through an example.

Before You Begin

We assume that you have your Salesforce DX development environment set up, and you’re comfortable using it to create Lightning web components and deploy them to an org. If you’re not familiar with this process yet, complete the Quick Start: Lightning Web Components project.

Create a New Trailhead Playground

For this project, you need to create a new Trailhead Playground. Scroll to the bottom of this page, click the down arrow next to Launch, and select Create a Trailhead Playground. It typically takes 3–4 minutes to create a new Trailhead Playground.

Note:  Yes, we really mean a brand-new Trailhead playground! If you use an existing org or playground, you can run into problems completing the challenges.

Get Your Trailhead Playground Username and Password

Go to your Trailhead Playground. (If it’s not already open, scroll to the bottom of this page and click Launch.) If you see a tab in your org labeled Get Your Login Credentials, great! Skip ahead to step 1. 

Otherwise, from the App Launcher (), find and open Playground Starter and follow the steps. If you don’t see the Playground Starter app, check out Find the Username and Password for Your Trailhead Playground on Trailhead Help.

1. Click the Get Your Login Credentials tab and take note of your username.
2. Click Reset My Password. This sends an email to the address associated with your username.
3. Click the link in the email.
4. Enter a new password, confirm it, and click Change Password.

Ready to get hands-on? Let’s go.

In this exercise, you add a Lightning web component to your project and then deploy it to your Trailhead Playground. 

1. Create a new project:
   1. Open Visual Studio Code.
   2. Open the command palette: Click View | Command Palette.
   3. In the command palette, select SFDX: Create Project.
      If you don’t see it in the list, type SFDX: Create Project and then press Enter.
   4. Accept the standard template.
   5. For the project name, enter workingWithDataInLWC and then press Enter.
   6. Select a location for the new project and then click Create Project.
2. Authorize your Trailhead Playground:
   1. In the command palette, select (or enter) SFDX: Authorize an Org.
   2. Select Production: login.salesforce.com and press Enter.
   3. For alias, enter lwc_and_salesforce_data and then press Enter.
   4. Use your Trailhead Playground username and password to log in.
   5. When you are logged in to your Trailhead Playground, leave it open and return to Visual Studio Code.
3. Create a Lightning web component:
   1. In the Explorer pane, right-click the lwc folder and select SFDX: Create Lightning Web Component.
   2. For the component name, enter accountCreator and press Enter.
   3. Press Enter again to accept the default directory.
4. Replace the contents of your accountCreator.html and accountCreator.js files with the code provided in the Read or Modify Data with Record Form Base Components section earlier in this unit.
5. To make this component available on app pages in an org, replace the contents of your accountCreator.js-meta.xml file with this code:
   

   <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
       <apiVersion>48.0</apiVersion>
       <isExposed>true</isExposed>
       <targets>
           <target>lightning__AppPage</target>
       </targets>
   </LightningComponentBundle>

6. Save the three files: accountCreator.html, accountCreator.js, and accountCreator.js-meta.xml.
7. Deploy the project files to your Trailhead Playground. (Right-click the accountCreator folder and select SFDX: Deploy Source to Org.)
8. If your Trailhead Playground isn’t already open, open it. (In the command palette, select (or enter) SFDX: Open Default Org).
9. In your Trailhead Playground, click and then select Setup.
10. In the Quick Find box, enter Lightning App Builder and then select Lightning App Builder.
11. Create a Lightning page:
    1. Click New.
    2. Choose App Page and click Next.
    3. For label, enter Working with Data, and then click Next.
    4. For layout, choose Header and Left Sidebar.
    5. Click Finish.
12. Drag the accountCreator component to the page sidebar.
13. Save the page.
14. Activate the page: Keep the default app name (Working with Data) and click Save.
15. When prompted to add the page to the navigation menu, click Finish.
16. Open the new page: In the App Launcher search, enter work, and then select Working with Data.

That’s it. You have a Lightning web component that uses lightning-record-form to create account records on the Working with Data page. Using Lightning Data Service is one way to work with Salesforce data in Lightning web components. In the next unit, you learn how to use Apex to work with data.

Resources

• Lightning Web Components Developer Guide: Lightning Data Service
• Lightning Web Components Developer Guide: Work with Records Using Base Components
• Lightning Web Components Developer Guide: Use the Wire Service to Get Data
• Blog: Caching and Synchronizing Component Data with Lightning Data Service