Table with Link to Action

This tutorial explains how to use the Table UI element along with the Link to action.

In this scenario we will display the list of PO from the EKKO table and set the Purchase order number EBELN as link to action. On clicking the EBELN link let us display the Item details for that Purchase order in a separate table.

Step1: Go to TCODE SE80 and create a webdynpro component as shown below.

Assign the component to the package or save it in the local object.

Step 2: In the context tab of the view controller, create two context nodes ekko and ekpo as shown below.

Enter the name for the node, provide the dictionary structure as EKKO and set the cardinality as 0..N.

Click on add attribute from the structure to add the attribute fields from the dictionary structure EKKO.

Choose the fields required from the popup and click on enter.

Context node will be created as below with the required attributes.

Similarly create a EKPO node with the following attributes.

Step 3: Go to the layout of the view controller and insert a table UI element.

Provide ID and type for the UI element.

Right click on the Table UI element and click on create binding.

Click on the context button to choose the context node.

Change the cell editor of the column for the ebeln field as link to action.

Change the label text as the PO number for the field EBELN.

Step 4: Now create an action for the link to action UI element.

Enter the name and description for action and press enter.

Action for the Link to action will be created as below.

Step 5: Go to the DOINIT method and initialize some values for the context node as shown below.

Generate the code using the code wizard as shown below.

Code will be generated as below.

Note : I have removed the unwanted code.

Fill in the internal table with some records and bind it to the context node table.

Step 5: Save and activate the whole component and test the application.

Test the application.

Output:

So far we have only set the link to action ui element. Now let us write the logic for what has to happen on the click of the link to action ui element.

On the click of the link to action ui element we will display the item details for that PO in the separate table.

Step 6: Go to the layout tab of the view controller and insert the Table UI element.

Provide the id and type.

Create binding for the table with the node EKPO as shown below and let remain all the cell editor of the table as text view only.

Step 7: Go to the event handler method for the link to action which we created earlier and do the following.

This method has an importing parameter wdevent which is referring to a type CL_WD_CUSTOM_EVENT.

This class contains a method call get_context_element which will return us the element object reference for the row from where link to action is been triggered. The method gets the name as the importing parameter and returns the element object reference. To know what is the name to be passed go to the debugger and check what is the name passed in the attribute parameters.

Call this method in the event handler method for the link to action.

Using patter call the method get context element of the class cl_wd_custom_event.

Modify the code as below.

Right now I am passing the name as name as we don’t know what is the name to be passed there. We will check out in the debugger what is the name to be passed. Keep the break point in the and test the application.

Click on the function F5 to go inside the method. Double click on the internal table parameters and see the ID. It is the name which we need to pass to the name parameter.

The row item which has the name context element provides the element object reference for the selected index and hence we need to pass the context_element to the

Method to get the object reference.