Salesforce Docs Portal

Create Components for the Outlook and Gmail Integrations

Create custom Aura components that are available to add to the email application pane for the Outlook and Gmail integrations.

To add a component to email application panes in the Outlook or Gmail integration, 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 mode attribute, which indicates viewing or composing an email or event. Possible values include view and edit.

    <aura:attribute name="mode" 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.

<!-- otherprops: set_clipboard --> 

    dates: {
            "start": value (String),
            "end": value (String),
    }

The Outlook and Gmail integrations don’t support the following events:

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

note: To ensure that custom components appear correctly, enable them to adjust to variable widths.