Description: 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.
Procedure:
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.
DATA LO_ND_EKKO TYPE REF TO IF_WD_CONTEXT_NODE.
DATA LT_EKKO TYPE WD_THIS->ELEMENTS_EKKO.
* navigate from <CONTEXT> to <EKKO> via lead selection
LO_ND_EKKO = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_EKKO ).
LO_ND_EKKO->BIND_TABLE( NEW_ITEMS = LT_EKKO SET_INITIAL_ELEMENTS = ABAP_TRUE ).
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.
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 pattern call the method get context element of the class cl_wd_custom_event.
Modify the code as below.
METHOD ONACTIONON_LINK .
DATA LO_ELEMENT TYPE REF TO IF_WD_CONTEXT_ELEMENT.
CALL METHOD WDEVENT->GET_CONTEXT_ELEMENT
EXPORTING
NAME = 'NAME'
RECEIVING
VALUE = LO_ELEMENT " Interface for Dynamic Processing of Elements
.
ENDMETHOD.
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.
Using the object reference calling the get_static_attributes method of interface will gives the value of the row item.
Call the method using pattern and get the values in the work area.
DATA LS_EKKO TYPE WD_THIS->ELEMENT_EKKO.
CALL METHOD LO_ELEMENT->GET_STATIC_ATTRIBUTES
IMPORTING
STATIC_ATTRIBUTES = LS_EKKO
.
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.
Code will be generated as below.
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.
Code in the method for link to action.
Save and activate the whole component and test the application.
Debug to understand the flow.
Output:
Click on the link to action.
Common errors occured while creating Table with link to action UI Element:
A. If we are not create binding for table UI element Purchase order number(EBELN) will get deleted from table display and link to action will not work. I.e.,
Then output will display like this:
B. If we didn’t provide label text for table EKKO-EBELN header,
Then in browser heading for Field(EBELN) which we provide link to action will be empty.
C. If I’m passing the Exporting parameter NAME of WDEVENT->GET_CONTEXT_ELEMENT method as ‘NAME’ instead of ‘CONTEXT ELEMENT’ as if we don’t know what is the name to be passed there without checking parameter id in the debugging.
We will get error as below :
So check the parameter name in debugging mode as pass NAME Exporting parameter as ‘CONTEXT ELEMENT’ to get required output.
Output :
Conclusion:
Using table with link to action UI element we can display the list of the Item details for that Purchase order in a separate table on clicking the EBELN link from header table (EKKO-EBELN).
Procedure:
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.
DATA LO_ND_EKKO TYPE REF TO IF_WD_CONTEXT_NODE.
DATA LT_EKKO TYPE WD_THIS->ELEMENTS_EKKO.
* navigate from <CONTEXT> to <EKKO> via lead selection
LO_ND_EKKO = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_EKKO ).
LO_ND_EKKO->BIND_TABLE( NEW_ITEMS = LT_EKKO SET_INITIAL_ELEMENTS = ABAP_TRUE ).
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.
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 pattern call the method get context element of the class cl_wd_custom_event.
Modify the code as below.
METHOD ONACTIONON_LINK .
DATA LO_ELEMENT TYPE REF TO IF_WD_CONTEXT_ELEMENT.
CALL METHOD WDEVENT->GET_CONTEXT_ELEMENT
EXPORTING
NAME = 'NAME'
RECEIVING
VALUE = LO_ELEMENT " Interface for Dynamic Processing of Elements
.
ENDMETHOD.
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.
Using the object reference calling the get_static_attributes method of interface will gives the value of the row item.
Call the method using pattern and get the values in the work area.
DATA LS_EKKO TYPE WD_THIS->ELEMENT_EKKO.
CALL METHOD LO_ELEMENT->GET_STATIC_ATTRIBUTES
IMPORTING
STATIC_ATTRIBUTES = LS_EKKO
.
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.
Code will be generated as below.
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.
Code in the method for link to action.
Save and activate the whole component and test the application.
Debug to understand the flow.
Output:
Click on the link to action.
Common errors occured while creating Table with link to action UI Element:
A. If we are not create binding for table UI element Purchase order number(EBELN) will get deleted from table display and link to action will not work. I.e.,
Then output will display like this:
B. If we didn’t provide label text for table EKKO-EBELN header,
Then in browser heading for Field(EBELN) which we provide link to action will be empty.
C. If I’m passing the Exporting parameter NAME of WDEVENT->GET_CONTEXT_ELEMENT method as ‘NAME’ instead of ‘CONTEXT ELEMENT’ as if we don’t know what is the name to be passed there without checking parameter id in the debugging.
We will get error as below :
So check the parameter name in debugging mode as pass NAME Exporting parameter as ‘CONTEXT ELEMENT’ to get required output.
Output :
Conclusion:
Using table with link to action UI element we can display the list of the Item details for that Purchase order in a separate table on clicking the EBELN link from header table (EKKO-EBELN).
- SAP Managed Tags:
1 Comment
