Lightning Web Component 和 Salesforce 数据操作示例

2021-01-29 06:15

阅读:454

标签:xxxxx   service   直接   har   title   代码   字符   假设   enable   

使用 Salesforce 数据的途径

在 Lightning Web Component 中使用 Salesforce 数据有以下几种途径:

  • 使用 lightning-record-form 系列预定义组件,直接读取和操作数据
  • 使用 @wire 注解来绑定数据

上面两者都使用了 Lightning Data Service 来缓存数据,提高组件的运行效率。如果数据有了更改,也会在组件中及时更新数据。

lightning-record-form 示例

lightning-record-form 是预定义的组件,可以绑定到某一条记录。

它有几种模式,通过 mode 属性来定义:

  • view:显示数据,具有 inline 的编辑功能
  • edit:直接显示数据编辑界面
  • readonly:只能显示数据,无法编辑

代码示例:

HTML 文件:

JavaScript 文件:

@api accountId;

注意:如果不提供 record-id 属性值,则它会自动变为新建记录的界面。

也可以在 JavaScript 文件中引用对象和字段的定义,比如:

HTML 文件:

JavaScript 文件:

import { LightningElement } from ‘lwc‘;
import ACCOUNT_OBJECT from ‘@salesforce/schema/Account‘;
import NAME_FIELD from ‘@salesforce/schema/Account.Name‘;
import PHONE_FIELD from ‘@salesforce/schema/Account.Phone‘;

export default class exampleCmp extends LightningElement {
    accountId = ‘xxxxxx‘;

    objectApiName = ACCOUNT_OBJECT;

    fields = [NAME_FIELD, PHONE_FIELD];
}

使用 field 相关预定义组件

lightning-record-view-form 组件和 lightning-output-field 组件结合可以显示记录信息,比如:

lightning-record-edit-form 组件和 lightning-input-field 等组件结合可以编辑记录信息,比如:

@wire 注解示例

下面的示例将使用 @wire 来绑定 Apex 函数,进行 Account 的查询。

这里假设我们已经有了一个 Apex 类 AccountController,其中有函数 getAccounts(),接收一个字符串并返回 Account 列表信息。

public with sharing class AccountController {
    // 必须要有 @AuraEnabled(cacheable=true) 注解
    @AuraEnabled(cacheable=true)
    public static List getAccounts(String searchText) {
        return [SELECT Id, Name, Phone FROM Account WHERE Name LIKE :searchText + ‘%‘ LIMIT 10];
    }
}

HTML 文件:

JavaScript 文件:

import { LightningElement, wire, api } from ‘lwc‘;
import getAccounts from ‘@salesforce/apex/AccountController.getAccounts‘;

export default class AccountListLwc extends LightningElement {
    @api searchText;

    objectApiName = ‘Account‘;
    fieldsToDisplay = [‘Name‘, ‘Phone‘];

    // 在 HTML 文件中使用 records.data 来得到 Account 列表
    @wire(getAccounts, { searchText: ‘$searchText‘ }) 
    records;

    handleSearch(event) {
        this.searchText = event.target.value;
    }
}

Lightning Web Component 和 Salesforce 数据操作示例

标签:xxxxx   service   直接   har   title   代码   字符   假设   enable   

原文地址:https://www.cnblogs.com/chengcheng0148/p/lwc_sf_data_intro.html


评论


亲,登录后才可以留言!