How to disable sub panel row actions conditionally based on parent model?

Hello,

I can point you on the direction. As a start point you may refer this post

It may help you!

Thanks & Regards,

Team Urdhva Tech

Web: http://www.urdhva-tech.com

Hi Surabhil,

Create and link existing record buttons are come from panel-top view.

Edit and unlink buttons come from subpanel-list view.So there you can loop through buttons and you can make disable action.

Here i have done similar to your case,like if Accounts module(Record view), industry field value is "Construction" .Then i want to disable button actions for subpanel leads module. So i am placing these files in

sugar/custom/modules/Leads/clients/base/views/panel-top/panel-top.js

sugar/custom/modules/Leads/clients/base/views/subpanel-list/subpanel-list.js

panel-top.js

({
  //panel-top.js
  extendsFrom: 'PanelTopView',
  initialize:function(options) {
  this._super('initialize', [options]);
  var industryValue=this.context.parent.get('model').get("industry");
  var parentModule=this.context.parent.get('module');
  if(!_.isEqual(industryValue,'Construction') && _.isEqual(parentModule,"Accounts")){
  _.each(_.first(this.meta.buttons).buttons, function(action){
  action['css_class'] = 'disabled btn';
  });
  }
  },
})

subpanel-list.js

({
  //subpanel-list.js
  extendsFrom:'SubpanelListView',
  initialize:function(options){
  this._super('initialize',[options]);
  this.on('render',this._disableActions,this);
  },
  _disableActions:function() {
  var industryValue=this.context.parent.get('model').get("industry");
  var parentModule=this.context.parent.get('module');
  if(!_.isEqual(industryValue,'Construction') && _.isEqual(parentModule,"Accounts")){
  _.each(this.meta.rowactions.actions, function(action){
  if(!_.isEqual(action['icon'],"fa-eye")){ // for preview button
  delete action['event'];
  action['css_class'] = 'disabled btn';
  }
  });
  }
  }  
})

Place the two files based on your module.

Hope this helps!.

Hi Ajay,

I tried like this with subpanel-list.js and its working. But not sure whether its the optimal solution.

({
    extendsFrom: 'SubpanelListView',
    initialize: function (options) {
        this._super('initialize',[options]);
        this.on('render',this.hidePanelIfClosed,this); 
    },
    hidePanelIfClosed: function(){
      //get Parent Information
      var ctx = this.context.parent,
          parentModelId = ctx.get("modelId"),
          parentModule = ctx.get("module");
          console.log(parentModelId+ " "+parentModule);
      if(parentModule == 'module'){
         var  parentBean = app.data.createBean(parentModule, {id:parentModelId}),
              request = parentBean.fetch();
         //when it is done fetching the parent info
         request.xhr.done(function(){
            var parentStatus = parentBean.get("status");
            console.log(parentStatus);
            if(parentStatus == 'closed'){
               $('.subpanel-header').has('.label-panel-module').find('[class="actions btn-group pull-right panel-top"]').addClass('hidden');
               $('.flex-list-view-content').find('[class="btn dropdown-toggle"]').addClass('hidden');
            }
         });
      }
    },
})

Thanks. I can add a new button,but what I am looking for is the best practice for hiding the existing row-actions with conditions.

Hello Surabhil,

You messed up little.

We no more need to go with app.data.createBean for your case.

we can use  "this.context.parent.get('model').get("field_name");"

to get parent module field values ,check my above answer.

Hi Ajay,

panel-top.js doesn't worked as expected. industryValue field remains undefined.

Hi Surabhil,

You can use as it as .I meant you can write your functionality inside initialize function.

Can you please share code panel-top.js here?

Hi Ajay,

custom/modules/{module}/clients/base/views/panel-top/panel-top.js

({ 
    extendsFrom: 'PanelTopView', 
    initialize:function(options) { 
      this._super('initialize', [options]); 
      var statusValue=this.context.parent.get('model').get("status"); //get parent module's status
      var parentModule=this.context.parent.get('module');  //get parent module -{module}
        if(_.isEqual(statusValue,'closed') && _.isEqual(parentModule,"module")){ 
          _.each(_.first(this.meta.buttons).buttons, function(action){ 
              action['css_class'] = 'disabled btn';  // add disable btn class to buttons
          }); 
        } 
    }, 
})

Note: I am having multiple sub-panels under a parent module.

Hi Surabhil,

this.context.parent.get('model').get("field_name");

was not giving values as we expected .

It was giving "undefined" as you said.So we can conclude like conditions based only parent module or parent record id or both ,then we can use above panel-top.js

If we want to check with parent record field values ,then we can use below code,

({
  extendsFrom:'PanelTopView',
  initialize:function(options){
  this._super('initialize', [options]);
  var parentModule=this.context.parent.get('model').module;
  var parentCollection = this.context.parent.get('collection');
  var parentModel=this.context.parent.get('model');
  parentCollection.on('data:sync:complete', function() {
  if(_.isEqual(parentModel.get('industry'),'Construction') && _.isEqual(parentModule,'Accounts')){
  this.$('a[name=create_button]').addClass('disabled btn');  
   this.$('a[data-original-title=Actions]').addClass('disabled btn');
  }  
  },this);
  }
})

Hope This Helps!.