Custom Components for ‘Lightning for Outlook’

Published on March 7, 2017

Most of the sales reps are being forced to spend huge amount of time switching from one application to another, just to get the relevant details about the targeted contact person. Which means, the reps are spending more time switching between apps and less time selling, affecting their productivity.

Thankfully Lightning for Outlook brings the power of Salesforce in to Outlook, which enables users to access Salesforce data directly from Outlook, eliminating the need to jump between programs with no extra clicks & hassle required.

Staying close to the customers is much easier for reps with customer data at the point of customer contact. Reps can easily see whom, when, & how to contact, while also being able to painlessly update records.

Though Lightning for Outlook bring virtually all the relevant data to Outlook, there could be situations where one might need some additional information to be displayed that are not readily shown. In such scenarios, Lightning for Outlook components can be further customized to suit the user’s requirements.

Given below is the elaboration on how email application pane is customized.

Email application pane can be customized using Lightning App Builder.

To add custom component to email application panes for Outlook, implement ‘clients:availableForMailAppAppPage’ interface.
To allow the custom component access to email or calendar events, implement ‘clients:hasItemContext’ interface.

Once the above interfaces are implemented in a Lightning component, it begins to access SUBJECT, BODY, FROM, TO, CC and BCC values from outlook email.

Following example would help to understand further on how it helps to acquire desired results:

Scenario: A user wants to display sum of opportunity amount based on the email ID configured to Salesforce contact in ‘Lightning for Outlook’.

When a Salesforce user opens an email in Outlook that s/he received from a customer, the Lightning for outlook email application pane would readily display People, Account, Case and Opportunity. Assuming that the user also needs the pane to show the sum of opportunity amount related to the account (not readily available), using the following code would help achieve the desired result.

Sample code

CustomComponent EmailApplication

/* This component handles the email context on initialization. It retrieves accounts and opportunities based on the email addresses included in the email recipients list. It then calculates the opportunity amount. */

<aura:component implements=”clients:availableForMailAppAppPage,clients:hasItemContext” controller=”ComponentController”>

<ltng:require styles=”/resource/slds0120/assets/styles/salesforce-lightning-design-system.min.css”/>

<aura:handler Name=”change” value=”{!v.people}” action=”{!c.handlePeopleChange}” />

<aura:attribute name=”opportunitiesAmount” type=”List” />

<aura:iteration items=”{!v.opportunitiesAmount}” var=”oppAm”>

<h2 class=”slds-text-heading–medium slds-truncate”>Opportunity</h2>

</header>

<h1 class=”slds-text-heading–medium slds-truncate”> Total Amount : {!oppAm.Total} </h1>

</div>

</aura:iteration>

</aura:component>

CustomComponent EmailApplication ControllerJS

/* This JavaScript controller is called on component initialization and relies on the helper functionality to build a list of email addresses from the available people. It then makes a caller to the server to run the actions to display information. Once the server returns the values, it sets the appropriate values to display on the client side. */

({

handlePeopleChange: function(component, event, helper){

var people = component.get(“v.people”);

var peopleEmails = helper.filterEmails(people);

var action = component.get(“c.findopportunitiesAmount”);

action.setParam(“emails”, peopleEmails);

action.setCallback(this, function(response){

var state = response.getState();

if(component.isValid() && state === “SUCCESS”){

component.set(“v.opportunitiesAmount”, response.getReturnValue());

} else{

component.set(“v.opportunitiesAmount”,[]);

}

}); $A.enqueueAction(action);

}

})

CustomComponent EmailApplication HelperJS

/* This helper function filters emails from contact. */

({

filterEmails : function(people){

return this.getEmailsFromList(people.to);

getEmailsFromList : function(list){

var ret = [];

for (var i in list) {

ret.push(list[i].email);

}

return ret;

}

})

Apex Component Controller

public class ComponentController {

/* This method searches for Contacts with matching emails in the email list, and includes Account information in the fields. Then, it filters the information to return a list of Opportunity to use on the client side. */

@AuraEnabled

public static List<Map<String, Object>> findopportunitiesAmount(List<String> emails) {

List<Map<String, Object>> ret = new List<Map<String, Object>>();

List<id> Accountids = new List<id>();

List<Opportunity> AllOpportunities = New List<Opportunity>();

Double TotalAmount = 0;

Map<String, Object> item = new Map<String, Object>();

List<Contact> contacts = [SELECT Name, Account.Name, Accountid

FROM Contact

WHERE Contact.Email IN :emails];

for (Contact c: contacts) {

Accountids.add(c.Accountid);

item.put(‘Name’,c.Account.Name);

}

AllOpportunities =[SELECT Id, Name, Amount, Account.Name FROM Opportunity WHERE Accountid IN:Accountids];

for (Opportunity Opp : AllOpportunities){

TotalAmount += Opp.amount;

}

item.put(‘Total’,TotalAmount);

ret.add(item);

System.debug(‘Total Amount’+TotalAmount);

return ret;

}

Using the email recipient’s address, the contact details of the customer can be acquired; which in turn helps to get all the linked Accounts. The custom component uses Account ID and calculates sum of Opportunities amount.