dynamic table control element in web dynpro abap

[Harsh9]

Introduction

This document demonstrates how to use table element in web dynpro application in a dynamic fashion.

Let me set a plot by taking an example. Suppose, we want user to have a view in web dynpro application, which will be comprising of one table element for inputting row line items. Let’s say, we don’t know how many lines user would input. Yes, user has dynamic mind set. Thus, table element will be having multiple columns in which one column, say is drop down element (just to increase the complexity), having multiple values. User will be facilitated to add as many line items dynamically and delete line items as and when required, on a click of add button and delete button respectively.

Here we go, doing what I just described.

Goto SE80, give the appropriate name to your web dynpro component and hit the green tick.

Right click on the web dynpro component, create a view and give appropriate name.

Embed the view in the existing window. You can either right click to embed the newly created view or you can drag and drop the newly created view to the window.

Now create a service call. Here, I have taken example of creation of sales order. You can choose as per your requirement. Note creation of service call is not mandatory here. I have created it only to demonstrate the piece of functionality.

After successful creation of service call, you will be having a node in the context of component controller. Map this node in the view we created earlier. Create a layout something like mentioned below. View is having two sections, header data and item data.

Here, item data, which we are managing using a table, is in turn bound with some node. Item data part is dynamic where we don’t really know, how many entries user would prefer to make? So after arranging the UI elements, bind them as per your need.

In every row (line item), there will be drop down control element, thus adding one sub node inside the node (which is bound with table control element).

Also, to achieve the functionality of deleting row (line item) from the table on the click of link button, add one column in our table element with link to action element inside. Generate event  for the same.

Repeating again, I have bound table element with order item details.

Now, in method WDDOMODIFYVIEW of view, put code I have shown in screenshots. Inside calling two method in component controller, one to fetch some materials and other one to perform initialization tasks. Screen shots of the same are following immediately.

Only, when WDMODIFYVIEW is being called for very first time, call to method, namely GET_MATERIALS and INITIALIZE, will be made. Otherwise, rest of the code will be executed, which is calculating the element count of the node, bound with table element, and setting the visible row count of table element, every time.

GET_MATERIALS method in component controller, fetches the material data, material number and description, stores them in node at component controller level. Thus, whenever new order line item will be added, material data will be loaded from the node just mentioned.

INITIALIZE method in component controller, initializes the node bound to table element, creates new element and binds it to the node.

So here we are done with the code in modify view method.

Now, when user clicks the button to add new item to the list, following code to execute.

If user wants to delete the existing line from the list, put following code on event link to action table element

And here we are with the output 

Regards,

Harsh