Standard Salesforce gives you so much and yet, sometimes it can feel like it will get you 90–95% of the way there, but you’ll have to heavily configure or code a workaround to get you to the full 100%. This is complicated further because there are 2 UI’s (Classic and Lightning Experience), whereby some features work with one UI, but not the other.
I recently came across a conversation on the IdeaExchange of not being able to drag and drop email addresses from different email fields (e.g the ‘To’ and ‘CC’ fields) in the ‘email author’ function in Lightning Experience. So, I went away and found a ‘workable’ solution that solves this gap. If this ‘drag and drop’ feature is critical then hopefully this post will help you!
The Problem
The lack of drag and drop functionality for different email fields (e.g the ‘To’ and ‘CC’ fields) in the ‘email author’ function on the Lightning email composer is garnering some frustrated responses on the IdeaExchange.
Some claim it is ‘basic’ functionality. It’s likely impacting customers who heavily leverage in-org emailing, such as email-to-case functionality, where many emails have many recipients which may have to be moved between the ‘To’ and ‘CC’ or vice versa.
There are a couple of helpful blog posts on the interwebs about creating a custom Lightning web component that handles this but the downside is that the emails would be sent via Apex and there is a fairly strict governor limit on how many emails can be sent per 24 hour rolling period.
So, having looked into how to offer a ‘drag and drop’ function that doesn’t contribute to Apex email limits, I found a ‘workable’ solution that solves the ‘drag and drop’ problem but creates two problems of its own (d’oh!). Oh well, the joys of Salesforce, eh?
If this ‘drag and drop’ feature is critical then hopefully this solution will work for you too.
Step 1: Decide on Your Object
In this tutorial, I will be choosing the case object.
Navigate to Object Manager → Case → Buttons, Links, and Actions.
No further action here, we’ll come back to this later.
If you’re wondering ‘nice theme…’ then check out the Chrome Lightning Extension here.
Step 2: Create an Apex Class
Let’s create an Apex class using the below ‘proof of concept’ code:
https://gist.github.com/salesforceBen/84169b4ed9ae34c994f0c011d0f22122
You may be wondering what the URL params starting with ‘p’ relate to, as per line 38. As per this helpful Salesforce Stack Exchange link, these can be found when inspecting the DOM with Chrome Dev tools:
These are the HTML Ids assigned to the different input fields on the email author page.
The main ‘meat’ of the code is that when the button is clicked, it immediately queries the latest email message related to the case. It then populates the values from the email message to Apex properties and then uses those values when formatting the ‘email author’ URL override.
Step 3: Create a Visualforce Page
Now, let’s create a Visualforce page called ‘DragAndDropEmail’ (old school!). I wanted to use Visualforce to show a bit of ‘hack’: you can use Visualforce with an action method to act as a proxy to call Apex when a custom button is clicked (could use an overriding standard button too).
The markup and .js code for this page can be found here:
The action function is called immediately via the JavaScript snippet which says ‘whenever the page has loaded, call the action function…which then calls the Apex method’.
Step 4: Create New Button
Now that we have our server side code and page, let’s go back to Object Manager → Case → Buttons, Links, and Actions → New Button or Link.
- Label = Drag and Drop Email
- Name = Drag_and_Drop_Email
- Display Type: Detail Page Button
- Behavior: Display in new window
- Content Source: Visualforce page
Select the page ‘DragAndDropEmail’ then select ‘Save’.
Now, select the case page layout that you wish to add this button to and drag it onto the page and then select ‘Save’.
Step 5: Execute Anonymous Script to Create Test Records
Now, let’s run an execute anonymous script to create a test case record with a test email record. You could, of course, create the email message via an email-to-case flow but, assuming your sandbox doesn’t have one already set up, you can use the script below to handle that all.
Go to Dev Console and then hit cmd + E in Mac (or CTRL + E in Windows) to launch the execute anonymous tool.
Copy and paste the below and execute the script:
Copy and paste the below and execute the script from here:
Step 6: Check Test in the Query Editor
Now, execute the below SOQL in the Query Editor to identify the newly created case.
Note: if the above script was not able to run, it is likely you have a custom validation rule in place that prevents the successful DML operation. In a brand new developer edition environment, it will pass, though.
Double click on the Id field and then copy and paste that Id into the base URL of your Salesforce tab to navigate to that case record.
Step 7: Override the Email Author Page
Now, click on the custom button to initiate this flow of ‘overriding’ the ‘email author’ page in LEX:
Upon clicking the button, you will be auto-navigated to a page that looks like this:
And now that you’re here in the ‘Classic’ email author page but in LEX, you can easily copy and paste emails to different fields or add in bulk emails to the different fields as this design doesn’t do the quick search to try and map the email address to an existing contact record, like it does in LEX.
Final Thoughts
Although the UIs of the ‘email author’ are inconsistent (LEX vs Classic), it is possible to build a solution that would enable one to use a drag and drop editor whilst in LEX. You can do some cool ‘hacky’ stuff with Apex, JavaScript and Visualforce to try to bypass different challenges. You might also find that you use the concept of using the ‘onload’ JavaScript snippet with a VF action method for use on a custom list button or custom record button for some features where users just really want to click a button other than a quick action to fire some logic.
Comments: