Sample Custom Components for Outlook and Gmail Integration

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

Apply the Selected Email Context

Here’s an example of a custom Aura component you can include in your email application pane for the Outlook or Gmail integration. This component applies the context of the selected email or appointment.

1<!-- customEmailPane.cmp -->
2<aura:component implements="clients:availableForMailAppAppPage,clients:hasItemContext">
3
4<!--
5    Add these handlers to customize what happens when the attributes change
6    <aura:handler name="change" value="{!v.subject}" action="{!c.handleSubjectChange}" />
7    <aura:handler name="change" value="{!v.people}" action="{!c.handlePeopleChange}" />
8-->
9
10    <div id="content">
11          <aura:if isTrue="{!v.mode == 'edit'}">
12            You are composing the following Item: <br/>
13            <aura:set attribute="else">
14                You are reading the following Item: <br/>
15            </aura:set>
16        </aura:if>
17
18        <h1><b>Email subject</b></h1>
19        <span id="subject">{!v.subject}</span>
20
21        <h1>To:</h1>
22        <aura:iteration items="{!v.people.to}" var="to">
23            {!to.name} - {!to.email} <br/>
24        </aura:iteration>
25
26        <h1>From:</h1>
27        {!v.people.from.name} - {!v.people.from.email}
28
29        <h1>CC:</h1>
30        <aura:iteration items="{!v.people.cc}" var="cc">
31            {!cc.name} - {!cc.email} <br/>
32        </aura:iteration>
33
34        <span class="greeting">New Email Arrived</span>, {!v.subject}!
35    </div>
36</aura:component>

Display Record Data Based On Recipients

In this example, the custom component displays account and opportunity information based on the email recipients’ email addresses. The component calls a JavaScript controller function, handlePeopleChange(), on initialization.

1<!-- customEmailDisplay.cmp -->
2<!--
3This component handles the email context on initialization. 
4It retrieves accounts and opportunities based on the email addresses included 
5in the email recipients list. 
6It then calculates the account and opportunity ages based on when the accounts 
7were created and when the opportunities will close.
8-->
9
10<aura:component 
11    implements="clients:availableForMailAppAppPage,clients:hasItemContext"
12    controller="ComponentController">
13    
14    <aura:handler name="init" value="{!this}" action="{!c.handlePeopleChange}" />
15    <aura:attribute name="accounts" type="List" />
16    <aura:attribute name="opportunities" type="List" />
17    <aura:iteration items="{!v.accounts}" var="acc">
18            {!acc.name} => {!acc.age}
19    </aura:iteration>
20    <aura:iteration items="{!v.opportunities}" var="opp">
21            {!opp.name} => {!opp.closesIn} Days till closing
22    </aura:iteration>
23    
24</aura:component>

The Apex controller includes Aura-enabled methods that accept a list of emails as parameters. It queries the Contact and OpportunityContactRoles objects using SOQL and assigns the results to a List variable. You can also modify the example with your own custom objects.

1/*ComponentController.cls*/
2
3public class ComponentController {
4    /*
5    This method searches for Contacts with matching emails in the email list, 
6    and includes Account information in the fields. Then, it filters the 
7    information to return a list of objects to use on the client side.
8    */    
9    @AuraEnabled
10    public static List<Map<String, Object>> findAccountAges(List<String> emails) {
11    List<Map<String, Object>> ret = new List<Map<String, Object>>();
12    List<Contact> contacts = [SELECT Name, Account.Name, Account.CreatedDate 
13                              FROM Contact 
14                              WHERE Contact.Email IN :emails];
15    for (Contact c: contacts) {
16            Map<String, Object> item = new Map<String, Object>();
17            item.put('name', c.Account.Name);
18            item.put('age', 
19                     Date.valueOf(c.Account.CreatedDate).daysBetween(
20                         System.Date.today()));
21            ret.add(item);
22    }
23     return ret;
24}
25
26    /*
27    This method searches for OpportunityContactRoles with matching emails 
28    in the email list. 
29    Then, it calculates the number of days until closing to return a list 
30    of objects to use on the client side.
31    */
32    @AuraEnabled
33    public static List<Map<String, Object>> findOpportunityCloseDateTime(List<String> emails) {
34    List<Map<String, Object>> ret = new List<Map<String, Object>>();
35    List<OpportunityContactRole> contacts = 
36           [SELECT Opportunity.Name, Opportunity.CloseDate 
37            FROM OpportunityContactRole 
38            WHERE isPrimary=true AND Contact.Email IN :emails];
39    for (OpportunityContactRole c: contacts) {
40            Map<String, Object> item = new Map<String, Object>();
41            item.put('name', c.Opportunity.Name);
42            item.put('closesIn', 
43                     System.Date.today().daysBetween(
44                         Date.valueOf(c.Opportunity.CloseDate)));
45            ret.add(item);
46    }
47     return ret;
48  }
49}

On component initialization, this JavaScript controller calls the helper method, filterEmails(), which builds a list of email addresses from the available people.

The JavaScript controller then makes a call to the server to run the actions to display information. It calls the findOpportunityCloseDateTime method on the Apex controller to query the opportunities days until closing. It calls the findAccountAges method to query the accounts ages.

Once the server returns the values, it sets the appropriate values to display on the client side.

1/* customEmailDisplayController.js */
2({
3    handlePeopleChange: function(component, event, helper){
4        var people = component.get("v.people");
5        var peopleEmails = helper.filterEmails(people);
6        var action = component.get("c.findOpportunityCloseDateTime");
7        action.setParam("emails", peopleEmails);
8
9        action.setCallback(this, function(response){
10            var state = response.getState();
11            if(state === "SUCCESS"){
12               component.set("v.opportunities", response.getReturnValue());
13            } else{
14               component.set("v.opportunities",[]);
15        }
16});
17        $A.enqueueAction(action);
18        var action = component.get("c.findAccountAges");
19        action.setParam("emails", peopleEmails);
20
21        action.setCallback(this, function(response){
22            var state = response.getState();
23            if(state === "SUCCESS"){
24               component.set("v.accounts", response.getReturnValue());
25            } else{
26               component.set("v.accounts",[]);
27        }
28});
29$A.enqueueAction(action);
30}
31})

This helper function filters emails from objects.

1/* customEmailDisplayHelper.js */({
2    filterEmails : function(people){
3            return this.getEmailsFromList(people.to).concat(
4                this.getEmailsFromList(people.cc));
5    },
6
7    getEmailsFromList : function(list){
8            var ret = [];
9            for (var i in list) {
10            ret.push(list[i].email);
11    }
12     return ret;
13  }
14})