Display group actions as button above grid

Posted by Aede Hoekstra on 14-Jun-2017 03:08

I have a workflow action which is a group action. Because the action is somewhat "hidden" under the button with the 3 dots, I would like to display it on the same level as the other buttons above the grid. Because users do not tend to press the button with 3 dots to look for more actions. 

Of course the nicest way would be if the action would behave the same as when checkbox render as button is checked with the workflow action for single actions.

Does anyone has workaround / script for this?

Posted by Mayank Kumar on 15-Jun-2017 00:19

Hi Aede,

Currently there is no support for showing the workflow action buttons in the grid toolbar. You can log an enhancement request for the same.

Talking about the script you requested for, since there is no unique identifier associated with the workflow action buttons (since there is no integration name for them), it is very difficult to identify the element uniquely in the DOM.

If you know or can make sure that your workflow action button labels would be unique, you can try out the below script.

Please note that the More Actions (3 dots) are disable by default unless some record is selected. So if you want, you can show or hide the button in the toolbar based on the record selection.

Below example will do some DOM changes and move the workflow action button with label (WorkFlowActionTest) from the more actions to the grid toolbar and hide it. Based on the selection of records, we will hide or show that button.

<script>

        var newButtonEl;

       function showButton(){

      if(newButtonEl)

   newButtonEl.show();

       }

      function hideButton(){

      if(newButtonEl)

  newButtonEl.hide();

      }

      function moveActionButton() {

   var elToMove = $("span.rbs-gridToolbar-btn-text").filter(function(){return ($(this).text().trim()==="WorkFlowActionTest");}).parent();

    newButtonEl = $("<div></div>").append(elToMove)

    $('.gridToolbar').append(newButtonEl);

    newButtonEl.hide();

   $(document).bind(rb.newui.util.customEvents.rbs_recordsSelected, showButton);

 $(document).bind(rb.newui.util.customEvents.rbs_recordSelectionCleared, hideButton);

     }

    rb.newui.util.addEventListener(rb.newui.util.customEvents.rbs_pageRender, moveActionButton);

 </script>

Also note that the DOM and the css identifiers/classnames may change in future. In that case, you may want to update your script accordingly.

Let me know if this works for you.

Regards,

Mayank

All Replies

Posted by Mayank Kumar on 15-Jun-2017 00:19

Hi Aede,

Currently there is no support for showing the workflow action buttons in the grid toolbar. You can log an enhancement request for the same.

Talking about the script you requested for, since there is no unique identifier associated with the workflow action buttons (since there is no integration name for them), it is very difficult to identify the element uniquely in the DOM.

If you know or can make sure that your workflow action button labels would be unique, you can try out the below script.

Please note that the More Actions (3 dots) are disable by default unless some record is selected. So if you want, you can show or hide the button in the toolbar based on the record selection.

Below example will do some DOM changes and move the workflow action button with label (WorkFlowActionTest) from the more actions to the grid toolbar and hide it. Based on the selection of records, we will hide or show that button.

<script>

        var newButtonEl;

       function showButton(){

      if(newButtonEl)

   newButtonEl.show();

       }

      function hideButton(){

      if(newButtonEl)

  newButtonEl.hide();

      }

      function moveActionButton() {

   var elToMove = $("span.rbs-gridToolbar-btn-text").filter(function(){return ($(this).text().trim()==="WorkFlowActionTest");}).parent();

    newButtonEl = $("<div></div>").append(elToMove)

    $('.gridToolbar').append(newButtonEl);

    newButtonEl.hide();

   $(document).bind(rb.newui.util.customEvents.rbs_recordsSelected, showButton);

 $(document).bind(rb.newui.util.customEvents.rbs_recordSelectionCleared, hideButton);

     }

    rb.newui.util.addEventListener(rb.newui.util.customEvents.rbs_pageRender, moveActionButton);

 </script>

Also note that the DOM and the css identifiers/classnames may change in future. In that case, you may want to update your script accordingly.

Let me know if this works for you.

Regards,

Mayank

Posted by Aede Hoekstra on 16-Jun-2017 03:18

Thanks Mayank,

This works fine! I'll create an enhancement request for this feature.

This thread is closed