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
  • SharePoint List with columns,
    • 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,
 
Send Email Using JavaScript SharePoint Online
 
Step 1
 
Refer the JS and CSS files,
  1. <link type="text/css" rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">  
  2. <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  
  3. <script type="text/javascript" src="../SiteAssets/SendEmail.js"></script>   
Step 2
 
Get the field values from HTML, on button click, "Send Email"
  1. var EmpName, ManagerEmail, StartDate, EndDate, EmpID, Comments, LeaveType = '';  
  2.   
  3. function getDetails() {  
  4.     EmpName = $("#Emp_Name").val();  
  5.     ManagerEmail = $("#ManagerEmail").val();  
  6.     StartDate = document.getElementsByName("StartDate")[0].value;  
  7.     EndDate = document.getElementsByName("EndDate")[0].value;  
  8.     EmpID = document.getElementsByName("Emp_ID")[0].value;  
  9.     Comments = document.getElementsByName("Comments")[0].value;  
  10.     LeaveType = $("input[type='radio'][name='LeaveType']:checked").val();  
  11.     fnCreateItem(); //REST API POST Method  
  12.     processSendEmails(); //Sends Email  
  13. }  
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.
  1. function fnCreateItem() {  
  2.     var requestUriPOST = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('LeaveTracker')/items?";  
  3.     $.ajax({  
  4.         url: requestUriPOST,  
  5.         type: "POST",  
  6.         data: JSON.stringify({  
  7.             __metadata: {  
  8.                 type: "SP.Data.LeaveTrackerListItem"  
  9.             },  
  10.             Title: EmpName,  
  11.             ManagerEmail: ManagerEmail,  
  12.             EmployeeID: EmpID,  
  13.             LeaveStartDate: StartDate,  
  14.             LeaveEndDate: EndDate,  
  15.             LeaveType: LeaveType,  
  16.             Comments: Comments  
  17.         }),  
  18.         headers: {  
  19.             "accept""application/json;odata=verbose",  
  20.             "content-Type""application/json;odata=verbose",  
  21.             "X-RequestDigest": $("#__REQUESTDIGEST").val(),  
  22.             "X-HTTP-Method""POST"  
  23.         },  
  24.         success: function(data) {  
  25.             console.log("Success");  
  26.         },  
  27.         error: function(error) {  
  28.             console.log(error.responseText);  
  29.         }  
  30.     });  
  31. }  
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.
  1. function processSendEmails() {  
  2.     var from = 'AdminPortal@contoso.com',  
  3.         to = [ManagerEmail],  
  4.         cc = [_spPageContextInfo.userEmail],  
  5.         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>",  
  6.         subject = 'Leave Application for ' + EmpName;  
  7.     sendEmail(from, to, cc, body, subject);  
  8. }  
  9.   
  10. function sendEmail(from, to, cc, body, subject) {  
  11.     var siteurl = _spPageContextInfo.webServerRelativeUrl;  
  12.     var urlTemplate = siteurl + "/_api/SP.Utilities.Utility.SendEmail";  
  13.     $.ajax({  
  14.         contentType: 'application/json',  
  15.         url: urlTemplate,  
  16.         type: "POST",  
  17.         data: JSON.stringify({  
  18.             'properties': {  
  19.                 '__metadata': {  
  20.                     'type''SP.Utilities.EmailProperties'  
  21.                 },  
  22.                 'From': from,  
  23.                 'To': {  
  24.                     'results': to  
  25.                 },  
  26.                 'CC': {  
  27.                     'results': cc  
  28.                 },  
  29.                 'Body': body,  
  30.                 'Subject': subject  
  31.             }  
  32.         }),  
  33.         headers: {  
  34.             "Accept""application/json;odata=verbose",  
  35.             "content-type""application/json;odata=verbose",  
  36.             "X-RequestDigest": jQuery("#__REQUESTDIGEST").val()  
  37.         },  
  38.         success: function(data) {  
  39.             alert('Email has been sent to your Manager');  
  40.             document.location.href = _spPageContextInfo.webAbsoluteUrl; //Redirect to home page  
  41.         },  
  42.         error: function(err) {  
  43.             alert('Error in sending Email: ' + JSON.stringify(err));  
  44.         }  
  45.     });  
  46. }  
DEMO
 
Send Email Using JavaScript SharePoint Online
 
Send Email Using JavaScript SharePoint Online
 
Send Email Using JavaScript SharePoint Online
 
Hurray!! I hope you find this useful...
 
Happy Learning!


Next Recommended Reading Send email in SharePoint 2010