Monthly Archives: August 2011

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!

23Aug

CRM 2011–Changing the Form Header and Footer Colors

CRM 2011 has a beautiful default theme.  Microsoft has already organized the CRM 2011 folder structure to support themes, but currently only supplies the Silver theme.  Office 2010 on the other hand contains Silver, Blue, and Black.

themes

 

Today we aren’t going to modify the entire theme, but modify the form header and footer.  The code I’m going to include is a small gradient, but you could choose a solid background or any color you’d like.  I was going to use a Clemson, I mean Customer Effective, Orange, but instead focused more on the blue theme look.

 

Before

before

 

After

after

 

Adding our CSS Web Resource

Granted this change was very minor, but you could do about anything you wanted to with it.  To accomplish this basic change you must first upload a CSS web resource (I named mine new_header.css) with the following styling:

.ms-crm-Form-HeaderContainer{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffB3CAEC, endColorstr=#fff6f8faE);
}

.ms-crm-Form-Footer{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffB3CAEC, endColorstr=#fff6f8faE);
background-image: none;
}

Note: The filter property is an IE specific CSS attribute.  It isn’t supported in any other browsers (they will just ignore it), but Internet Explorer 7+ supports it just fine.

 

Modifying the OnLoad

Our next step is to modify the onLoad to inject the CSS file.  We’ll do this by adding the following JavaScript to a web resource:

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/new_header.css’);
}

 

Changing the Form Properties

Finally we need to change the form properties to include this JavaScript web resource in the library and add our “myFormOnLoad” function to the OnLoad Event for the Form:

image

 

Conclusion

After going through this blog, hopefully you will see how easy it is to change the form header, footer, or anything else.  By embedding a CSS file, our ideas are our only limits.  Hope you enjoy!

© Copyright 2012-2014, All Rights Reserved