Editable Email Popup Window – Salesforce Service Console

Editable Email Popup Window – Salesforce Service Console

Popup window is a very popular way to edit or add comments or edit records in the current page. In the business world the necessity of a popup window has increased a lot over the years. My client was also interested in a popup window to edit the selected email template from the salesforce service console (AnswerCustomer).

Firstly I tried using the JQuery libraries for the same using Lightboxme, Colorbox, boxy and bpopup. I recommend you all to use these libraries if you just want a popup window to display a piece of information in a stylish way in your page.

As the requirement is an editable email template window, I placed a Preview link in the Service Console Page (AnswerCustomer page),

The code for the above page is very simple,

<apex:page standardController="Case" ><apex:includeScript value="{!URLFOR($Resource.JQuery, 'jquery-ui-1.11.2/external/jquery/jquery.js')}" />
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){

var newWin=null;

$j('#previewlinkid').click(function(){

newWin=window.open('/apex/EmailTemplatePopup', 'preview', 'width=600,height=800,scrollbars=yes,resizable=yes,toolbar=no,status=no'); if(window.focus){
newWin.focus();
}
return false;
});

});
</script>

<apex:form id="theform">
<div align="right">
<font style="font-family:arial;font-size:10px"><a href="#" id="previewlinkid" title="Preview">Preview</a></font>
</div>
</apex:form>

<apex:emailPublisher entityId="{!case.id}" toAddresses="{!case.contact.email}" emailBodyFormat="textAndHTML" bccVisibility="editable" verticalResize="true" showTemplates="true" width="100%" />
</apex:page>

I have written a new Visualforce page (EmailTemplatePopup) for the Popup window. In the EmailTemplatePopup page, I am calling the parent window component to access the html content of it. When I select an Email Template and click on the Preview link as shown in the AnswerCustomer page, it opens the window as shown below,

The code for the EmailTemplatePopup is,

<apex:page sidebar="false" showHeader="false">         

<apex:includeScript value="{!URLFOR($Resource.JQuery, 'jquery-ui-1.11.2/external/jquery/jquery.js')}"  /> 

<script type="text/javascript">         

var $j = jQuery.noConflict();                  

$j(document).ready(function(){ 

   //OnLoad copy the content from parent window to child window (Popup)                       

   $j("[id*='emailtextval']").text(window.opener.$j('#cke_1_contents').find('iframe').contents().find('body').html());

   //Save and Close link action             

   $j('#copytoid').click(function(){ 

  //use console.log to display the content in the debug log                 

   console.log('^^^ : '+$j('#cke_1_contents').find('iframe').contents().find('body').html());

   //Copy the html content from Popup window and replace it in Parent window

   window.opener.$j('#cke_1_contents').find('iframe').contents().find('body').html( $j('#cke_1_contents').find('iframe').contents().find('body').html());                  

   window.close(); //Close the Window on Save and Close                 

   return false;              

 });

});          

</script>  

<apex:form id="emailform">         

<div align="right">             

<font style="font-family:arial;font-size:10px"><a href="#" id="copytoid" >Save and Close</a></font>         

</div>         

<apex:inputTextarea id="emailtextval" richText="true" cols="500" rows="100" title="Preview"/>     

</apex:form>      

</apex:page>

Those who are very familiar in JQuery will easily understand the aforementioned code easily. I recommend others to read the basic JQuery before looking into the aforementioned code.

On page load, I used the following line to populate the email template html from parent window,

$j("[id*='emailtextval']").text(window.opener.$j('#cke_1_contents').find('iframe').contents().find('body').html());

I am finding the element by using $j("[id*='emailtextval']") and then using the JQuery TEXT() method (here) to replace the contents from the parent window component. In the service console Email page, Salesforce is using Rich Text Area to populate the HTML content inside. If you search all the Rich Text Area component Id in Salesforce, you will get cke_1_contents. So, in your page you don’t have to worry about finding the id.

In the popup window (child window), I used the Save and Close link to populate the content back to the original page. Here, I have applied a reverse logic and replaced the HTML content in the parent window component using JQuery HTML() method (here).

Please comment below for more queries.

Thanks.