Dynamics CRM 4 - Basic HTML Source code editor

Good day!

Here's a quick and easy fix for anyone who's struggled with using HTML with Dynamics CRM emails. 

This was born of my need to update the source code of the email body via JavaScript in order to achieve my "Insert email signature" Button.  I was digging around with the Email entity in IE8 Dev tools, and uncovered a potential holy grail of mouthwatering CRM deliciousness..........The  "InnerHTML".


How lovely this was.


Upon completion of the Button, I then realised that if you could write to this InnerHTML via JavaScript, you could surely pass in an existing email's 'source code' into a text area, tweak as required and put it back where it belongs.
And better still, Create a tasty Web based mail with full images, styles and tables using any web content tool and replace the existing mails "InnerHTML" with your source code.

And you know what? It works! - So here's my quick step by step instruction on how to get yourself a new Section of the CRM email entity to edit the source code of your CRM emails.



1) Navigate through  Settings-->Customize Entities-->Email.


2) Under Attributes, click NEW.


3) Create an attribute of type: nText, Display name =  HTML, maximum length =  50000

(the Name should auto-resolve to new_html, if your organisation used an alternate prefix, please note it down for coding later)


4) Save and close.

5) Under Forms and Views, select the main application form.


6) Under common tasks, click add a tab, name it "HTML" or "Source Code" etc.

7) Add a section, and add your  recently created attribute new_html.


8) Change the properties of the attribute, and expand the area to fill the page. (see right)








Now for the 10000 pages of code...


9) Under form properties, paster the following into the OnLoad event and Enable the event, save and close

//Copy existing Inner HTML and replicates as editable test in New HTML Tab


crmForm.all.new_html.DataValue = document.all['descriptionIFrame'].contentWindow.document.body.innerHTML


10) Double click the description attribute, Select the event tab and paste the same code above into the OnChange - enable the event.
11) Navigate to your new tab on the main form, and double click you nText attribute to open it's properties
12) Paste the following code under the OnChange of the new_html attribute, enable the event.

 //Takes the changes made to the new HTLM tab and applies to the CRM Email Body


document.all['descriptionIFrame'].contentWindow.document.body.innerHTML = crmForm.all.new_html.DataValue

13)  PUBLISH YOUR CHANGES

Now when you open a new email, you will have an an additional tab to control the HTLM content of your emails, this of course opens many doors to some bespoke formatting that cannot be done with the out of box features.

Ps! - If you're playing with images, make sure you use absolute references to hosted files. otherwise, the email that appears in your preview may trick you to thinking that the recipient will also see the images, and they wont.

Javascript Button Making, with Style!

First Blog ever, HIGH FIVE!


Working with Dynamics CRM, you’ll inevitably need to add bespoke controls to custom or system entities in order to manipulate the data contained on a form. Here’s a example of one custom button I use which has a function of Inserting a generic signature once clicked.

Being fairly new to JavaScript, my initial attempts to add functionality like this to CRM 4 was somewhat ... "sickening" 

but after numerous attempts using what I've found on the CRM community forums, I've think I’ve now got the most efficient combination of the code so far, but more importantly, they now look like REAL buttons. 

Here’s my most recent method and coding for this.

First the basics

* Create a new attribute of type nvarchar (named Button1 to use in the code below)

* Add the field to your form wherever you want the button to be located.


The Code below can paste directly into the Form’s OnLoad event (making sure to tick “Event is enabled”) This converts the attribute to a functioning button. Rather than use a standard "light blue" background this variation ensures that it is styled in such a way that fits the rest of Dynamics CRM 4's UI.


I'm still new to Javascript, so forgive me if some of my habits aren't common place

The first section of script is the "ButtonScript" function will transform the nvarchar attribute to a Stylish CRM button with pretty gradients. Of course, you can update fields such as FontSize, FontFamily etc. however I find this combination gives best results.


The final few lines of "buttonScript" attach the preceeding events required for the nvarchar attribute to perform as a button (otherwise you'll get a pretty, yet useless, rectangle)

function buttonstyle(fieldname, buttontext, buttonwidth,clickevent)

            {

            functiontocall=clickevent;

            crmForm.all[fieldname].DataValue = buttontext;

            crmForm.all[fieldname].style.borderRight="#3366cc 1px solid";

            crmForm.all[fieldname].style.paddingRight="5px";

            crmForm.all[fieldname].style.borderTop="#3366cc 1px solid";

            crmForm.all[fieldname].style.paddingLeft="5px";

            crmForm.all[fieldname].style.fontSize="11px";
 //This is the important line below - it gives you the smooth gradient (rather than a blue button with no class)

            crmForm.all[fieldname].style.backgroundImage="url(/_imgs/btn_rest.gif)";

            crmForm.all[fieldname].style.borderLeft="#3366cc 1px solid";

            crmForm.all[fieldname].style.width=buttonwidth;

            crmForm.all[fieldname].style.cursor="pointer";

            crmForm.all[fieldname].style.lineHeight="18px";

            crmForm.all[fieldname].style.borderBottom="#3366cc 1px solid";

            crmForm.all[fieldname].style.backgroundRepeat="repeat-x";      

            crmForm.all[fieldname].style.fontFamily="Tahoma";

            crmForm.all[fieldname].style.height="20px";

            crmForm.all[fieldname].style.backgroundColor="#cee7ff";

            crmForm.all[fieldname].style.textAlign="center";

            crmForm.all[fieldname].style.overflow="hidden";

            crmForm.all[fieldname].attachEvent("onmousedown",push_button);

            crmForm.all[fieldname].attachEvent("onmouseup",release_button);

            crmForm.all[fieldname].attachEvent("onclick",functiontocall);

            crmForm.all[fieldname].attachEvent("onmouseover",over_button);

            crmForm.all[fieldname].attachEvent("onmouseleave",off_button);

            }

           

//Allignment Shift on Click, gives 3D effect        

//ON

function push_button()

            {

            window.event.srcElement.style.marginLeft="1px";

            window.event.srcElement.style.marginTop="1px";

            }

//OFF

function release_button()

            {

            window.event.srcElement.style.marginLeft="0px";

            window.event.srcElement.style.marginTop="0px";

            }

//Mouse over effect, changes image.

//ON

function over_button()

            {

            window.event.srcElement.style.backgroundImage="url(/_imgs/btn_on_lookup.gif')";

            }

//OFF

function off_button()

            {

            window.event.srcElement.style.backgroundImage="url(/_imgs/btn_rest.gif)";

            }

           

//Give the button something to do - e.g Alert something

function button1press() 

            {

            alert('You have Pushed my button');

            }

// Apply to Attribute

buttonstyle('button1','My buttons text','120px',Button1press);

In addition, If you're adding more buttons in the future, it's a simple matter of creating and publishing the new field like before, but now all you need to do is add your extra functions ie, 


function button2press() {'Do something'}
function butto3press() {'Do something else'}
...


and call the same "ButtonStyle"  function to each, ie


buttonstyle('button2','My Second button text','120px',Button2press);
buttonstyle('button3','My Third button text','120px',Button3press);


your buttons will maintain consistency, which makes the UI easier to work with once you start adding more and more. Also, Any updates to the main styling will apply to all buttons on the form (Very handy when it comes to tweaking your work!)


All Comments welcome, but be nice! I'm new to this.
Craig Hamer