如何使用 lightning 组件在单击按钮时显示与帐户相关的联系人 - TypeScript

在 Salesforce 中，我们可以使用 lightning 组件来轻松地在单击按钮时显示与帐户相关的联系人。下面是一个简单的 TypeScript 代码示例，介绍了如何使用 lightning 组件来实现此目标。

步骤 1 - 创建 Lightning 组件

首先，我们需要创建一个 Lightning 组件，该组件将在单击按钮时显示帐户相关的联系人。以下是组件代码：

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import { getListUi } from 'lightning/uiListApi';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
import CONTACT_ACCOUNT_FIELD from '@salesforce/schema/Contact.AccountId';
import ACCOUNT_RELATIONSHIP_FIELD from '@salesforce/schema/Account.Relationship__c';

export default class AccountRelatedContacts extends LightningElement {
    @api recordId;
    contacts;
    error;

    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_RELATIONSHIP_FIELD] })
    account;

    @wire(getListUi, { objectApiName: CONTACT_OBJECT, relatedApiName: CONTACT_ACCOUNT_FIELD, fields: ['Contact.Name', 'Contact.Email'], orderBy: 'Contact.Name', pageSize: 10 })
    wiredContacts({ error, data }) {
        if (data) {
            this.contacts = data.records.records;
        } else if (error) {
            this.error = error;
        }
    }
}

这个组件使用 getRecord 和 getListUi API 来获取帐户相关的联系人。它还使用 @wire 装饰器来创建了两个绑定式函数，getRecord 和 getListUi。绑定式函数将在组件首次渲染后自动调用，并在所需的数据准备就绪时将其提供给组件。

步骤 2 - 创建 Lightning 应用程序

现在，我们需要创建一个 Lightning 应用程序来放置组件。以下是应用程序代码：

<template>
    <lightning-card title="Related Contacts">
        <template if:true={contacts}>
            <ul>
                <template for:each={contacts} for:item="contact">
                    <li key={contact.id}>
                        {contact.fields.Name.value} ({contact.fields.Email.value})
                    </li>
                </template>
            </ul>
        </template>
        <template if:true={error}>
            {error.body.message}
        </template>
    </lightning-card>
</template>

import { LightningElement, api } from 'lwc';
import AccountRelatedContacts from 'c/accountRelatedContacts';

export default class RelatedContactsApp extends LightningElement {
    @api recordId;

    get accountRelatedContacts() {
        return AccountRelatedContacts;
    }
}

这个应用程序包含一个 lightning-card 组件，用于显示联系人列表。它还包含一个用于渲染组件的 get accountRelatedContacts 计算属性。我们现在可以在 Salesforce 页面上使用这个应用程序和组件。

步骤 3 - 在页面上添加自定义按钮

最后，我们需要在 Salesforce 页面上添加自定义按钮，以便在单击按钮时显示与帐户相关的联系人。以下是页面布局代码：

{!REQUIRESCRIPT('/lightning/lightning.out.js')}
<div id="app"></div>
<script>
    $Lightning.use("c:RelatedContactsApp", function() {
        $Lightning.createComponent("c:AccountRelatedContacts", {"recordId": "{!Account.Id}"}, "app");
    });
</script>

这段代码将在 Salesforce 页面上创建一个 div 容器，并使用 createComponent 函数将我们的组件添加到应用程序中。我们还需要将组件的 recordId 属性设置为当前帐户的 Id。现在，当用户单击自定义按钮时，将在页面上显示与帐户相关的联系人。

结论

在本文中，我们介绍了如何使用 TypeScript 和 Lightning 组件来在 Salesforce 中实现在单击按钮时显示与帐户相关的联系人的功能。我们创建了一个 Lightning 组件和一个 Lightning 应用程序，并在页面上添加了一个自定义按钮，使用户能够轻松地查看与当前帐户相关的联系人。