locked
Hiding status bar on form and surrounding areas RRS feed

  • Question

  • Hi all,

    I would like to remove that row where it shows whether on or not a record is Active or Inactive. Also, I want to be able to remove all the surrounding dark blue areas around the tab.

    How do I achieve this through javascipt?

    Thanks

    Friday, June 18, 2010 1:28 AM

Answers

  • I managed to get this to work and thought I would share it with you:

    function getElementsByClassName(classname, doc, node) {
        if(!node) node = document.getElementsByTagName("body")[0];
        var a = []; var re = new RegExp('\\b' + classname + '\\b');
        var els = node.getElementsByTagName("*");
        for (var i = 0, j = els.length; i < j; i++)
            if (re.test(els[i].className)) a.push(els[i]);
        return a;
    }

    function hideArea()

    {

    var  areaFormDiv = document.getElementById('areaForm');  
            var mainTable = areaFormDiv.parentElement.parentElement.parentElement.parentElement;  
             mainTable.deleteRow(0); // delete top nagivation pane
                      
               var iDoc = '';
              
               //Hide left navigation pane
                document.all.crmNavBar.parentElement.style.display = "none"; //hide nav bar
                document.all.tdAreas.colSpan = 2;
                document.all.crmTabBar.style.display = "none"; // hide tab bar

                
               var elements2 = getElementsByClassName('ms-crm-Form-Area', iDoc);
               for (var q = 0; q < elements2.length; q++)
               {
                    elements2[q].style.border = 'none';
                    elements2[q].removeAttribute('cellPadding');
               }
               
               

               //hide status bar
               var elements3 = getElementsByClassName('ms-crm-Form-StatusBar', iDoc); 
               for (var s = 0; s < elements3.length; s++)
               {
                    elements3[s].style.display = 'none';
                    elements3[s].removeAttribute('cellPadding');
               }
              
                // Hide the unwanted surrounding area on the bottom of the page
               var rowtodelete = elements3[0].parentElement;
               rowtodelete.style.display = "none";

    }

    • Marked as answer by Stanley_Lai Friday, August 6, 2010 1:01 AM
    Friday, August 6, 2010 1:00 AM

All replies

  • You should use the IE Dev toolbar, which comes with IE8 (just hit F12).  If you don't have IE8 then you can download it here .  Using IE Dev toolbar you can look at the html for the CRM form and then figure out the IDs of the html elements.  Then with javascript you can hide these elements based on their IDs. 
    Blake Scarlavai - http://mscrmdev.blogspot.com/ - Sonoma Partners - http://www.sonomapartners.com/
    Friday, June 18, 2010 2:05 AM
  • I know about the Dev toolbar and I am already using it.

    I can successfully hide the status bar, the top menu bar and the laft navigation pane but I cannot hide the surrounding areas around the tab. I have read somewhere that I need to delete some cells.

    Here is my code:

            var  areaFormDiv = document.getElementById('areaForm');  
            var mainTable = areaFormDiv.parentElement.parentElement.parentElement.parentElement;  
             mainTable.deleteRow(0); // delete top nagivation pane
            
             mainTable.rows[0].deleteCell(0); // delete left navigation pane   
             mainTable.rows[0].cells[0].colSpan = 2; // span the cell to the entire row
            
               var iDoc = '';
               var elements2 = getElementsByClassName('ms-crm-Form-Area', iDoc);
               for (var q = 0; q < elements2.length; q++)
               {
                    elements2[q].style.border = 'none';
                    elements2[q].removeAttribute('cellPadding');
               }
               
               
               var elements3 = getElementsByClassName('ms-crm-Form-StatusBar', iDoc);
               for (var s = 0; s < elements3.length; s++)
               {
                    elements3[s].style.display = 'none';
                    elements3[s].removeAttribute('cellPadding');
               }

          function getElementsByClassName(classname, doc, node)

         {
          if(!node) node = document.getElementsByTagName("body")[0];
          var a = []; var re = new RegExp('\\b' + classname + '\\b');
         var els = node.getElementsByTagName("*");
         for (var i = 0, j = els.length; i < j; i++)
            if (re.test(els[i].className)) a.push(els[i]);
          return a;
           }

    The reason I'm doing this is so that I can hide all the unwanted areas and show only the the tab and fields of the form in an IFRAME.

    Thanks

    Friday, June 18, 2010 6:02 AM
  • By the way this code works in version 3.

    Here is my code:

     

    document.body.style.backgroundColor =

    "#eef0f6"//self.parent.document.body.style.backgroundColor;

     

    var divElems = document.getElementsByTagName("DIV");

     

     

    for (var i = 0; i < divElems.length; i++)

    {

     

    if(divElems[i].className == "tab" )

    {

    divElems[i].style.border =

    'none';

    divElems[i].style.padding =

    '0px';

    }

     

    if(divElems[i].id == "areaForm" )

    {

    divElems[i].childNodes[0].rows(0).cells(1).style.display =

    'none';//deleteCell(1);

    }

    }

     

    var tableElems = document.getElementsByTagName("TABLE");

     

    for (var i = 0; i < tableElems.length; i++)

    {

     

    if(tableElems[i].className == "layout" )

    {

    tableElems[i].rows(0).style.display =

    'none';

    tableElems[i].rows(2).style.display =

    'none';

    tableElems[i].rows(1).deleteCell(0);

    tableElems[i].getElementsByTagName(

    'COL')[0].setAttribute('width', '100%');

    }

     

    if(tableElems[i].className == "area" )

    {

    tableElems[i].style.border =

    'none';

    tableElems[i].removeAttribute(

    'cellPadding');

    }

    }

     

     

    var formElems = document.getElementsByTagName("FORM");

     

    for (var i = 0; i < formElems.length; i++)

    {

     

    if(formElems[i].className == "crm" )

    {

    formElems[i].parentNode.rows(0).style.display =

    'none';

    formElems[i].parentNode.rows(1).style.display =

    'none';

    }

    }

     Any ideas??

    Thursday, June 24, 2010 7:10 AM
  • I managed to get this to work and thought I would share it with you:

    function getElementsByClassName(classname, doc, node) {
        if(!node) node = document.getElementsByTagName("body")[0];
        var a = []; var re = new RegExp('\\b' + classname + '\\b');
        var els = node.getElementsByTagName("*");
        for (var i = 0, j = els.length; i < j; i++)
            if (re.test(els[i].className)) a.push(els[i]);
        return a;
    }

    function hideArea()

    {

    var  areaFormDiv = document.getElementById('areaForm');  
            var mainTable = areaFormDiv.parentElement.parentElement.parentElement.parentElement;  
             mainTable.deleteRow(0); // delete top nagivation pane
                      
               var iDoc = '';
              
               //Hide left navigation pane
                document.all.crmNavBar.parentElement.style.display = "none"; //hide nav bar
                document.all.tdAreas.colSpan = 2;
                document.all.crmTabBar.style.display = "none"; // hide tab bar

                
               var elements2 = getElementsByClassName('ms-crm-Form-Area', iDoc);
               for (var q = 0; q < elements2.length; q++)
               {
                    elements2[q].style.border = 'none';
                    elements2[q].removeAttribute('cellPadding');
               }
               
               

               //hide status bar
               var elements3 = getElementsByClassName('ms-crm-Form-StatusBar', iDoc); 
               for (var s = 0; s < elements3.length; s++)
               {
                    elements3[s].style.display = 'none';
                    elements3[s].removeAttribute('cellPadding');
               }
              
                // Hide the unwanted surrounding area on the bottom of the page
               var rowtodelete = elements3[0].parentElement;
               rowtodelete.style.display = "none";

    }

    • Marked as answer by Stanley_Lai Friday, August 6, 2010 1:01 AM
    Friday, August 6, 2010 1:00 AM