Skip to Content

Dynamically adding/removing rows between two tables using ‘Shuttle’.

The Web Dynpro UI element ‘Shuttle’ is a special UI element used in the Browse and Collect Pattern. It is used to move entries from one table to another table to select the entries. The Shuttle element looks like a panel with 4 buttons.

  1. Add Item
  2. Add all Items
  3. Remove Item
  4. Remove all Items.

The library documentation for ‘Shuttle’ explains that the ‘onAdd/onRemove’ events are parameterized with an ‘all(boolean)’. When the ‘Add All Items’ or ‘Remove All Items’ button is pressed, then all=true. Unfortunately, when I tried to follow this and implement the Shuttle, the ‘all’ parameter always turned to be ‘false’ (even if I press the ‘All-Buttons’).

In Web Dynpro of CE7.1, the ‘Select All/Unselect All’ features are added to the Table UI Element if the selectionMode of the Table is set to ‘multi’ or ‘multiNoLead’. So using this feature, I tried to implement the Shuttle. The entire procedure is described below with step-by-step screen shots.

 

The Procedure consists of the following steps:

  1. Creating Project.
  2. Creating View Context.
  3. Creating Actions.
  4. Designing the View.
  5. Writing necessary code.
  6. Building the DC and deploying the Application. 

Creating Project

1. Create a Web Dynpro DC Project named ‘tableui’

Select File->New-> Project . Select ‘Web Dynpro Development Component’ from the list of Project Types. Enter ‘Next’.

Select ‘MyComponets’ in ‘Local Development’

Enter ‘Vendor’ and Project names.

Finish.

 

2. Create a component ‘TableComp’ with default window and view.

Give Component name and Component Package. Select ‘Default Window and Views’.

 

 

Leave the default window name and view name as such.

3. Create an Application ‘TableUiApp’ with ‘TableComp’ as the Component.

Give Application Name and Package.

Select ‘Use existing component’.

 

 Finish.

Creating View Context

 

  1. Open the View ‘TableCompView’.
  2. In the View Context , create the following nodes manually:
  • Employee_1 with 2 attributes – ID (String) and Name (String)
  • Set Collection Cardinality and Selection Cardinality both to 0..n.
  •  Employee_2 with 2 attributes – ID (String) and Name (String)
  • Set Collection Cardinality and Selection Cardinality both to 0..n.
  • Create 2 attributes also: 1. enableAdd(boolean), 2. enableRemove(boolean)

 

Creating Actions

Create actions in TableCompView as follows:

addRow – without any parameters

 

removeRow – without any parameters

 

Designing the View.

Add a table with ID ‘Table1’

 

Set the datasource as ‘Employee_1’.

Set the selectionMode as ‘multiNoLead’

Add Column ‘IdColumn1’.

Add Header ‘IdHeader1’ with text ‘ID’

Add TextView with id ‘Id1’ as the cell editor in the column. Bind Id1 to Employee_1.Id

Add Column ‘NameColumn1’.

Add Header ‘NameHeader1’ with text ‘Name’

Add TextView with id ‘Name1’ as the cell editor in the column. Bind Name1 to Employee_1.Name.

Add a Shuttle UI Element

 

Bind ‘enableAddButtons’ property to the attribute ‘enableAdd’.

Bind ‘enableRemoveButtons’ property to the attribute ‘enableRemove’.

Set onAdd property as ‘addRow’.

Set onRemove property as ‘removeRow’.

 

Add another table with ID ‘Table2’

Set the datasource as ‘Employee_2’.

Set the selectionMode as ‘multiNoLead’

Add Column ‘IdColumn2’.

Add Header ‘IdHeader2’ with text ‘ID’

Add TextView with id ‘Id2’ as the cell editor in the column. Bind Id2 to Employee_2.Id.

Add Column ‘NameColumn1’.

Add Header ‘NameHeader2’ with text ‘Name’

Add TextView with id ‘Name2’ as the cell editor in the column. Bind Name2 to Employee_2.Name.

 
Populating the Employee_1 Node

Write the below code in the wdInit() Method of the TableCompView

for (int i = 0; i<10; i++) {

                     IEmployee_1Element emp = wdContext.createEmployee_1Element();

                     emp.setID(new Integer(i).toString());

                     emp.setName(“Name” + i);                

                     wdContext.nodeEmployee_1().addElement(emp);

              }

Write code for the Action Methods.

Write the below code in the onActionAddRow() Method

 

for (int x = 0; x<wdContext.nodeEmployee_1().size(); x++) {

              if (wdContext.nodeEmployee_1().isMultiSelected(x)) {

                     // Selected Element

                     IEmployee_1Element sourceElement = wdContext                                             .nodeEmployee_1().getEmployee_1ElementAt(x);

                     IEmployee_2Element targetElement = wdContext

                     .nodeEmployee_2().createEmployee_2Element();

                     targetElement.setID(sourceElement.getID());

                     targetElement.setName(sourceElement.getName());

                                                                                         wdContext.nodeEmployee_2().addElement(targetElement);

        wdContext.nodeEmployee_1().removeElement(sourceElement);
        x–;

              }

}

Write the below code in the onActionRemoveRow() Method

for (int y = 0; y<wdContext.nodeEmployee_2().size(); y++) {

              if (wdContext.nodeEmployee_2().isMultiSelected(y)) {

                     // Selected Element

                     IEmployee_2Element sourceElement = wdContext.nodeEmployee_2()

                     .getEmployee_2ElementAt(y);

                     IEmployee_1Element targetElement = wdContext.nodeEmployee_1().

createEmployee_1Element();

                          

                     targetElement.setID(sourceElement.getID());

                     targetElement.setName(sourceElement.getName());

                   wdContext.nodeEmployee_2().removeElement(sourceElement);

                     wdContext.nodeEmployee_1().addElement(targetElement);

                     y–;

              }

   }                   

Changing the attribute values:

Write the code shown below in wdDoModifyView() method of the TableCompView

int tableSize1 = wdContext.nodeEmployee_1().size();

              if (tableSize1 == 0)

                           wdContext.currentContextElement().setEnableAdd(false);

              else

                     wdContext.currentContextElement().setEnableAdd(true);

 

int tableSize2 = wdContext.nodeEmployee_2().size();

if (tableSize2 == 0)

       wdContext.currentContextElement().setEnableRemove(false);

              else

                     wdContext.currentContextElement().setEnableRemove(true);


Build the DC and Deploy the Application

 Build the Development Component.

 

 

Deploy the Application ‘TableUiApp’. Run it and Test.

 

                                       

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Former Member
    Really nice blog, very helpful, but…Text in Creating View Context looked somehow overlaped…Also, pictures looked a little bit messy…I know that SDN doesn’t allow bigger pictures, but sometimes by cutting of unnecesary pieces of the picture, you can achive a better look.

    Greetings,

    Blag.

    (0) 

Leave a Reply