Creating Custom Add and Delete Buttons for a Grid Pane

TIBCO Business Studio Forms automatically creates Add and Delete buttons for the records in a grid pane if you enable those options on the grid pane’s custom properties sheet. However you can provide custom logic to be executed when a record is added or deleted. To do this, you need to customize the Add and Delete buttons.

Sample Project

To view the sample for this task, import the advanced sample projects as described in Importing the Forms Advanced Samples. The sample form and business object model for the task described in this section are contained in the forms.samples.scripting sample project.

The form (CustomGridActions.form) is at:

   forms.samples.scripting/Forms/GridPane/CustomGridActions/

The directions here assume that you already have a form with a grid pane that is bound to an array of objects of type forms.samples.scripting.GridRecord. In the sample, the GridRecord class is in the business object model FormsSamplesScripting.bom at:

   forms.samples.scripting/Business Objects/

You can double-click the form and business object model filenames (as well as those of other project resources) in the Project Explorer to open them in the editor. There, you can examine their contents and use them as models for your own projects.

Procedure

  1. In the Properties tab of the Properties view for the grid pane, make sure the Support Add Operation and Support Delete Operation check boxes are cleared.
  2. Add a shared script action named Add Record. Specify the following script for this action: 
       var  newRecord =    factory.forms_samples_scripting.createGridRecord();
   pane.grid.getValue().add(newRecord);
   pane.grid.setSelection(newRecord);

    Use the following script for multi-select grid panes:

       var  newRecord =    factory.forms_samples_scripting.createGridRecord();
   pane.grid.getValue().add(newRecord);
   pane.grid.getSelection().add(newRecord);
  3. Add a shared script action named Delete Record. Specify the following script for this action: 
       var  selection = pane.grid.getSelection();
   if (selection!=null) {
       var  rc = confirm("Delete the current record?");
       if (rc==true) {
           var  list = pane.grid.getValue();
           list.remove(selection);
       }
   }

    Use the following script for multi-select grid panes:

       var  selection = pane.grid.getSelection();
   if (selection!=null) {
      	 var  rc = confirm("Delete the current record?");
       if (rc==true) {
           var  list = pane.grid.getValue();
           for (var i=selection.size()-1; i>=0; i--) {
                var sel = selection.get(i);
                selection.remove(i);
                list.remove(sel);
           }
       }
   }
  4. Now add two buttons to the form, one for adding the record, the other for deleting a record, and hook them up to the new actions using appropriate rules.

    The shared script actions and rules described here can be examined in the Properties view by clicking their names in the Outline view of the sample project’s CustomGridActions form: