Hide Form Left Navigation JavaScript R8 Dynamics CRM 2011

Paul Nieuwelaar, 26 July 2012

Before CRM 2011 R8 beta was introduced, if you ever needed to hide the Form Navigation Pane using javaScript, the following 2 lines of code would allow you to do this by first hiding the crmNavBar element, then modifying the remaining form element to span over both columns of the table.

USED BEFORE R8 BETA:

//hide the left nav, and fully expand the form
document.getElementById("crmNavBar").parentElement.style.display = "none";
document.getElementById("tdAreas").parentElement.parentElement.parentElement.parentElement.colSpan = 2; 

If you needed to display the Navigation Pane again using JavaScript, you could modify this slightly to display the crmNavBar element, and set the form back to 1 column:

//display the left nav, and set the form back to 1 column
document.getElementById("crmNavBar").parentElement.style.display = "";
document.getElementById("tdAreas").parentElement.parentElement.parentElement.parentElement.colSpan = 1; 

While this works well in pre R8 beta releases of CRM 2011, when we come to using this in R8 beta it no longer functions correctly. However as this is unsupported, that was always likely to happen.

As you can see, when we try and use this code on R8 beta using any browser, the crmNavBar is removed as expected, but the remaining form element is not expanding to occupy the full page width.

Fortunately, using IE Dev tools, and inspecting the new form structure, I was able to find out why the second line of code was not working. It seems the form is now laid out using DIVs instead of Tables, so the colSpan does not work.

Here is the updated code that can be used to hide the Navigation Pane in R8 beta. Please note this is still unsupported, but works cross-browser on R8 beta.

USED FOR R8 BETA:

//hide the left nav, and fully expand the form
document.getElementById("crmNavBar").parentElement.style.display = "none";
document.getElementById("tdAreas").parentElement.parentElement.parentElement.style.left = "0px"; 

To display the Navigation Pane again using JavaScript you can now use:

//display the left nav, and set the form back to normal width
document.getElementById("crmNavBar").parentElement.style.display = "";
document.getElementById("tdAreas").parentElement.parentElement.parentElement.style.left = "185px"; 

After updating the code, we can now see the Navigation Pane is being hidden correctly, and the remaining form element is expanded across all available space.