Create Components for Lightning for Outlook and Lightning for Gmail

Create custom Lightning components that are available for drag-and-drop in the Email Application Pane for Lightning for Outlook and Lightning for Gmail.

To add a component to email application panes in Lightning for Outlook or Lightning for Gmail, implement the clients:availableForMailAppAppPage interface.

To allow the component access to email or calendar events, implement the clients:hasItemContext interface.

The clients:hasItemContext interface adds attributes to your component that it can use to implement record- or context-specific logic. The attributes included are:

The source attribute, which indicates the email or appointment source. Possible values include email and event.
1<aura:attribute name="source" type="String" />
The mode attribute, which indicates viewing or composing an email or event. Possible values include view and edit.
1<aura:attribute name="mode" type="String" />

The people attribute indicates recipients’ email addresses on the current email or appointment.

1<aura:attribute name="people" type="Object" />

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 the following elements.

1{
2    to: [ { name: nameString, email: emailString }, ... ],
3    cc: [ ... ],
4    from: [ { name: senderName, email: senderEmail } ],
5}

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

1{
2    requiredAttendees: [ { name: attendeenameString, email: emailString }, ... ],
3    optionalAttendees: [ { name: optattendeenameString, email: emailString }, ... ],
4    organizer: [ { name: organizerName, email: senderEmail } ],
5}

The subject indicates the subject on the current email.
1<aura:attribute name="subject" type="String" />
The messageBody indicates the email message on the current email.
1<aura:attribute name="messageBody" type="String" />

To provide the component with an event’s date or location, implement the clients:hasEventContext interface.

1dates: {
2            "start": value (String),
3            "end": value (String),
4    }

Lightning for Outlook and Lightning for Gmail don’t support the following events:

force:navigateToList
force:navigateToRelatedList
force:navigateToObjectHome
force:refreshView

To ensure that custom components appear correctly in Lightning for Outlook or Lightning for Gmail, enable them to adjust to variable widths.

Note

Lightning Components Developer Guide

Create Components for Lightning for Outlook and Lightning for Gmail