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.

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.

Access the properties in the component’s 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.

Data Type: Object

The event’s date.

Supported Source: event

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.

Supported Source: email, event

Data Type: String

The location of the event.

Supported Source: event

Data Type: String

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

Supported Source: email, event

Data Type: String

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

Supported Source: email, event

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.

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

Supported Source: email, event

Data Type: String

Possible values: 'email','event'

Supported Source: email, event

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.

See Also