29Aug

CRM 2011 Form Customization (Part 2)

A while back we looked at customizing the CRM 2011 header and footer.  I got some really positive feedback, but some people were tripped up.  Troubleshooting via blog is difficult, so whenever you have problems feel free to tweet me (@paul_way).  Today, I’m going to go into great detail of changing the form again, but this time we’re going to add a new twist.  Take a look at the before and after:

 

image

Before

 

 

image

After

 

 

Now some of you may be wondering what I changed.  First, we still have the light blue shading on the header.  Secondly, we moved the footer to the left navigation.  User’s may never request changing the color of the forms, but that was intended to show you that you could style the forms any which way you wanted.  Moving the footer to the left hand navigation is quite practical.  Some users may be faced with smaller screen resolutions and this will really free up space if  you intend to put a lot of information in the footer (especially if you are adding to the header already).

 

Step-by-Step

Setting up our Web Resources

The first thing you’ll need to do is create a solution.  I called mine “Form CSS Customization”.  In it we are going to add two web resources.

image

 

For our initial web resource we’ll create is a CSS file:

Take note of the name of  your CSS file, as we’ll use this in a minute.  The CSS file contains the shading on the header as well as some custom table formatting that we’ll use with our JavaScript file.

Now, let’s add our JavaScript file:

function load_css_file(filename) {
var fileref = document.createElement(“link”)
fileref.setAttribute(“rel”, “stylesheet”)
fileref.setAttribute(“type”, “text/css”)
fileref.setAttribute(“href”, filename)
document.getElementsByTagName(“head”)[0].appendChild(fileref)
}

function myFormOnLoad() {
load_css_file(‘/WebResources/cei_/css/case.css’); // don’t forget to change the file!
moveFooterToNav();
}

function moveFooterToNav() {

var tbl = document.getElementById(‘crmNavBar’);
var row = tbl.insertRow(tbl.rows.length);
var cFoot = row.insertCell(0);
var txt = document.createTextNode(‘testing…’);
cFoot.appendChild(txt);
cFoot.id = ‘myCustomNav’;
document.getElementById(‘myCustomNav’).innerHTML = “<table class=’myNavFoot’ cellspacing=’0′ cellPadding=’0′>” +
“<tr><td class=’ftLabel’>Created</td></tr>” +
“<tr><td class=’ftValue’>” + document.getElementById(‘footer_createdby_d’).childNodes[0].innerHTML +
“<br />” + document.getElementById(‘footer_createdon_d’).childNodes[0].innerHTML + “</td></tr>” +
“<tr><td class=’ftLabel’>Modified</td></tr>” +
“<tr><td class=’ftValue’>” + document.getElementById(‘footer_modifiedby_d’).childNodes[0].innerHTML +
“<br />” + document.getElementById(‘footer_modifiedon_d’).childNodes[0].innerHTML + “</td></tr>” +
“</table>”;

}

The JavaScript file is doing two important things.  First, it is injecting the CSS file into the header of the page.  This basically tells the browser to pickup the CSS file as if it was always part of the page.  After loading the CSS file, the JavaScript will append a table to the left area nav bar.  This table is completely custom and you can style it any which way you want.  Be careful using Xrm.Page.getAttribute() here, because even though the field is in the footer it may not be accessible to the Xrm object.  In my case, the attributes I’m using were not on any of my tabs.

Changing the JavaScript

You must change the “load_css_file” function to contain your specific web resource.  To find the web resource name, it’s easiest to look at the CSS web resource inside of CRM:

image

 

Configuring the Form

Now we need to go to the form we are customizing.  The first step is to add everything we want to onto the footer.

image

 

Next, we’ll edit the form properties.

image

When editing the Form Properties, we’ll need to add the JavaScript library and add our onLoad function to the Form OnLoad.  In our example, the function we’re using is called “myFormOnLoad”.

After this, we simply hit OK, Save, and Publish.

 

Reviewing the Finished Product

image

As you can see, we made subtle changes to improve the overall look and feel for the user.  We also provided a real-life situation where you may need to squeak out some additional room for the user.  Hope you enjoy!

Share this Story

About Paul Way

Born and raised in Greenville, SC. I'm a coder to the core. The only thing I love more than coding is my family and your epic comments.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

© Copyright 2012-2014, All Rights Reserved