Send Email Using JavaScript SharePoint Online

To send emails from SharePoint, we use Power Automate / SharePoint Utility Email using C#.

What if you want to send emails from your client-side code. Yes, it's possible by using /_api/SP.Utilities.Utility.SendEmail

Note

Your recipient must be a SharePoint site user. You can't send emails from SharePoint to other emails that are not in your organization.

In this blog, you will learn how to send emails using JavaScript, with a simple project, "Leave Request Application"

Let's get started...

Prerequisites

List name - LeaveTracker
Columns - Title, ManagerEmail, EmployeeID, LeaveStartDate, LeaveEndDate, LeaveType, Comments

Site Page - https://{yourtenantname}.sharepoint.com/sites/DemoSite/SitePages/LeaveApplication.aspx
Add your code files to Site Assets, you can get the code files from my GitHub.

Screenshot of our application,

Step 1

Refer the JS and CSS files,

<link type="text/css" rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../SiteAssets/SendEmail.js"></script>

Step 2

Get the field values from HTML, on button click, "Send Email"

Step 3

Now store the values to your SharePoint list, using REST API

Note

SharePoint List is not mandatory, you can send an email directly.

function fnCreateItem() {
var requestUriPOST = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('LeaveTracker')/items?";
$.ajax({
url: requestUriPOST,
type: "POST",
data: JSON.stringify({
__metadata: {
type: "SP.Data.LeaveTrackerListItem"
},
Title: EmpName,
ManagerEmail: ManagerEmail,
EmployeeID: EmpID,
LeaveStartDate: StartDate,
LeaveEndDate: EndDate,
LeaveType: LeaveType,
Comments: Comments
}),
headers: {
"accept": "application/json;odata=verbose",
"content-Type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "POST"
},
success: function(data) {
console.log("Success");
},
error: function(error) {
console.log(error.responseText);
}
});
}

Step 4

Send email to the users using /_api/SP.Utilities.Utility.SendEmail

The format of your "To" & "CC" variable must be an Array that contains emails.

Note

Your recipient must be a SharePoint site user. You can't send emails from SharePoint to other emails who are not in your organization.

function processSendEmails() {
var from = '[email protected]',
to = [ManagerEmail],
cc = [_spPageContextInfo.userEmail],
body = "<p><strong>Leave Type : </strong>" + LeaveType + "</p><p><strong>Leave Start Date : </strong>" + StartDate + "</p><p><strong>Leave End Date : </strong>" + EndDate + "</p><p><strong>Comments : </strong>" + Comments + "</p><p>Thanks,<br/>" + EmpName + "</p>",
subject = 'Leave Application for ' + EmpName;
sendEmail(from, to, cc, body, subject);
}
function sendEmail(from, to, cc, body, subject) {
var siteurl = _spPageContextInfo.webServerRelativeUrl;
var urlTemplate = siteurl + "/_api/SP.Utilities.Utility.SendEmail";
$.ajax({
contentType: 'application/json',
url: urlTemplate,
type: "POST",
data: JSON.stringify({
'properties': {
'__metadata': {
'type': 'SP.Utilities.EmailProperties'
},
'From': from,
'To': {
'results': to
},
'CC': {
'results': cc
},
'Body': body,
'Subject': subject
}
}),
headers: {
"Accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
},
success: function(data) {
alert('Email has been sent to your Manager');
document.location.href = _spPageContextInfo.webAbsoluteUrl; //Redirect to home page
},
error: function(err) {
alert('Error in sending Email: ' + JSON.stringify(err));
}
});
}

DEMO

Hurray!! I hope you find this useful...

Happy Learning!