AnsweredAssumed Answered

Add a button in list-headerpane that open a Drawer

Question asked by Ludovic ROBINOT on Oct 17, 2017
Latest reply on Oct 17, 2017 by Ludovic ROBINOT

Hi all,

 

I would like to add a button that open a Drawer near the Create one in the header of Cases list.

 

I followed these steps:

 

1. Copied the folder <install>/clients/base/views/list-headerpane/ to <install>/custom/modules/Cases/clients/base/views/list-headerpane/

 

2. Edited the file <install>/custom/modules/Cases/clients/base/views/list-headerpane/list-headerpane.php to add my button, like this:

 

<?php
$viewdefs['Cases'] = array(
  'base' => array(
    'view' => array(
      'list-headerpane' => array(
        'template' => 'headerpane',
        'buttons' => array(
          array(
            'name' => 'create_button',
            'type' => 'button',
             'label' => 'LBL_CREATE_BUTTON_LABEL',
             'css_class' => 'btn-primary',
             'acl_action' => 'create',
             'route' => array(
               'action' => 'create'
             )
           ),
           array(
             'name' => 'case_search_button',
             'type' => 'button',
             'label' => 'LBL_CASE_MYBUTTON',
             'css_class' => 'btn-success',
             'event' => 'button:case_mybutton_button:click',
           ),
           array(
             'name' => 'sidebar_toggle',
             'type' => 'sidebartoggle',
           ),
        ),
      ),
    ),
  ),
);

 

3. Edited the file <install>/custom/modules/Cases/clients/base/views/list-headerpane/list-headerpane.js to register action on my button like this:

 

({
  extendsFrom: 'HeaderpaneView',

  initialize: function (options) {
    this._super('initialize', [options]);

    app.shortcuts.register('List:Headerpane:Create', 'a', function () {
      var $createButton = this.$('a[name=create_button]');
      if ($createButton.is(':visible') && !$createButton.hasClass('disabled')) {
        $createButton.get(0).click();
      }
    },this);

    // Register click event listener on button
    this.context.on('button:case_mybutton_button:click', this.openDrawer, this);
  },

  openDrawer: function () {
    alert('openDrawer() called, YES!!');
    app.drawer.open({layout: 'my-case-list-layout'});
  }
});

4. Quick Repair

 

The button appear on the Cases list page => OK

 

When I click on the button, nothing happen.

 

What am I doing wrong?

 

Thank you in advance for your help.

Outcomes