Custom Lightning Component in Outlook or Gmail Side Panel

Sales reps depend on 2 important tools one is CRM to store information related to opportunities and leads and second is emails to communicate with contacts. CRM and Email are 2 different applications and sometimes it is annoying to toggle between apps to create records in salesforce when user is busy following up with multiple clients or customers at a time viz emails. It is also important to keep track of all interactions, activities and events into Salesforce.

The “Salesforce Lightning for Outlook” add-in can solve this problem. This plugin will give user a small side window panel, where user can create records in salesforce without having to login to salesforce separately in a browser. This will be like mobile version of salesforce in outlook.

Once you install the plugin, you need to login to either sandbox instance or Production Instance. You can create records of almost all objects. If you want a specific record type record to be created, you can create Global Actions for the same. This is a standard feature of salesforce.

There will be some scenarios where you may need to customize things as per business scenarios. And to add the custom-built logic, sometimes you need to build a custom solution either in Lightning Aura Component or in Lightning Web Component. But how to add the custom build module in the side panel in your outlook or Gmail plugin, we will see that in this post.

---

There are 3 implementations that you should be aware if you are building a Lightning Aura Component to bring it up in outlook.

1. clients:availableForMailAppAppPage
2. clients:hasItemContext
3. clients:hasEventContext

clients:availableForMailAppAppPage

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

This interface is used with clients:hasItemContext and clients:hasEventContextto implement record-specific and event-specific information.

client:hasItemContext

To access email or calender information, you need to implement client:hasItemContext interface. This interface provides with some default attributes so that email related content can be read and used as per requirement.

Attributes:

1. people (An object representing the contacts on the current item or email)
2. source (An enum indicating where the source is coming from. Possible values are ’email’, ‘event’)
3. subject (The subject of the current item.)
4. mode (An enum indicating the mode of the item. Possible values are ‘view’, ‘edit’)
5. messageBody (The body of the current item in plain text)

client:hasEventContext

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

Attributes:

1. date (An object representing the item context pertinent to the appointment.)
2. location (The location of the current event.)

---

Example:

In below example, we will display all attributes values of all 3 extensions.

TestOutlookCustom.cmp

<aura:component implements="clients:availableForMailAppAppPage,clients:hasItemContext,clients:hasEventContext">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="a_source_Str" type="String" />
    <aura:attribute name="a_mode_Str" type="String" />
    <aura:attribute name="a_people_Str" type="Object" />
    <aura:attribute name="a_messageBody_Str" type="string" />
    <aura:attribute name="a_subject_Str" type="string" />
    <aura:attribute name="a_dates_Str" type="Object" />
    <aura:attribute name="a_location_Str" type="string" />
    <p>
        <lightning:card variant="People" title="People" iconName="standard:contact">
            <p class="slds-p-horizontal_small">
                {!v.a_people_Str}
            </p>
        </lightning:card>
        <br></br>
        <lightning:card variant="Source" title="Source" iconName="standard:contact">
            <p class="slds-p-horizontal_small">
                {!v.a_source_Str}
            </p>
        </lightning:card>
        <br></br>
        <lightning:card variant="Mode" title="Mode" iconName="standard:contact">
            <p class="slds-p-horizontal_small">
                {!v.a_mode_Str}
            </p>
        </lightning:card>
        <br></br>
        <lightning:card variant="Message" title="Message" iconName="standard:contact">
            <p class="slds-p-horizontal_small">
                {!v.a_messageBody_Str}
            </p>
        </lightning:card>
        <br></br>
        <lightning:card variant="Subject" title="Subject" iconName="standard:contact">
            <p class="slds-p-horizontal_small">
                {!v.a_subject_Str}
            </p>
        </lightning:card>
        <br></br>
        <lightning:card variant="dates" title="Dates" iconName="standard:contact">
            <p class="slds-p-horizontal_small">
                {!v.a_dates_Str}
            </p>
        </lightning:card>
        <br></br>
        <lightning:card variant="location" title="Location" iconName="standard:contact">
            <p class="slds-p-horizontal_small">
                {!v.a_location_Str}
            </p>
        </lightning:card> 
    </p>
    
</aura:component>

TestOutlookCustomController.js

({
	doInit : function(component, event, helper) {
		
        component.set("v.a_people_Str",JSON.stringify(component.get("v.people")));
        component.set("v.a_source_Str",JSON.stringify(component.get("v.source")));
        component.set("v.a_mode_Str",JSON.stringify(component.get("v.mode")));
        component.set("v.a_messageBody_Str",JSON.stringify(component.get("v.messageBody")));
        component.set("v.a_subject_Str",JSON.stringify(component.get("v.subject")));
        component.set("v.a_dates_Str",JSON.stringify(component.get("v.dates")));
        component.set("v.a_location_Str",JSON.stringify(component.get("v.location")));
	}
})

---

You must include the component in Email Pane. So that it appears in the side window in outlook.

Follow the below steps.

Step 1: Login to salesforce instance – go to Setup

Step 2: In Quick Search, search for “Lightning App Builder” – Click on Lightning App Builder.

Step 3: Click “Edit” on “Email Application Pane Default”. (More info on “Email Application Pane”)

Step 4: on left hand side search for the component what you have developed “TestOutlookCustom”.

Step 5: Drag that component and place it in the component panel page.

Step 6: Click “Save” on top right corner. And Back.

After record is saved, go to outlook, select any email, and click on view (Salesforce Plugin).

---

Email Application Panes

In Step 3 you will select the name of the “Email Application Panes”. Before you create anything custom, you may have to create as “Email Application Panes”. Find below steps to create an Email app Pane.

1. From Setup, in the Quick Find box, enter Integration, and then select either Outlook Integration and Sync or Gmail Integration and Sync.
2. Expand Let users access Salesforce records, and select Customize content with App Builder.
3. Navigate to the Lightning App Builder.
   1. In Lightning Experience:

From the setup page, under Email Application panes, click Create New Pane. Follow the steps until you reach the design page.

If you’re adding Inbox components, from the Create New Pane menu, select With Inbox Features. Follow the steps until you reach the design window.

• In Salesforce Classic:

From Setup, in the Quick Find box, enter App Builder, and then select New under Lightning Pages. Select Email Application Pane. Follow the steps until you reach the design window.

4. Drag components onto the pane, and arrange them in the order you want them to appear.

To show accounts, activities, or cases that are related to an email or event, add the Accounts, Opportunities, and More component to the pane. Select the object type to show in the component. If your company is set up with Inbox, you can use the same component to show custom objects. The email application pane can have multiple Accounts, Opportunities, and More components to show different object types.

5. Click Save. – Activate – Assign it to Users and profiles as per requirement.

---

Note

• Email Application Pane name can very, from Org to Org. What is mentioned in post is when was named.
• Interfaces are important for developing a custom component for Email Application.
• You can add both Lightning Aura Component(LAC) and Lightning Web Component(LWC). Example only shows LAC
• attributes mentioned in controller part is default attributes, no need to declare or define them.

---

Resource

Salesforce : Build Email Integration Panes for Outlook and Gmail

Salesforce : Available For Mail App App Page

Salesforce : Has Event Context

Salesforce : Has Item Context