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.
    <aura:attribute name="source" type="String" />
  • The people attribute indicates recipients’ email addresses on the current email or appointment.
    <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.

    {
        to: [ { name: nameString, email: emailString }, ... ],
        cc: [ ... ],
        from: [ { name: senderName, email: senderEmail } ],
    }
    

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

    {
        requiredAttendees: [ { name: attendeenameString, email: emailString }, ... ],
        optionalAttendees: [ { name: optattendeenameString, email: emailString }, ... ],
        organizer: [ { name: organizerName, email: senderEmail } ],
    }
    
  • The subject indicates the subject on the current email.
    <aura:attribute name="subject" type="String" />
  • The messageBody indicates the email message on the current email.
    <aura:attribute name="messageBody" type="String" />

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

    dates: {
            "start": value (String),
            "end": value (String),
    }
Lightning for Outlook and Lightning for Gmail don’t support the following events:
  • force:navigateToList
  • force:navigateToRelatedList
  • force:navigateToObjectHome
  • force:refreshView
Note

Note

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