Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

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.

 

clip_image002

 

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.

 

clip_image004

 

 

 

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

 

clip_image006

 

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

 

clip_image008

 

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

clip_image010

 

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

 

clip_image012

 

 

Similarly create a EKPO node with the following attributes.

 

clip_image014

 

 

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

 

clip_image016

 

Provide ID and type for the UI element.

 

clip_image018

 

 

clip_image020

 

 

 

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

 

clip_image022

 

Click on the context button to choose the context node.

 

clip_image024

 

 

clip_image026

 

 

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

 

clip_image028

 

 

 


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

 

clip_image030

 

 

 

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

 

clip_image032

 

 

clip_image034

 


Enter the name and description for action and press enter.

 

clip_image036

 

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

 

clip_image038

 

 

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.

 

 

clip_image040

Code will be generated as below.

 

clip_image042

 

Note : I have removed the unwanted code.

 

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

 

clip_image044

 

 

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

 

clip_image046

 

 

Test the application.

 

Output:

 

clip_image048

 

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.

 

clip_image050

 

Provide the id and type.

clip_image052

 

 

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.

 

clip_image054

 

  

 

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.

 

clip_image056

 

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.

 

clip_image058

 

 

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.

clip_image060

 

Modify the code as below.

 

clip_image062

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.

 

clip_image064

 

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.

clip_image066

 

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.

 

clip_image068

 

Using the object reference calling the get_static_attributes method of interface will gives the value of the row item.

 

clip_image070

 

 

 

 

 

 

Call the method using pattern and get the values in the work area.

 

clip_image072

Now the local structure will contain the row item values of the selected row.

 

Using the ebeln number in the work area gets it corresponding value and bind it to the EKPO table.

 

Using code wizard, set the node EKKO as table operation.

 

clip_image074

 

Code will be generated as below.

clip_image076

 

Note I have removed the unwanted codes. Using the ebeln number in the work area gets it corresponding value and bind it to the EKPO table.

clip_image078

 

 

Code in the method for link to action.

 

clip_image080

clip_image082

 

Save and activate the whole component and test the application.

 

Debug to understand the flow.

 

Output:

 

clip_image084

 

 

  

Click on the link to action.

 

clip_image086

About Arun

1 Comments:

Powered by Blogger.