Hi All,
Recently one of client wants some enhancement to existing 'Send Email' screen. They want some functionalities which standard email editor does not support and even salesforce Rich Text Editor also does not support.
I did some research and found that we can extend standard salesforce Rich Text Editor in many ways. One of the enhancement which I did, I am going to show you all.
Client wants a way to fetch all related contacts and opportunities from current account in the email editor on the place he wants and editable and also wants to control as many times as he needed. To achieve this task, I came up with the custom button solution which can be embedded into standard Rich Text Area of salesforce and can attach some event handlers to them.
I created one component called "AddButtonToolbar". In this component, for demo purpose i have created two custom buttons for showContacts and showOpportunities. But you can make as many as you want. Here is the basic configuration you can do:
<apex:component>
<apex:attribute name="accountId" type="string" description="passed account id"/>
<script src="{!URLFOR($Resource.ckeditor,'ckeditor/jquery-1.4.2.min.js')}"></script>
<script>
//Event Handler for ShowContacts button
//Fetch and prepares the contact table in editor
function showContacts(){
// invoke your sfdc method here
}
//Event Handler for ShowOpportunities button
//Fetch and show the opportunities in RTE
function showOpportunities(){
// invoke your sfdc method here
}
/****
Custom buttons configuration
Provide name, label, command (js function), and Image for the button
*/
var config = {
"Buttons": [
{
"Name" : "Contacts",
"Label" : "Show Contacts",
"Command": "showContacts",
"Image": "{!URLFOR($Resource.ckeditor,'ckeditor/plugins/timestamp/images/16-cube-green.png')}"
},
{"Name" : "Opportunities",
"Label" : "Show Opportunities",
"Command": "showOpportunities",
"Image": "{!URLFOR($Resource.ckeditor,'ckeditor/plugins/timestamp/images/contact.png')}"
}
]
}
function initialize(){
for(var i=0; i<config.Buttons.length;i++){
addButton(config.Buttons[i].Name,
config.Buttons[i].Image,
config.Buttons[i].Command,
config.Buttons[i].Label);
}
}
function addButton(name,image,command,label){
$('#cke_21').append('<span class="cke_toolbar_start"></span>'+
'<span role="presentation" class="cke_toolgroup">'+
'<span class="cke_button">'+
'<a onclick="'+command+'();" onblur="this.style.cssText = this.style.cssText;" role="button" hidefocus="true" title="'+label+'" class="cke_button_outdent cke_disabled" id="'+name+'" aria-disabled="true">'+
'<span class="cke_icon" style="background-image:url('+image+');background-position:center;"> </span>'+
'<span class="cke_label" id="'+name+'">'+label+'</span>'+
'</a>'+
'</span>'+
'</span>'+
'<span class="cke_toolbar_end"></span>'
);
}
var defaultFunc = window.onload;
window.onload = function() {
if(defaultFunc)
defaultFunc ();
setTimeout("initialize()",1000);
}
</script>
</apex:component>
Line #21-#35 shows configuration option for your buttons.
initialize() method starts creating the buttons.
Here is a working demo for above functionality:
http://labsprojects-developer-edition.ap1.force.com/ExtendRTE?id=001900000054UZ7
You will see two buttons on right side. Click on those buttons to see things in action.
Additionaliy you can put your email address and try to send email to your account to see how email will look.
Mail me for full code as always :)
Thanks
Aslam Bari
