Moving CRM 2011 Footer Data to Left Navigation Pane

Moving CRM 2011 Footer Data to Left Navigation Pane

Would you like to save some space on your CRM 2011 form?

Sometimes we add too many fields to the Header and Footer of a given form to make it "easier" for the users to find this information quickly instead of having to navigate through the form trying to spot the information they are trying to find. The problem is sometimes this space is valuable, especially if you have a small monitor, and the space taken by the Header and Footer makes users have to scroll down a smaller window to find other data not available on the Header and Footer on the form itself.

For example, consider the image below, notice how the Footer includes 4 important fields that the administrator wants to show all the time to the users regardless of the section the users are navigating within the Account form:


 

What would it look like if we move those fields into the unused space at the bottom of the left navigation pane?

It would look just like this:


The space can now be used to show, for example, the list of contacts that work at this Account without having to scroll down on that small computer.

The process to configure this includes 8 steps:

(Note: The code you see below was written by Paul Way on Part 2 of his "CRM 2011 Form Customization" series available HERE)

  • Create a Web Resource named footerstyle with a Style Sheet (CSS) type:


     

  • Click on the "Text Editor" button and paste the following code:
.ms-crm-Form-Footer

{

display: none;

}

.ftLabel

{

color: #008;

font-style: italic;

padding-left: 4px;

}

.ftValue

{

padding: 2px 2px 8px 12px;

text-align: left;

}

.CustomFoot

{

padding: 2px

}

.leftFoot

{

margin-top: 10px;

margin-left: 2px;

border: solid 1px #008;

width: 99%;

}


  • Save and publish your changes then Navigate to the form editor of the entity you would like to affect. In this case we will use "Account".

     

  • Click on the "Form Properties" button and create a new library to add to the form:


     

  • Click on the "Text Editor" button and paste the following code:
function fileload(cssname) {

var reference = document.createElement("link")

reference.setAttribute("rel", "stylesheet")

reference.setAttribute("type", "text/css")

reference.setAttribute("href", cssname)

document.getElementsByTagName("head")[0].appendChild(reference)

}

 

function SpaceSaver() {

var table = document.getElementById('crmNavBar');

var row = table.insertRow(table.rows.length);

var foot = row.insertCell(0);

var text = document.createTextNode('Test');

foot.appendChild(text);

foot.id = 'CustomFoot';

document.getElementById('CustomFoot').innerHTML = "<table class='leftFoot' cellspacing='0' cellPadding='0'>" +

"<tr><td class='ftLabel'>Customer Since:</td></tr>" +

"<tr><td class='ftValue'>" + document.getElementById('footer_new_customersince_d').childNodes[0].innerHTML + "</td></tr>" +

"<tr><td class='ftLabel'>Primary Contact Info:</td></tr>" +

"<tr><td class='ftValue'>" + document.getElementById('footer_primarycontactid_d').childNodes[0].innerHTML +

"<br />" + document.getElementById('footer_telephone1_d').childNodes[0].innerHTML + "</td></tr>" +

"<tr><td class='ftLabel'>NPS Status:</td></tr>" +

"<tr><td class='ftValue'>" + document.getElementById('footer_new_npsstatus_d').childNodes[0].innerHTML + "</td></tr>" +

"</table>";

}

 

function FormFooter() {

fileload('/WebResources/new_footerstyle');

SpaceSaver();

}

  • On the code shown above, modify the red field names to reflect the fields present on your CRM Footer.

     

  • Create a new Event Handler to call the "FormFooter" function that moves the data from the Footer to the Left Navigation Pane:


     

  • Save, Publish and enjoy the new available space!



Microsoft Dynamics CRM Blog