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.
