‘SELECT ALL CHECKBOX’ for a Table Column in WEDYNPRO ABAP

[sireeshach]

Abstract:

            For a table column having the cell editor as Checkbox, which acts as the row selector, there might be a need to have the ‘Select All Checkbox’ at the column header to select/deselect all the records of the table at a time to perform further actions. Unfortunately there is no direct way provided to handle this scenario in Webdynpro ABAP, which gave us an opportunity to find out a work around to handle the same. This document deals with how this functionality can be achieved and what are all the steps that are to be followed to have this functionality in Webdynpro Table Column.

　

What Acts as a Select All Checkbox in a Table Column:

          As mentioned earlier, we don’t have any standard way of having ‘Select All Checkbox’ in a table column in Webdynpro ABAP. And it is very useful to have a ‘Select/Deselect All checkbox’ to select/deselect all the records at a time.

          The idea behind this is to toggle the image bound to the table column along with modifying the records of the table.

          This functionality can be achieved technically by the combination of the Imagesource property of a table column header & the event OnAction of the table column header/the event OnColSelect of the table itself.

Workaround to be done to Achieve the Functionality:

Step1:

          Bind the image source property to a context attribute, which contains the image unchecked/checked checkbox based on the user action.

• As we need to display it as an unchecked checkbox, set this image to unchecked checkbox in WDDOINIT using SET_ATTRIBUTE method of IF_WD_CONTEXT_ELEMENT.

Note: The image ICON_WD_TRANSPARENT_CONTAINER may serve as an unchecked checkbox or else we can use our own image.

Step2:

Declare an attribute in the view controller for a flag to know whether to select all records or to deselect all records.

Step3:

          In the action method which is called each time user clicks on the column, do the following.

• Check the Select All flag (declared in step2),

• If it is not set, set this flag to ‘X’.
• If it is already set, clear the flag.

          Note: This is optional and is just to make the code readable. If this is not done, below check is to be reversed.

• Check for the Select All Flag again

• If the flag is set,
  • Set the image to checked checkbox by using SET_ATTRIBUTE method of IF_WD_CONTEXT_ELEMENT. The image ICON_CHECKBOX may be used.

  • Modify the internal table which is bound to the TABLE UI Element with the checked value (‘X’) for the checkbox.

  • Bind the Internal table using the method BIND_TABLE of IF_WD_CONTEXT_NODE.

• If the flag is not set,
  • Set the image to unchecked checkbox by using SET_ATTRIBUTE method of IF_WD_CONTEXT_ELEMENT. The image ICON_WD_TRANSPARENT_CONTAINER may be used

  • Modify the internal table which is bound to the TABLE UI Element with the empty value for the checkbox.

• Bind the Internal table using the method BIND_TABLE of IF_WD_CONTEXT_NODE.

How the Application looks like:

Before the Functionality is in Place:

          Below is the screen shot for a sample application before the functionality is in place where we can’t have the select all checkbox for a table column.

     Screen1: Without Select all checkbox & without column description

Or

     Screen2: Without Select all checkbox but with column description

After the Functionality is in Place: 

          Below are the screenshots for the same sample application with Deselecting & Selecting All Records respectively.

     Screen3: Deselecting All Records

     Screen4: Selecting All Records

Best Regards,

Sireesha Ch