Send Emails Through SControls
Have you ever wanted to send emails through S-Controls in Force.com? Now you can leverage the Spring '07 Email API to send emails from within S-Controls! The sample code below, shows a UI which will allow you to send emails via an S-Control.
To use this sample of the Email API, you will need access to the AJAX Toolkit 9.0
Features
- Send Text or HTML emails (The API also supports multi-part emails, both text and HTML)
- Set the importance of the email
- Verify that the subject line is not blank
- Enter your text or HTML code you want to send out
- Choose if you want to include your user signature from Force.com
How to setup
- Your own Application
- Create a new Custom S-Control
- Paste the sample code into the S-Control
- Create a new Custom Tab of type "Web Tab"
- Create a new App or add it to an existing App
- Inline S-Control
- Create the new Custom S-Control
- Select the object you want to add the inline S-Control on
- Edit the Page Layout
- Add the custom S-Control on the Page Layout
- Save the Page Layout
Sample Email UI and Code
Sample Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html> <head> <script src="/soap/ajax/9.0/connection.js" type="text/javascript"></script>
<script>
function startPage() {
var user = sforce.connection.getUserInfo().userEmail;
document.getElementById('reply_to').value = user;
}
Takes the users email address and inserts it as the reply-to address, can be overridden by the user.
When the send button is clicked the setupPage function is called
function setupPage() {
// Called to send email
var request = new sforce.SingleEmailMessage();
// create variable to hold addresses
var addr= new sforce.StringBuffer();
var cc= new sforce.StringBuffer();
var bcc= new sforce.StringBuffer();
addr.append(document.getElementById("to_address").value);
cc.append(document.getElementById("cc_to").value);
bcc.append(document.getElementById("bcc_to").value);
Initiates a new SingleEmailMessage object, used to hold all the email related data.
Creates and adds the to addresses, cc addresses and bcc addresses.
Below a check is performed to validate if the user signature in Force.com should be added to he email.
if(document.getElementById("useSignature").checked)
{request.useSignature = true;
}
else {
request.useSignature = false;
}
// Email Priority is being set based on what the user selects
request.emailPriority = document.getElementById("emailPriority").value;
// Reply to email address of the email being set
request.replyTo = document.getElementById("reply_to").value;
If the subject line is blank, an alert is shown to the user.
if (document.getElementById("email_subject").value!="")
{
request.subject = document.getElementById("email_subject").value;
}
else {
alert("your subject is empty, please enter a subject line or it will appear blank");
}
Checks what type of content you want to send, either text or HTML content. In this example we will only send either text or html; but the Email API support multi-part and you could add both text and html into the email.
if (document.getElementById("contentText").checked)
{ request.plainTextBody=document.getElementById("email_body").value; }
if (document.getElementById("contentHtml").checked) { request.htmlBody=document.getElementById("email_body").value; }
var ToArray = new Array;
ToArray = addr.toString().split(",");
var CcArray = new Array;
CcArray = cc.toString().split(",");
var BccArray = new Array;
BccArray = bcc.toString().split(",");
request.toAddresses = ToArray;
if (document.getElementById("cc_to").value != "") {request.ccAddresses = CcArray; }
if (document.getElementById("bcc_to").value != "") {request.bccAddresses = BccArray; }
Takes all the input addresses (to, cc & bcc) and adds them to an Array, which can be passed to the API.
Below the call to send the email is performed with the sendEmail() function. The result for the call is return in the layoutResults object, which can then be displayed to the users.
var sendMailRes = sforce.connection.sendEmail([request], layoutResults); }
Displays the return message to the user; if the email has been sent successfully the message "Email has been sent!" will be displayed to the user
If there were any errors; the error messages from the API will be displayed to the user.
function layoutResults(sendEmailResult) {
var textNode;
if (sendEmailResult.length > 0) {
if (sendEmailResult[0].getBoolean("success")) {
document.getElementById("output").innerHTML = "Email has been sent!";}
else { document.getElementById("output").innerHTML = sendEmailResult[0].errors ;}}
else { document.getElementById("output").innerHTML = "Didn't get return data."; }
}
</script>
Cascading style sheet to format the fonts, screen and look and feel of the UI.
<style type="text/css">
<!--
.error {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: A2C2EE;
}
.style12 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
.style6 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; height: 16px; width: 400px;}
.style7 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px; height: 150px;width: 400px;}
.style8 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;}
.button {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;font-style: italic;font-weight: normal; background-color: C3DAF9;height: 29px; width: 53px;}
-->
</style>
</head>
HTML body of the page is shown, when the page is fully loaded the startPage() javascript function will be called.
<body onLoad="startPage()">
<table width="600" border="0" cellspacing="1" cellpadding="1">
<tr>
<td><div id="output" class="error"></div> </td>
</tr>
</table>
<form name="send_email" method="post" action="javascript:setupPage()">
<table width="600" border="0" cellpadding="2" cellspacing="2" bgcolor="#C3DAF9">
<tr >
<td align="right" height="50" valign="middle"><input name="Send" type="submit" class="button" id="Send" value="Send!"></td>
<td align="left" height="50" valign="middle" >
</td>
</tr>
<tr>
<td width="100"><div align="right"><span class="style12">To:</span></div></td>
<td width="486"><span class="style6">
<label>
<input name="to" type="text" class="style6" id="to_address">
</label>
</span></td>
</tr>
<tr>
<td><div align="right"><span class="style12">cc:</span></div></td>
<td><span class="style6">
<input name="cc_to" id="cc_to" type="text" class="style6">
</span></td>
</tr>
<tr>
<td class="style12"><div align="right">Bcc</div></td>
<td><span class="style6">
<input name="bcc_to" id="bcc_to" type="text" class="style6">
</span></td>
</tr>
<tr>
<td><div align="right"><span class="style12">Reply-to:</span></div></td>
<td><span class="style6">
<input name="reply_to" type="text" class="style6" id="reply_to">
</span></td>
</tr>
<tr>
<td class="style12"><div align="right">Importance</div></td>
<td><select name="emailPriority" id="emailPriority" class="style12">
<option value="Highest">Highest</option>
<option value="High">High</option>
<option value="Normal" selected="selected">Normal</option>
<option value="Low">Low</option>
<option value="Lowest">Lowest</option>
</select> </td>
</tr>
<tr>
<td><div align="right"><span class="style12">Subject</span></div></td>
<td><span class="style6">
<input name="subject" type="text" class="style6" id="email_subject">
</span></td>
</tr>
<tr>
<td><div align="right"></div></td>
<td class="style12">
<input name="contentType" type="radio" id="contentText" value="text" checked>Text
<input name="contentType" type="radio" id="contentHtml" value="html">HTML </td>
</tr>
<tr>
<td><div align="right"><span class="style12">Body (text) </span></div></td>
<td><span class="style6">
<textarea name="email_body" cols="20" rows="15" class="style7" id="email_body"></textarea>
</span></td>
</tr>
<tr>
<td><div align="right"><span class="style12">Use Signature </span></div></td>
<td><input name="useSignature" type="checkbox" class="style8" id="useSignature" value="checkbox"></td>
</tr>
</table>
</form>
</body>
</html>