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.

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

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

Note