Send email with javascript – with the help of a workflow in a dedicated “send email-list”

This solution “injects” data, using JavaScript, into a custom list. This list has one purpose only: sending an email containing the injected data.

The custom list have the following fields:

  • Title: The native Title field – holds the subject.
  • To: Single line of text.
  • Cc: Single line of text.
  • EmailBody: Multiple lines of plain text.

IMG

With a workflow like this:
IMG
IMG
IMG
IMG
IMG
You could skip the part with “Store …. in Variable” for “To” and “Cc” if you like, this step was originally used for pulling values from a multi select people picker. This field cannot be used in “To” or “Cc” without this procedure.

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
IMG

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.4.2.min. If you use another version, remember to update the script “src”.

The scripts “interaction.js” and “stringBuffer.js” are created by Erucy and published on CodePlex.

Read here how to add a CEWP to the NewForm or EditForm, how to find the list Guid of your list, and how to find the FieldInternalName of your columns.

Add this code to a CEWP – update the script “src”:

<input type="button" onclick="javascript:init_sendMailWithJavascript()" value="Send test-mail">
<script type="text/javascript" src="../../Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../../Javascript/interaction.js"></script>
<script type="text/javascript" src="../../Javascript/stringBuffer.js"></script>
<script type="text/javascript">

var sendMailListGuid = '{68CC0B80-7013-41B2-B591-CBA3899B713D}';

function init_sendMailWithJavascript(){
	sendMailWithJavascript("My custom subject","to@mail.com","cc@mail.com","<div>This is a div</div><a href='https://spjsblog.com'>SharePoint JavaScripts</a>");
}

function sendMailWithJavascript(Subject,To,Cc,Body){
	wsBaseUrl = L_Menu_BaseUrl + '/_vti_bin/';
	var res = addItem(sendMailListGuid,{Title:Subject,To:To,Cc:Cc,EmailBody:Body});
	if(!res.success){
		alert(res.errorText);
	}else{
		alert("Sending OK!");
	}
}
</script>

This code inserts a button that calls the function “init_sendMailWithJavascript” and sends a test message. You must modify the variable “sendMailListGuid” to reflect your “send mail” list’s GUID. Refer to the link above the codeblock for instructions. Also modify the “To” and “Cc” addresses.

The function “init_sendMailWithJavascript” is just an example – you can call the function “sendMailWithJavascript” directly from your script.

NOTE: Starting Workflows is not possible for anonymous users (may be possible using a third party fix).

Ask if anything is unclear.

Alexander

15 Comments on “Send email with javascript – with the help of a workflow in a dedicated “send email-list””

  1. neat little script. I actually was playing around with some of the layout. I am still not as good with jquery, but with javascript I can place the send button nect to the OK, maybe with your talent you could update it to jquery

    <!-- <input type="button" onclick="javascript:init_sendMailWithJavascript()" value="Send test-mail"> -->
<script type="text/javascript" src="/sites/JavaScripts/jquery-latest.min.js"></script>
<script type="text/javascript" src="/sites/JavaScripts/interaction.js"></script>
<script type="text/javascript" src="/sites/JavaScripts/stringBuffer.js"></script>
<script type="text/javascript">

var sendMailListGuid = '{9FBE6723-1A25-4393-9FA0-6CFAF0A914FC}';

function init_sendMailWithJavascript(){
	sendMailWithJavascript("My custom subject","to@mail.com","cc@mail.com","<div>This is a div</div><a href='https://spjsblog.com'>SharePoint JavaScripts</a>"); 
function sendMailWithJavascript(Subject,To,Cc,Body){
	wsBaseUrl = L_Menu_BaseUrl + '/_vti_bin/';
	var res = addItem(sendMailListGuid,{Title:Subject,To:To,Cc:Cc,EmailBody:Body});
	if(!res.success){
		alert(res.errorText);
	}else{
		alert("Mail Sent!");
	}
}
</script>
// Button layout
<table style="display:none">
<tr>
<td id="oCustomButton" class="ms-toolbar" nowrap="true"> 
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right" width="100%" nowrap><input type="button" value="Send test-mail" 
onclick="javascript:init_sendMailWithJavascript()" class="ms-ButtonHeightWidth" />
</td>
</tr>
</table> 
</td>
<td id="oSeparator" > <img src='/_layouts/images/blank.gif' border=0 width=5/> </td>
</tr>
</table>

<script language="javascript" type="text/javascript">
_spBodyOnLoadFunctionNames.push("attachCustomButton"); 

function attachCustomButton() { 
	var oAryTables = new Array();
	var oCustomButton = null;
	var oSeparator = null;
	var oNodeTemp = null;
	oCustomButton = document.getElementById("oCustomButton");
	oSeparator = document.getElementById("oSeparator");
	oAryTables = document.getElementsByTagName("table");
	for(var i = 0; i < oAryTables.length; i++) { 
		if(oAryTables[i].className == "ms-formtoolbar") { 
			oNodeTemp = 
				oAryTables[i].firstChild.firstChild.insertBefore(oSeparator.cloneNode(true), 
				oAryTables[i].firstChild.firstChild.firstChild.nextSibling); 
				oAryTables[i].firstChild.firstChild.insertBefore(oCustomButton.cloneNode(true), 
			oNodeTemp); 
		} 
	} 
} 
</script>

  4. thanks for this great Article Alex!!

    this may not be related, but when i was playing around with workflow email setup, I found out I couldnt use “multiple line of plain text” column as my lookup values for TO field in the email.

    I am pretty sure i was able to do this a couple of months ago as I had some workflows that actually looked up this type of columns for TO field.

    do u know anything about this??

    Thanks!

    1. Hi,
      You must first add the multiline text content to a “dynamic variable” in the workflow, then use the variable in the “to” field.

      Alexander

  5. hi, great solution. My question: is the email sent from your default email application like Outlook and so the from address would be my email address?

    1. Hi, No, it is sent by the workflow using the server’s default outgoing email as set up in SharePoint Central Administration.

      Alexander

    1. Hi,
      If you can send this type of message using a workflow you can do it, but i have no knowledge regarding “Lync instant messager” and cannot help you further.

      Alexander

  9. Good day sir. I have been searching for a solution that will do the following. Basically, I have a field in sharepoint that holds email addresses. I need to send the people in that field an email. So basically, mailto:everyone in this field. do you have something that does that I can do client side?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.