Create Components for the Outlook and Gmail Integrations

Create custom Lightning web components that are available in Lightning App Builder to add to email application panes for the Outlook and Gmail integrations.

In the component’s configuration file, add the lightning__Inbox target and set <isExposed> to 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>

The lightning__Inbox target adds properties to your component. Declare the properties in the component’s JavaScript file. This example declares the three properties that it uses in the template.

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 = { from: [], to: [] }; // Empty defaults prevent for:each errors before data loads
9}

Access the properties in the component’s template.

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>

Usually, to allow users to set a component’s property in Lightning App Builder, you must add the property to the component’s configuration file. However, you don’t need to add a lightning__Inbox property to the component’s configuration file unless you want to set its default value.

Note

dates

Data Type: Object

The event’s date.

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

Supported Source: event

emails

Data Type: Array

The email addresses of the recipients in a simple array. Use this property if you don’t care whether the address is in the To, From, or CC field, or what kind of an attendee the addressee is.

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

Supported Source: email, event

location

Data Type: String

The location of the event.

Supported Source: event

messageBody

Data Type: String

The message body of the email in plain text. HTML formatting isn’t preserved.

Supported Source: email, event

mode

Data Type: String

The access mode. Possible values: 'view', 'edit'

Supported Source: email, event

people

Data Type: Object

The recipients’ email addresses on the current email or event. The shape of the people attribute changes according to the value of the source attribute. When the source attribute is set to email, the people object contains these elements.

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}

When the source attribute is set to event, the people object contains these elements.

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    name: 'organizerName',
16    email: 'senderEmail'
17  }
18}

Supported Source: email, event

source

Data Type: String

Possible values: 'email','event'

Supported Source: email, event

subject

Object Type: String

The subject of the email.

Supported Source: email, event

To ensure that a custom component appears correctly in an email application pane, enable it to adjust to variable widths. See Make a Component Width-Aware.

Note

See Also