web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Blogs / Alexander Development - Microsoft Dynamics CRM ... / A Better Dynamics CRM E-mai...

A Better Dynamics CRM E-mail Editor With TinyMCE

Views (29577)
lucasalexander Profile Picture lucasalexander 886

I think most people would agree the e-mail editing functionality in the Dynamics CRM web UI leaves a lot to be desired. One of the most embarrassing moments I experienced on a recent project was when I had to explain to the client the convoluted process that would need to be used to add a corporate logo to outbound e-mails. 

With that in mind, I decided to make a better e-mail editing interface. My original plan was to try to remove the existing e-mail toolbar from the e-mail form and replace it with something like the TinyMCE toolbar using only JavaScript. After experimenting with some different approaches, I realized I probably could make this work, but ultimately I felt the solution would be too convoluted. In addition to the technical obstacles to replacing the existing e-mail toolbar, if it were removed, there wouldn't be any way for users to access the "insert article" or "insert template" functions.

Once I decided against replacing the stock toolbar, I realized opening a popup window with a more sophisticated e-mail editing control would be a satisfactory alternative. Basically my approach has two parts:

  1. Use JavaScript to open a popup window with the e-mail text displayed in a TinyMCE-enabled textarea.
  2. Use JavaScript to write the e-mail body back to the CRM e-mail description field and close the popup window. 

To keep things simple, I use a single web resource embedded in the CRM e-mail form that opens and writes a popup window entirely with JavaScript so there is only a single web resource to add to the CRM solution. Also, I am accessing the TinyMCE script from the CacheFly CDN. If you didn't want to use a CDN, obviously you'd need to host the script and supporting resources yourself.

Here's the script that makes the magic happen:

function openEditWindow() {
    //set tinymce options
    var tinymcepluginlist = '"advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table contextmenu paste"';
    var tinymcetoolbar = '"undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image preview"';
    
    //get the content of the e-mail description field
    var emailBody = parent.Xrm.Page.getAttribute("description").getValue();
    
    //build the content of the editor popup window
    var editContent = '<html>\n<head>';
    editContent += '<title>Lucas Alexander\'s Better CRM E-mail Editor</title>\n';
    //this loads the tinymce script from the cachefly cdn. you can host it somewhere else.
    editContent += '<scr'+'ipt src="//tinymce.cachefly.net/4.0/tinymce.min.js"></scr'+'ipt>';
    editContent += '<scr'+'ipt>\n';
    //this function is used to update the crm e-mail body field and close the editor popup
    editContent += 'function updateEmailForm() {\n';
    editContent += 'window.opener.parent.Xrm.Page.getAttribute("description").setValue(tinymce.get("editbox").getContent());\n';
    editContent += 'window.opener.parent.Xrm.Page.data.entity.attributes.get("description").controls.get(0).setFocus();\n';
    editContent += 'this.window.close();\n';
    editContent += '}';
    editContent += '</scr'+'ipt>';
    editContent += '</head>\n<body style="margin:0px 0px 0px 0px;">';
    //here we set the textarea content equal to the html from the e-mail description field
    editContent += '<textarea id="editbox" style="width: 800px; height: 500px;">'+emailBody+'</textarea>';
    editContent += '<br /><button onclick="updateEmailForm();">Update e-mail form and close</button>';
    editContent += '<scr'+'ipt>\n';
    //initialize the tinymce functionality
    editContent += 'tinymce.init({selector:"textarea",plugins: ['+tinymcepluginlist+'], toolbar:'+tinymcetoolbar+' })\n';
    editContent += '</scr'+'ipt>';
    editContent += '</body></html>';
    
    //open the editor popup window
    var editWindow = window.open("","editorwindow","height=700,width=800,scrollbars=yes,resizable=yes");
    
    //write the editContent string to the editor popup
    editWindow.document.write(editContent);
    
    //close the document stream
    editWindow.document.close();
}

Here's a picture of the e-mail editor this script creates:

E-mail editor

Here is a complete HTML page you can upload to your CRM solution: crmemaileditor.htm (2.59 kb). All you need to do after that is add it to your e-mail entity form, and then you'll be set. This is what my e-mail form with the editor-launching button looks like:

CRM e-mail form

Happy e-mailing!


This was originally posted here.

Comments

*This post is locked for comments