---
schema_version: "1"
id: d1fbec8658a139e7b84dd74b7023e41212f5454296ff333361b039ea1c34a42e
title: Create Components for the Outlook and Gmail Integrations
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/components/components-config-for-app-builder-email-app-pane.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/components-config-for-app-builder-email-app-pane.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 68735bbcdc4c7bb7ab8734efdc9b93126e12c368639ceadb3c1cb6158931ed01
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# 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`.

    ```nolang
    <aura:attribute name="source" type="String" />
    ```

-   The `mode` attribute, which indicates viewing or composing an email or event. Possible values include `view` and `edit`.

    ```nolang
    <aura:attribute name="mode" type="String" />
    ```

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

    ```nolang
    <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.

    ```nolang
    {
        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.

    ```nolang
    {
        requiredAttendees: [ { name: attendeenameString, email: emailString }, ... ],
        optionalAttendees: [ { name: optattendeenameString, email: emailString }, ... ],
        organizer: { name: organizerName, email: senderEmail },
    }
    
    ```

-   The `subject` indicates the subject on the current email.

    ```nolang
    <aura:attribute name="subject" type="String" />
    ```

-   The `messageBody` indicates the email message on the current email.

    ```nolang
    <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 -->
```nolang

    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.

-   **[Sample Custom Components for Outlook and Gmail Integration](https://developer.salesforce.com/docs/platform/aura-platform/guide/components-custom-for-app-builder-email-app-pane.md)**  


    Review samples of custom Aura components that you can implement in the email application pane for Outlook integration and Gmail Integration.