Send Email Using JavaScript SharePoint Online

Send Email using JavaScript SharePoint Online, with a simple project "Leave Request Application"

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,

 

 

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"

var EmpName, ManagerEmail, StartDate, EndDate, EmpID, Comments, LeaveType = '';

function getDetails() {
    EmpName = $("#Emp_Name").val();
    ManagerEmail = $("#ManagerEmail").val();
    StartDate = document.getElementsByName("StartDate")[0].value;
    EndDate = document.getElementsByName("EndDate")[0].value;
    EmpID = document.getElementsByName("Emp_ID")[0].value;
    Comments = document.getElementsByName("Comments")[0].value;
    LeaveType = $("input[type='radio'][name='LeaveType']:checked").val();
    fnCreateItem(); //REST API POST Method
    processSendEmails(); //Sends 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!