SugarCRM 7 - Hiding subpanels based on specific criteria

Thu 12 June 2014

The new Sugar subpanels look great but they do take up quite a lot space, without any ability to remove Subpanels via studio I've had to come up with a few ways to hide them.

Note: Original Props go to Robin Larsson who wrote the `original <>`__ on the Sugar Community.

What Robin's code does is essentially hide fields based on a specific value within a record, I didn't really need that ability much so I've altered his code based on use cases I've come across.

What this code allows you to do is hide subpanels based on:

  1. The related type, meaning hide all subpanels of say type Account or Contact
  2. The relationship name, so if you want to hide a related module by a specific relationship. For example accounts_contacts
  3. If a specific relationship has no related records. So say if an account has no contacts, hide that subpanel.

Place this code in custom/modules/<YourModule>/clients/base/layouts/subpanels/subpanels.js and simply populate the hide_ variables with whatever you wish to hide!

    extendsFrom: 'SubpanelsLayout',
    hide_subpanel_by_type: ['emails', 'leads', 'documents'],
    hide_subpanel_by_empty: ['members'],
    hide_subpanel_by_relationship: ['accounts_contacts_1'],

    initialize: function (options) {
        app.view.invokeParent(this, {type: 'layout', name: 'subpanels', method: 'initialize', args: [options]});
     * Show the subpanel for the given linkName and hide all others
     * @param {String} linkName name of subpanel link
    showSubpanel: function (linkName) {
        var self = this,
        //this.layout is the filter layout which subpanels is child of; we
        //use it here as it has a last_state key in its meta
        cacheKey = app.user.lastState.key('subpanels-last', this.layout);

        // wait for the model to load
        self.model.on("change", function () {

            if (linkName) {
                app.user.lastState.set(cacheKey, linkName);

            _.each(self._components, function (component) {
                var hide_subpanel = self._checkIfHideSubpanel(component.module.toLowerCase(), component.collection);

                var link = component.context.get('link');
                if (!hide_subpanel &&
                    ( !linkName || linkName === link )) {
                    component.context.set("hidden", false);
                else {
                    component.context.set("hidden", true);

     * Check if the subpanel is on the hiding list and if the watched field has a specific value.
     * @param {Boolean} subpanel name of the module for the subpanel
    _checkIfHideSubpanel: function (type, field_collection) {
        var relationship =;
        var self = this;
        var hide_subpanel = false;
        if (( jQuery.inArray(type, self.hide_subpanel_by_type) !== -1 )) {
            hide_subpanel = true;
        if (( jQuery.inArray(relationship, self.hide_subpanel_by_empty) !== -1 )
        && (field_collection.models.length === 0)) {
            hide_subpanel = true;
        if (( jQuery.inArray(relationship, self.hide_subpanel_by_relationship) !== -1 )) {
            hide_subpanel = true;

        return hide_subpanel;

Category: SugarCRM Tagged: javascript sugarcrm