Outlook および Gmail インテグレーションのコンポーネントの作成

Lightning アプリケーションビルダーで使用できるカスタム Lightning Web コンポーネントを作成し、Outlook および Gmail インテグレーションのメールアプリケーションペインに追加します。

コンポーネントの設定ファイルで、lightning__Inbox 対象を追加し、<isExposed> を true に設定します。

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

対象の lightning__Inbox はコンポーネントにプロパティを追加します。コンポーネントの JavaScript ファイルでプロパティを宣言します。この例では、テンプレートで使用される 3 つのプロパティを宣言します。

1// sampleEmailAppPane.js
2
3import { LightningElement, api } from "lwc";
4
5export default class SampleEmailAppPane extends LightningElement {
6  @api messageBody;
7  @api subject;
8  @api people;
9}

コンポーネントのテンプレートのプロパティにアクセスします。

1<!-- sampleEmailAppPane.html -->
2
3<template>
4  <div>Sample Email Application Pane</div>
5
6  <template for:each={people.from} for:item="from">
7    <div key={from.email}>{from.email}</div>
8  </template>
9
10  <template for:each={people.to} for:item="to">
11    <div key={to.email}>{to.email}</div>
12  </template>
13
14  <div>{subject}</div>
15
16  <div>{messageBody}</div>
17</template>

通常、Lightning アプリケーションビルダーでユーザがコンポーネントのプロパティを設定できるようにするには、コンポーネントの設定ファイルにプロパティを追加する必要があります。ただし、デフォルト値を設定するのではない限り、コンポーネントの設定ファイルに lightning__Inbox プロパティを追加する必要はありません。

Note

dates

データ型: Object

行動の日付。

1dates: {
2  start: 'value',
3  end: 'value'
4}

サポートされているソース: event

emails

データ型: Array

受信者のメールアドレスの単純な配列。アドレスが [宛先]、[差出人]、[CC] 項目のどれに入力されるのか、または受信者がどのような被招集者なのかを考慮しない場合は、このプロパティを使用します。

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

サポートされているソース: email、event

location

データ型: String

行動の場所。

サポートされているソース: event

messageBody

データ型: String

メールのメッセージ本文 (プレーンテキスト)。HTML 書式設定は保持されません。

サポートされているソース: email、event

mode

データ型: String

アクセスモード。可能な値: 'view'、'edit'

サポートされているソース: email、event

people

データ型: Object

現在のメールまたは行動の受信者のメールアドレス。people 属性の形状は、source 属性の値によって変化します。source 属性が email に設定されている場合は、people オブジェクトに次の要素が含まれます。

1{
2  to: [
3    {
4      name: 'name',
5      email: 'email'
6    }
7  ],
8  cc: [
9    {
10      name: 'name',
11      email: 'email'
12    }
13  ],
14  from: [
15    {
16      name: 'senderName',
17      email: 'senderEmail'
18    }
19  ]
20}

source 属性が event に設定されている場合は、people オブジェクトに次の要素が含まれます。

1{
2  requiredAttendees: [
3    {
4      name: 'attendeeName',
5      email: 'email'
6    }
7  ],
8  optionalAttendees: [
9    {
10      name: 'optAttendeeName',
11      email: 'email'
12    }
13  ],
14  organizer: [
15    {
16      name: 'organizerName',
17      email: 'senderEmail'
18    }
19  ]
20}

サポートされているソース: email、event

source

データ型: String

可能な値: 'email'、'event'

サポートされているソース: email、event

subject

オブジェクト種別: String

メールの件名。

サポートされているソース: email、event

カスタムコンポーネントをメールアプリケーションペインに正しく表示するには、可変幅に合わせてカスタムコンポーネントを調整できるようにします。「コンポーネントでの幅の認識」を参照してください。

Note

関連トピック

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。