Do Not Contact Notification Banner for Salesforce Users (Lightning Component)

I’ve spent a lot of time thinking about and building processes around communication preferences and making sure we are able to capture these preferences in the right way. One thing I hadn’t really thought about until recently, however, is how to display communication preferences to the end-user – for example, whether a prospect can be emailed, called, texted (SMS), or none! It’s all well and good capturing these but if a salesperson cannot quickly see if they can or cannot contact someone, it defies the point of having communication preferences in the first place, and undoes all the hard work previously done.

There are a few ways you can make communication preferences more obvious to Salesforce users so that they don’t have to go digging for the information. One way is Mailability Flags, but a second way that’s more stand-out, ‘in-your-face’ are notification banners on records. With the help of a custom Lightning Component and the Lightning App Builder, I have found a way to make this incredibly easy and effective.

Step 1: Create the Lightning Component

To start off, I created a Lightning Component to display a simple banner at the top of a record page. The code that follows below after shows each part of the component in case you’d like to build anything similar. The main points of the component are:

• Using the flexipage:availableForRecordHome interface means the component can only be used on a record home page.
• Using the force:hasRecordId interface enables the component to be assigned to the ID of the current record.
• I’ve decided to use the warning utility icon in the banner. If you wanted to change this you can reference all available icons here.
• I opted to have the colour of the icon as white and the colour of the banner as red (#800000)
• Using both large and small supportedFormFactor types allows this to be utilised on both desktop and mobile

MessageNotification.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
<aura:attribute name="message" type="String"/>
<aura:attribute name="backgroundColour" type="String"/>

<div style="{! 'background-color:' + v.backgroundColour }">
<lightning:layout horizontalAlign="space">
<lightning:layoutItem padding="around-small" flexibility="auto">
<lightning:icon class="warning" iconName="utility:warning" alternativeText="Warning!" variant="warning" size="small"/>

<lightning:formattedText value="{!v.message}" />

</lightning:layoutItem>
</lightning:layout >
</div>

</aura:component>

MessageNotificationoController.js

({
myAction : function(component, event, helper) {

}
})

MessageNotificationHelper.js

({
helperMethod : function() {

}
})

MessageNotification.css

.THIS {
background-color: #16325c;
color: white;
}
.THIS .warning svg{
fill:white;
}

MessageNotification.desgn

<design:component >
<design:attribute name="message" label="Message"/>
<design:attribute name="backgroundColour" label="Background Colour"/>
<design:supportedFormFactors>
<design:supportedFormFactor type="Large"/>
<design:supportedFormFactor type="Small"/>
</design:supportedFormFactors>
</design:component>

Step 2: Add Component to Record Pages

Once the component is created, it’s time to add it to the record pages.

In the Lightning App Builder, select the page you wish to add the component to (in my example I have used the Contact page).

Once in the App Builder on the appropriate page, simply drag the component to the top of the page. You will then be able to customise the message that appears and apply filters to the component visibility.

The filters give you the ability to give a much better experience for the end-user; for example, I have used the component three times:

1. The first is notifying the user that they cannot email this person. Here the filters I used were the Email Opt Out field being true, and the Do Not Call field being false.
2. The second one is notifying the user that they cannot call this person. Here the filters I used were the Do Not Call field being true, and the Email Opt Out field being false.
3. The last one is notifying the user that they cannot contact this person at all, with the filters Email Opt Out field and Do Not Call field both being set to true.

The end result gives the end user a clear indication on if they can or cannot contact the person they are looking at, both on desktop and mobile:

Summary

It’s all well and good capturing communication preferences, but if a salesperson cannot quickly see if they can or cannot contact someone, it defies the point of having communication preferences in the first place.

Notification banners on records are one way to make this information more obvious to Salesforce users, which I have shown you using a custom Lightning Component and the Lightning App Builder. Another way worth exploring is Mailability Flags – or both, depending on how your users prefer to see information!