📜  lwc 获取记录数据 api (1)

📅  最后修改于: 2023-12-03 15:32:46.326000             🧑  作者: Mango

使用 LWC 获取记录数据 API

在 Salesforce 平台上,LWC(Lightning Web Components)是一种用于构建现代 Web 应用程序的框架。LWC 可以让开发人员更轻松地使用 Apex、SOQL 和其他 Salesforce 平台服务来开发 Web 应用程序。本文将介绍如何使用 LWC 中的 JavaScript 代码以及 Salesforce 中的 Apex 类来获取记录信息。

需求

在开始介绍如何使用 LWC 获取记录数据 API 之前,我们需要先明确需求。我们需要创建一个 LWC 组件,能够通过引用记录 ID 获取该记录的详细信息。这个需求可以通过使用 Salesforce REST API 来完成。

步骤 1: 创建 LWC 组件

在 Salesforce 系统中,创建 LWC 组件需要指定组件名称、描述以及所在的命名空间和其他选项。我们将创建一个名为 'getRecordInfo' 的 LWC 组件。以下是组件的代码片段:

<template>
    <lightning-card title="Record Information">
        <div class="slds-m-around_medium">
            <template if:true={record.fields.Name.value}>
                <div>Name: {record.fields.Name.value}</div>
            </template>
            <template if:true={record.fields.Phone.value}>
                <div>Phone: {record.fields.Phone.value}</div>
            </template>
        </div>
    </lightning-card>
</template>
import { LightningElement, wire, api } from 'lwc';
import getRecord from '@salesforce/apex/RecordController.getRecord';

export default class GetRecordInfo extends LightningElement {
    @api recordId;

    @wire(getRecord, { recordId: '$recordId' })
    record;
}

上述代码使用 LightningElement 类来定义组件,该类是 LWC 的基类。我们还导入了 wireapi 修饰符来引用 getRecord 函数和组件的公共 recordId 属性。wire 修饰符使我们能够轻松访问处理 SOQL 查询后返回的数据。

步骤 2: 创建 Apex 类来获取记录数据

接下来,创建一个 Apex 类来处理 LWC 组件提交的请求并返回记录详细信息。以下是 Apex 类的代码片段:

public with sharing class RecordController {
    @AuraEnabled(cacheable=true)
    public static Account getRecord(String recordId) {
        return [
            SELECT Name, Phone
            FROM Account
            WHERE Id = :recordId
        ];
    }
}

上述代码定义了一个名为 RecordController 的 Apex 类。类中的 getRecord 方法接受 LWC 组件提交的 recordId 参数,然后查询与该 ID 关联的记录。查询结果被包装并返回给 LWC 组件。

步骤 3: 验证和使用 LWC 组件

现在,我们可以将 getRecordInfo 组件添加到 Salesforce 页面并测试其功能。我们可以通过使用以下代码片段将组件添加到页面:

<template>
    <lightning-card title="Get Record Information">
        <div class="slds-m-around_medium">
            <lightning-input type="text" label="Record Id" value={recordId} onchange={handleInputChange}></lightning-input>
            <div class="slds-m-top_medium">
                <c-get-record-info record-id={recordId}></c-get-record-info>
            </div>
        </div>
    </lightning-card>
</template>

<script>
import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
    @track recordId;

    handleInputChange(event) {
        this.recordId = event.target.value;
    }
}
</script>

上述代码中,我们将 getRecordInfo 组件嵌套在另一个 LWC 组件中,这个组件可以在页面上直接进行交互。我们使用 lightning-input 元素来接受用户输入的记录 ID,并将其传递给 getRecordInfo 组件。在接收到记录 ID 后,getRecordInfo 组件将使用 Apex 类从 Salesforce 对象中检索记录详细信息,然后在页面上显示这些信息。

结论

使用 LWC 获取记录数据 API 是构建现代 Web 应用程序的重要部分。这可以让 Salesforce 开发人员轻松地构建用于展示记录数据的应用程序。我们在本文中演示了如何创建 LWC 组件,使用 Apex 类来访问 Salesforce 记录数据,以及在页面上渲染数据。如果您对 LWC 开发有兴趣,请确保深入了解该技术以获取更多详细信息。