Integrating Lightning Components in the Email Sidebar¶
For users of the Email Sidebar on:
3 min read
If your company uses specific Lightning web, Aura components, or flows, you can enable end-users to access and work with them in RG Email Sidebar.
If using Lightning Components in RG Email Sidebar is enabled, the added components appear in the Smart Actions bottom toolbar in the Outlook Add-In/Chrome Extension.
When opened, Lightning Components are rendered in the Sidebar’s interface and users can work with such components as they would in Salesforce.
Note
To be displayed in the Sidebar, Salesforce flows must be rendered as an Aura Component or Lightning Web Component. To learn more about the lightning:flow components, see this Salesforce developer article.
Revenue Grid can auto-populate some fields for Email and Event objects in the Lightning components rendered in the Sidebar:
|
For an Email |
For an Event |
|---|---|
|
|
Prerequisites for feature enabling¶
To enable Revenue grid to access the Lightning components, you must amend the custom Lightning component’s configuration as described in this Salesforce article or following the instructions provided below.
Make the component available for Outlook and Gmail¶
In the component’s configuration file, add the lightning__Inbox target and set \<isExposed> to true.
Config example:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<isExposed>true</isExposed>
<apiVersion>46.0</apiVersion>
<targets>
<target>lightning__Inbox</target>
</targets>
<description>Sample Email Application Pane</description>
</LightningComponentBundle>
Add properties to the component¶
The lightning__Inbox target you’ve added in the previous step enables you to specify the component’s properties.
In the component’s JavaScript file, specify the properties for the component. The available properties are dates, emails, location, messageBody, mode, people, source, subject. See the next article section for more info about each property.
Config example:
// sampleEmailAppPane.js
import { LightningElement, api } from "lwc";
export default class SampleEmailAppPane extends LightningElement {
@api messageBody;
@api subject;
@api people;
}
Available properties¶
dates¶
Data Type: Object The event’s date.
dates: {
start: 'value',
end: 'value'
}
Supported Source: event
emails¶
Data Type: Array The email addresses of the recipients in a simple array. Use this property if it doen’t matter whether the email address is in the To, From, or CC field, or what kind of an attendee the addressee is.
["[email protected]", [email protected]];
Supported Source: email, event
location¶
Data Type: String The location of the event. Supported Source: event
messageBody¶
Data Type: String The message body of the email in plain text. HTML formatting isn’t preserved. Supported Source: email, event
mode¶
Data Type: String The access mode. Possible values: ‘view’, ‘edit’ Supported Source: email, event
people¶
Data Type: Object The recipients’ email addresses on the current email or event. 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 these elements.
{
to: [
{
name: 'name',
email: 'email'
}
],
cc: [
{
name: 'name',
email: 'email'
}
],
from: [
{
name: 'senderName',
email: 'senderEmail'
}
]
}
When the source attribute is set to event, the people object contains these elements.
{
requiredAttendees: [
{
name: 'attendeeName',
email: 'email'
}
],
optionalAttendees: [
{
name: 'optAttendeeName',
email: 'email'
}
],
organizer: [
{
name: 'organizerName',
email: 'senderEmail'
}
]
}
Supported Source: email, event
source¶
Data Type: String Possible values: ‘email’, ‘event’ Supported Source: email, event
subject¶
Object Type: String The subject of the email. Supported Source: email, event
Make the component’s width adaptable¶
To ensure that the component is correctly displayed in the Add-In, make its width adaptable.
To do this, follow the instructions in this Salesforce article or provided below.
In the JavaScript class of your component, apply the @api decorator to establish a public property named flexipageRegionWidth. This property is designed to capture the width of the region within which the component is displayed on the page.
// testClass.js
import { LightningElement, api } from "lwc";
export default class TestClass extends LightningElement {
@api flexipageRegionWidth;
}
Incorporate this flexipageRegionWidth property within the component’s HTML template. The component will automatically rerender whenever there’s a change in the value of flexipageRegionWidth.
<!-- testClass.html -->
<template>
<div class={flexipageRegionWidth}>...</div>
</template>
Utilize CSS for specifying how the component should behave in response to varying region widths. The valid CSS class values to use are SMALL, MEDIUM, and LARGE.
Feature enabling¶
Important
This is an on-demand feature. To enable the feature, submit a corresponding request to
This functionality is managed with the admin-level setting SalesforceAddinLightningOutComponents. The setting is intended for adding JSON values specifying the following parameters for each component:
- ID
- Label, i.e., the name of the component that will be displayed in the Sidebar’s Smart Actions menu. It must contain no more than one or two words
- Icon, we add a default icon for all components
- AppName
- AppComponentName
After saving the SalesforceAddinLightningOutComponents setting, components specified can be added to the existing Profile setting SalesforceAddinCustomization in the AvailableSmartActions section by specifying their type:LightningOut and their ID.
To enable the feature, provide the following info:¶
- Title: the name of the component users will see in the Sidebar’s bottom toolbar
- Icon: the URL for the icon that will be displayed in the Sidebar. If not provided, a default icon will be used
- appName
- componentName
We would love to hear from you!