为 Outlook 和 Gmail 集成创建组件

创建 Lightning App Builder 中提供的自定义 Lightning Web 组件，以添加到 Outlook 和 Gmail 集成的电子邮件应用程序窗格中。

在组件的配置文件中，添加目标并设置为 。lightning__Inbox<isExposed>true

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <isExposed>true</isExposed>
    <apiVersion>46.0</apiVersion>
    <targets>
        <target>lightning__Inbox</target>
    </targets>
    <description>Sample Email Application Pane</description>
</LightningComponentBundle>

目标将属性添加到组件中。在组件的 JavaScript 文件中声明属性。此示例声明它在模板中使用的三个属性。lightning__Inbox

// sampleEmailAppPane.js

import { LightningElement, api } from "lwc";

export default class SampleEmailAppPane extends LightningElement {
  @api messageBody;
  @api subject;
  @api people;
}

访问组件模板中的属性。

<!-- sampleEmailAppPane.html -->

<template>
  <div>Sample Email Application Pane</div>

  <template for:each={people.from} for:item="from">
    <div key={from.email}>{from.email}</div>
  </template>

  <template for:each={people.to} for:item="to">
    <div key={to.email}>{to.email}</div>
  </template>

  <div>{subject}</div>

  <div>{messageBody}</div>
</template>

注意

通常，要允许用户在 Lightning App Builder 中设置组件的属性，您必须将该属性添加到组件的配置文件中。但是，除非要设置其默认值，否则无需向组件的配置文件添加属性。lightning__Inbox

日期

数据类型：对象

事件的日期。

dates: {
  start: 'value',
  end: 'value'
}

支持的来源：event

电子邮件

数据类型：数组

简单数组中收件人的电子邮件地址。如果您不关心地址是在“收件人”、“发件人”或“抄送”字段中，或者不关心收件人是哪种类型的与会者，请使用此属性。

["abc@salesforce.com", "def@salesforce.com"];

支持的来源： ，emailevent

位置

数据类型：字符串

事件的位置。

支持的来源：event

messageBody（消息正文）

数据类型：字符串

纯文本电子邮件的邮件正文。不保留 HTML 格式。

支持的来源： ，emailevent

模式

数据类型：字符串

访问模式。可能的值：、'view''edit'

支持的来源： ，emailevent

人

数据类型：对象

当前电子邮件或事件中收件人的电子邮件地址。人员属性的形状会根据源属性的值而变化。当该属性设置为 时，对象将包含这些元素。sourceemailpeople

{
  to: [
    {
      name: 'name',
      email: 'email'
    }
  ],
  cc: [
    {
      name: 'name',
      email: 'email'
    }
  ],
  from: [
    {
      name: 'senderName',
      email: 'senderEmail'
    }
  ]
}

当该属性设置为 时，对象将包含这些元素。sourceeventpeople

{
  requiredAttendees: [
    {
      name: 'attendeeName',
      email: 'email'
    }
  ],
  optionalAttendees: [
    {
      name: 'optAttendeeName',
      email: 'email'
    }
  ],
  organizer: [
    {
      name: 'organizerName',
      email: 'senderEmail'
    }
  ]
}

支持的来源： ，emailevent

源

数据类型：字符串

可能的值：、'email''event'

支持的来源： ，emailevent

主题

对象类型：字符串

电子邮件的主题。

支持的来源： ，emailevent

注意

若要确保自定义组件在电子邮件应用程序窗格中正确显示，请使其能够调整为可变宽度。请参阅使组件具有宽度感知能力。