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:
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
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
24 comments:
Again Nice Work :)
Nice approach!!
Good thought...
Aslam, you are just mind blowing....
Hi Aslam , Great post as always !!
Could you please provide me code base , so that I could try it out in my org
Email-ID : practicingsf@gmail.com
Hi Aslam great job looking nice
can u share your code and static resource to me ,i will practice in my dev
Email-ID :avenkateswarlu7@gmail.com
Regards
venkatesh
Awesome one approach sir....
Hi Aslam its very nice.
can u share your code on durga.sfcloud@gmail.com
Hi Aslam ,
Great Job !!.
Could you please share the code on nirdeshk1988@gmail.com
Can you please send me code for the same on sumi.shingavi@gmail.com
Can you please send me code for the same on sunilkumartaruvu@gmail.com
Id Mubark ho
pls send the code to rocksrastogi5@gmail.com
Hi Aslam,
Great post.
Please send the code to below email id.
reachheman@gmail.com
Thanks,
NHK
awesome-sauce
Hi Aslam , Great post as always !!
Could you please provide me code base , so that I could try it out in my org
Email-ID : aks.ajeet@gmail.com
Hi Aslam,
Please send the code to below email id.
Email-Id : rashi.garg@metacube.com
Thanks,
Rashi
Hi Aslam,
Great post as always !!
Could you please provide me code base , so that I could try it out in my org
Email-ID: manoharallasfdc@gmail.com
Regards,
Manohar
Hi Aslam great job looking nice
can u share your code and related components to me .
Email-ID : subhu268@gmail.com
Hi Aslam great job looking nice
can u share your code and related components to me .
Email-ID : vtrivedi270@gmail.com
Hello, Is this possible to add Button on RichText Body..?
Really Good blog post.provided a helpful information aboute extended salesforce rich text editor .keep updating...
Digital marketing company in Chennai
Interesting blog post.This blog shows that you have a great future as a content writer.waiting for more updates...
Vmware Training in Chennai
Web Designing Training in Chennai
AWS Training in Chennai
Linux Training in Chennai
Microsoft Azure Training in Chennai
Hi Aslam ,
can u share your code and related components to me .
Email-ID : checksfdc@gmail.com
Post a Comment