Tuesday, December 1, 2009

HTML WYSIWYG editors in CRM Forms: A non-intrusive approach

(Transforming a text area field of a Dynamics CRM form into a HTML editor, using a non-intrusive way)


You might have already came across the need to have some of your text fields in the CRM forms support HTML code. There are several solutions out there on how to handle this point, but in this article I’d like to focus on the approach I prefer: the most non-intrusive approach.

The main idea is to define my CRM text fields to be displayed as text areas (from the entity’s customizations section) and at runtime - on form load - have some of these fields (the ones which need to store HTML strings) get decorated with a WYSIWYG HTML editor. Consequently, no server side code or other special handling of these fields would be required, but, unlike other solutions you might find, no further client-side code to be executed on form save event is required either.

Here are the steps to implement it:

1. Take a JS-based HMTL editor with the capability to render itself around an existing text area control (instead of letting the control creating a new element in the document).
I used for this purpose the openWYSIWYG editor.
Download the code and include a reference to the editor's JS file from your Global.js file.

2. Have the OnLoad events of the forms execute the initiation code for each text area which needs to be transformed into HTML editors.

That's it.


Here’s a screenshot of this implementation in production:
















Let me know if you find this useful.

A+

2 comments:

  1. Hi Adrian,

    Thanks for taking the time to post and share. Looks great, and I'm excited to implment. I'm having a bit of trouble with this implementation (WYSIWYG is not defined). Any chance you could share that small bit of your global.js and your onload event? Thanks!

    ReplyDelete
  2. I have a custom function placed in the form.crm.htc file; this function is called from your form’s OnLoad event, thus it becomes a global feature for all CRM forms, not only for the current one.

    function initHTMLControls(/* Array of forms’ controls to be decorated */)
    {
    ...
    var js = window.document.createElement('script');
    var hd = window.document.getElementsByTagName('head')[0];
    js.type = 'text/javascript'; hd.appendChild(js);
    js.src = '/_common/scripts/openwysiwyg/wysiwyg.js';
    ...
    //Put here the code which decorates each control in the array provided as parameter
    }

    ReplyDelete