Visit Sage CRM Main Website  |  About Sage CRM
Visit Sage CRM Main Website  |  About Sage CRM

Hiding Panels in System Screens in Sage CRM

Hints, Tips and Tricks

Technical Hints Tips and Tricks that cover customization and development using Sage CRM. API usage and coding are covered.

Hiding Panels in System Screens in Sage CRM

Jeff Richards
13 Mar 2014 6:39 AM
  • Comments 12
  • Likes

Screens like the Opportunity Summary, Case Summary and Company Summary page are divided into different panels. Much of the page layout in the current version is controlled by HTML Tables.

CSS styles are used to format the display of the tables and their TD tags. In these summary pages the different panels are separated by TD that have the class 'ROWGap'.

We can take advantage of the this fact to allow us to control the page by either adding or removing panels.

I discussed adding a panel in the article "Adding a new Panel to a Summary screen e.g. Company Summary".  

The same trick can be used to find panels to hide them.

For example you may want to hide the Opportunity Total panel in the Opportunity Summary Screen.

In the sample code below I have mixed Sage CRM Client Side code with Plain Old Javascript.

I have used the crm.ready() method to make sure that the code will load and run in all supported browsers as the page loads and I have used the crm.getTrans() method to make sure that the code hides the panel whatever the users language.

[code language="javascript"]
<script>
crm.ready(function(){
//find all cells
var arrTDs = document.getElementsByTagName("TD")
for(i=0;i< arrTDs.length;i++)
{
//check if using ROWGap class
if("ROWGap"==arrTDs[i].className)
{
//get the next TD
strNextTDHtml = arrTDs[i+1].innerHTML
//check if next cell contains 'Opportunity Total'
if(strNextTDHtml.search(crm.getTrans("tabnames","OpportunityTotal")) >=0)
{
//get the next cells parent's parent and remove the child
//this removes the 'Tab' of the panel
strTargetTD = arrTDs[i+1].parentNode;
strTargetParent = strTargetTD.parentNode;
strTargetParent.removeChild(strTargetTD);

//get the current cells parent's parent and remove the child
//this removes the "RowGap" row
strTargetTD = arrTDs[i].parentNode;
strTargetParent = strTargetTD.parentNode;
strTargetParent.removeChild(strTargetTD);

//get the current cells once the 'RowGap' has gone and delete the panel.
strTargetTD = arrTDs[i].parentNode;
strTargetParent = strTargetTD.parentNode;
strTargetParent.removeChild(strTargetTD);

}
}
}

})
</script>
[/code]

Comments
  • Stacy Denunzio
    13 Mar 2014 7:00 PM

    It would be nice if each "panel" TD had an ID attribute in the tag so we could easily identify it with jQuery.

  • Jeff Richards
    14 Mar 2014 10:12 AM

    Stacy

    The ideal should be that not only are the panels marked with an iD that allows jQuery and Plain Old JavaScript to control them easily but that the client side API is extended with methods that allow panel control in the same way that buttons, tabs and fields can be controlled.

  • Stacy Denunzio
    14 Mar 2014 3:14 PM

    Agreed! I can't wait to see all that incorporated in 7.3 ;)

  • Michele Gaw
    10 Jun 2015 11:14 PM

    Thank you for the post Jeff!

    I was able to use this to hide the Communications Option box on the email screen! :-)  I know it may be strange to want to hide it that box..but the details from this box are being passed in some custom code associated with the Email Screen...so I don't want to show it because I think it is confusing to the user.  I might be doing cartwheels soon!

  • Michele Gaw
    11 Jun 2015 12:31 AM

    It appears that I do need to ask one question in regards to this.  This does work to hide the Communications Options.  Yeah!  

    However, it hides it on ALL the new email buttons throughout the system.  Boo!  

    Since I put a custom parameter in my button, I thought I could use that parameter to hide the box if my parameter condition was met.  However, it is not working.  Therefore, I am wondering if I did not understand what I might be able to do with that custom parameter or if I simply have an error in my code that I need to look more closely for.

    This is how I added my button...

    var strCHSEmailLeaseButton = CRM.Button("CHS Email Lease","NewEmail.gif",CRM.URL("1500") + "&Lease=Y");

    I added it to my block with this....

    AddButton(strCHSEmailLeaseButton);

    I added your above example to the custom content box of my screen (modified).  As I indicated, it works...but it does it for ALL the email screens.

    Therefore, I tried wrapping the example code as follows...but it is not working.  (Note:  I did use the custom param previously in the custom content for another purpose...but thought I could use it again for this.  Maybe not?)

    Can you tell me if this should work in custom content?  Thank you!!

    function HideEmailFilingBox ()

    {

    var myparam = crm.getArg("Lease", crm.url());

    if(myparam === "Y")

    {

    the code above modified accordingly (the above code works before I add the custom param)

    }

    }

    crm.ready(function()

    {

    HideEmailFilingBox();

    });

    Any assistance is greatly appreciated!!

  • Michele Gaw
    11 Jun 2015 8:08 PM

    Jeff...

    I figure this out.  The "theory" of what I was trying to do here worked.  The problem is that the param I was using no longer existed once the template was loaded (I used the param to load the template).  Therefore, I used this instead...

    var TempId = $('#template').val();

    if(TempId === "1012")

    My template is 1012...so the box does not appear.

    Awesome!

  • Jeff Richards
    12 Jun 2015 6:31 AM

    You rock!

  • Michele Gaw
    18 Jul 2018 6:53 PM

    Jeff:

    Does this method actually "remove" the panel or just "hide" it.  Based on the title of the post, it appears to just "hide" it.  Is it possible to actually remove it?

    We have a client that is using Sage CRM for two distinctly different areas of their business and they are using the user's primary territory to control this. The Opportunity Detail Screen has all the fields related to one of these territories and none of the fields will be used for the other territory, except the description.  Therefore, we want to remove the details panel depending on the territory.

    We have an issue when we are converting from a Lead to an Opportunity.  I have been able to successfully "hide" the details panel (Although it appears to flash briefly on the screen).  However, whenever we try to hit "save" when converting from the Lead to Opportunity, we get a validation errors message.  

    If a field has been marked as required at the field level, we have made sure it is addressed on the WebPicker.  

    Is the system still addressing required fields at the screen level for fields that are on the detail screen even thought it has been hidden?

    If so, is it possible to actually remove the panel rather than just hide it?

    Any assistance you can provide will be greatly appreciated.  Thanks!

  • natrajg
    6 Feb 2019 1:44 PM

    Hi Jeff,

    I want to hide the below sections in Company Summary screen:

    a) Address

    b) Phone/E-Mail

    c) Contact

    I tried with the above code, but it is not working in this case.

    Any help would be much appreciated.

  • Jeff Richards
    7 Feb 2019 6:35 AM

    Hello

    Please see the forum discussion:  community.sagecrm.com/.../14040.aspx

  • natrajg
    10 Feb 2019 5:42 AM

    Thanks Jeff. However, I want to show this detail for the logged-in user, in case he is the creator of the Company entry.

  • natrajg
    10 Feb 2019 6:24 AM

    I tried with the below condition, however it also hides the fields during creation time also.

    if (crm.fields("comp_createdby").val() != CurrentUser.user_userid)

    {

    $("#StandardForm tr:gt(6)").hide();

    }