Send Email with jQuery and REST API in SharePoint

Sending Email with jQuery and REST

Objective:
As we all know every client is looking for best performance and quick page loads. In this article I would like to enhance your client side skills by adding one more knowledge base. Here we will discuss how we can send an email using jQuery in SharePoint 2016/2013.
As soon as we configure SharePoint environment we ensure few important things for better user interface and experience one of them is email functionality. Without configuring this element user could not be able to perform below:
-> Configuring alerts
-> Email approval flow
-> Document library incoming email configuration
-> Sending emails through user / custom code blocks.

The below code block helps to send email to user with the help of jQuery and REST service.


<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>

<script>
function processSendEmails() {
    var from = ‘krishna.Vandanapu@mstechnology.com’,
        to = ‘krishna.Vandanapu@mstechnology.com’,
        body = ‘Hello World Body’,
        subject = ‘Hello World Subject’;
    alert(“Sending email to Krishna”);
    // Call sendEmail function
    sendEmail(from, to, body, subject);
    alert(“Email sent Successfully”);
}



function sendEmail(from, to, body, subject) {
    try {
        //Get the relative url of the site
        var siteurl = _spPageContextInfo.webAbsoluteUrl;
        alert(“Site URL=”+siteurl);
        var urlTemplate = siteurl + “/_api/SP.Utilities.Utility.SendEmail”;
        alert(“URLTemplate=”+urlTemplate);
        $.ajax({
            contentType: ‘application/json’,
            url: urlTemplate,
            type: “POST”,
            data: JSON.stringify({
                ‘properties’: {
                    ‘__metadata’: {
                        ‘type’: ‘SP.Utilities.EmailProperties’
                    },
                    ‘From’: ‘krishna.Vandanapu@mstechnology.com’,
                    ‘To’: { ‘results’: [‘krishna.Vandanapu@mstechnology.com’] },
                    ‘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 Sent Successfully’);
            },
            error: function(err) {
                alert(‘Error in sending Email: ‘ + JSON.stringify(err));
            debugger;
            }
        });
    }
    catch (error) {
    }
}
$(document).ready(function () {
    SP.SOD.executeFunc(‘sp.js’, ‘SP.ClientContext’, processSendEmails);
});
</script>
How does this code works?
-> Save this script as sendemail.js
-> Upload the script in sharepoint document / asserts library
-> Create a webpartpage add content editor webpart
-> Refer the javascript in content editor webpart
If we read the code closely this script get triggered on page load.
The output will be as follows.
Sending Email with jQuery and REST
Sending Email with jQuery and REST


Hope this helps !!!!

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials:

About Krishna Vandanapu

I am Krishna.Vandanapu a SharePoint architect working in IT from last 12 years, I worked in SharePoint 2007, 2010, 2013, 2016 and Office 365. I have extensive hands on experience in customizing SharePoint sites from end to end. Expertise in SharePoint migration tools like Sharegate, Doc Ave and Metalogix. Migrated SharePoint sites from SharePoint 2007 to 2010 and 2010 to 2013 several times seamlessly. Implementing CSOM with Microsoft best practices. Spent quality time in configuring SharePoint application services like User Profile, Search, Managed Meta data services etc. Now exploring SharePoint Framework and SharePoint 2019

View all posts by Krishna Vandanapu →