Adding multiple buttons to Table Component header

After reading my previous blog on Adding a button panel to the table component header, several Sun Java Studio Creator users asked me the question, how to add more than one button to Table component header?. Unfortunately the facet we used to set the button to the header panel does not seem to take more than one component. So, as suggested in the comment section, one way is to use some layout component and put more than one button in it. I tried with various layout components such as Grid, group Layout component etc. The best suitable one seems to be Group Layout Component.

Steps:

First drag and drop a layout component on to the designer.
Drag and drop the needed buttons on to the layout component and set the disabled=true on the buttons
Go to the JSP page and manually move the tag related to Group Layout component inside the facets with names "actionsTop" or "actionsBottom". Remove the style attribute in the Group Layout component, else it may be positioned outside the Table header.
Add the Java Script code for confirmation dialog to onClick property of each button component as shown in the code below.

<!-- Actions (Top) -->
<f:facet name="actionsTop">
   <ui:panelGroup binding="#{Page1.groupPanel1}" id="groupPanel1">
      <ui:button action="#{Page1.button1_action}" binding="#{Page1.button1}" disabled="true" 
           onClick="if (confirmDeleteSelectedRows() == false) return false;" 
           id="button1" text="Delete"/>
      <ui:button action="#{Page2.button1_action}" binding="#{Page2.button1}" disabled="true" 
           onClick="if (confirmDeleteSelectedRows() == false) return false;" 
           id="button1" text="Delete"/>
      <ui:button action="#{Page3.button1_action}" binding="#{Page3.button1}" disabled="true" 
           onClick="if (confirmDeleteSelectedRows() == false) return false;" 
           id="button1" text="Delete"/>
      <ui:button action="#{Page4.button1_action}" binding="#{Page4.button1}" disabled="true" 
           onClick="if (confirmDeleteSelectedRows() == false) return false;" 
           id="button1" text="Delete"/>
   </ui:panelGroup>
</f:facet>

Aslo make sure to add the Java Script code necessary to disableActions() function

function disableActions() {
  // Disable table actions by default.
  var table = document.getElementById("form1:table1");
  var selections = table.getAllSelectedRowsCount();
  var disabled = (selections &gt; 0) ? false : true;
  // Set disabled state for top actions.
  document.getElementById("form1:table1:button3").setDisabled(disabled);
  document.getElementById("form1:table1:button4").setDisabled(disabled);
  document.getElementById("form1:table1:button5").setDisabled(disabled);
  document.getElementById("form1:table1:button6").setDisabled(disabled);
  // Set disabled state for bottom actions.
  document.getElementById("form1:table1:button2").setDisabled(disabled);
}

Deploy the application and you should see Table component with multiple buttons in the header as below. Initially buttons will be disabled. On selecting a row using checkbox the buttons will be enabled.

Dr. Winston Prakash Ph.D.

Personal Website

Adding multiple buttons to Table Component header