This tutorial explains how to set a drop down in the ALV report using Webdynpro ABAP.
SALV_WD_TABLE is a standard webdynpro component which can be reused in our component to create a ALV report. This component by default will have the columns of the report as a text view UI element. Now let us see how to access these column and convert it into a drop down UI element.
Scenario : Like in the post drop down by index in table we will create a report which displays the observation and set the status field as drop down containing values open and close.
Step 1: Go to the Tcode SE80 and create a webdynpro component as shown below.
Assign the component to a package or save it in a local object.
Step 2: To reuse the functionality of the standard webdynpro component into our component include the standard webdynpro component SALV_WD_TABLE in the used component of the component framework.
For the methods of the used external component to be accessed in our view add the interface controller of the alv component to our component.
Actually, there are ways of using the external component.
- Component usage with the controller access.
- Component usage without the controller access.
Component usage without the controller access.
If we only wants to display the external component without modifying the data of its interface controller or use its functions we can omit the declaration of the interface controller in our controller.
Component usage without the controller access.
If we wants to modify the data or use its function then we have to declare the interface controller of the external component in the properties tab of our view.
In our case as we are going to access the functionality of the external component we need the interface controllers access.
Click on create controller usage.
Double click on the interface controller in the popup to add the interface controller of the alv to our view.
Doing so will create a two methods in the interface created for the view at the time of creation of component. You can see the view in the attributes tab of the view controller if_ followed by the name of the view.
The two methods are namely,
The first method wd_cpifc_ followed by the name which we have provided for the component in the used component list of the component framework will be created. This will get us the object reference for the interface controller of the alv component.
Remember, three type of interface will be created at the time of creation of any component with naming conventions namely.
If_ This type of interface is created in every controller followed by the controller name and the methods in this interface can be accessed only within those controller.
IG_ this type of interface are created in the component controller and the methods in this interface are accessible across the controller. This interface is used for the cross controller communication within the component. These methods cannot be accessed via other components.
IWCI_ followed by the name of the component avoiding z in case of custom component will be created at the time of creation of component. This interface is used for the cross component communication.
The first method which I indicated earlier will provide me the object reference for the ALV components interface controller using which component which we are creating now will communicate with the alv component and access the methods of the alv component to use its functionality.
The second method wd_cpuse_ followed by the name which we have provided for the component in the used component list of the component framework will be created. This will get us the object reference component usage for the alv component created in our controller. By the above step you would now be able to see the component usage for the alv component created in our component which will not be earlier adding the interface controller to our view controller.
Step 3 : Go to the layout tab of the view controller and create a view container UI element as shown below.
Provide the ID and type for the UI element.
The purpose of this view container UI element is to hold the view of the another component or another view of the same component. Since we are reusing the functionality of the standard webynpro component the result will be displayed in the view of that component. In order to display the result in our window we created a view container element and bring the view of the alv component in our window.
Step 4 : Now go the window tab of the window controller, to add the view of the ALV component to the view container UI element which we have inserted earlier.
Expand the view embedded in the window and right click on the view container UI element to embedd a view.
Select the view to be embedded using F4 help.
Select the Table View of the ALV component.
Now we have added the Table view of the ALV component which displays the output to the view in our window. Now when the component executes and display the output it will be displayed in our window.
So far we have created the means to display the data in the our window. Before that we have to pass the data to the external component so that it will process the data and display it in the table view of the component which can be viewed in our window.
To pass the data create a context node in the component controller of required structure. In this scenario I am going to display the serial number, observation and status of which status will be a drop down.
Step 5: Create the context node in the component controller as shown below.
Enter the name for the node and choose the cardinality and press enter.
Add attributes to the context node as shown below.
Enter the attribute name and type of attribute and press enter.
Similarly create two other attributes observation and status of type string.
Now go to the context tab of the view controller and drag and drop the context node of the component controller in the view controller to be accessible by the view.
Now pass the data to the external component via component usage. If you see in the interface controller usage which we created for the ALV component, it has a context node call data. Mapping the context node observation which contains our data to the data node of the interface controller will faciliate the data transport to external component. (Note : See binding concept for more clarity on this).
Click on the create controller usage.
Choose the component controller from the Pop-Up.
Map the context node to the data context node.
You will now be able to see the change in the binding direction of the context node data.
Step 6: In the doinit method of the view controller add some records to the context node to be displayed in the alv output table.
Set the node as table operation.
Code will be generated as below.
Note : I have removed the unwanted code.
Modify the code as below.
Save and activate the whole component.
Step 7: Create an application and test the component.
Output:
In this result let us make the status column to be drop down.
Step 8 : Go to the context tab of the component controller and add a attribute to the context node to hold the values of the drop. The type of the attribute must be of a table type that holds n no of records for the drop down list. SAP has provided with a standard table type for setting the drop down. WDR_CONTEXT_ATTR_VALUE_LIST
This table type has the structure that contains fields.
Value field of the structure is the key indicator and the text field holds the value for the drop down.
Create an attribute in the component controller as shown below.
Update the context node in the view controller.
Delete the external mapping to the data node of ALV component usage and redefine it again.
Redefine the mapping by dragging and dropping the context node of the component controller to the data node of the alv’s component usage as we did earlier.
Step 9 : Go to the doinit method of the view controller and do the following to change the settings of the ALV component.
Instantiating the used component:
Regardless of whether we are using the component usage with or without the controller access it has to be instantiated to check whether the component usage is active or not.
In the general tab of the code wizard, select the radio button instantiate the used component and select the component use using the F4 help and click on enter button.
Codes will be generated as below.
This code get the object reference of the component usage using the method which was created in the at the time of adding the interface controller access to the properties tab of my view.
Method call in the current controller:
To access the functions of the interface controller of the ALV component and to utilize these functions I need the object reference to the interface controller of the ALV component.
In the general tab of the code wizard, click on the radio button method call in the current controller and select the interface controller of the alv using the F4 help. Call the method get model to get the object reference for the configuration class of ALV table.
Using the object reference to the configuration call CL_SALV_WD_CONFIG_TABLE all these below mentioned settings to the alv table can be configured.
Code from the code wizard will be generated as below.
This code gets the object reference of the alv interface controller using the method which was created in the interface of the view which I mentioned earlier.
Using the object reference to the interface controller of the select option it access the method get_model of the cross component interface IWCI_SALV_WD_TABLE which in turn returns the object reference to the configuration class of the ALV table.
Now we got the access to the table, we need the object reference of the column in the table to modify that column with the cell editor we want.
The table configuration class consist of a interface IF_SALV_WD_COLUMN_SETTINGS which contains a method get_column which will return the object reference to the column.
Using pattern call the get column method using the class for the ALV table.
Code will be generated as follows.
Replace the object reference me with object reference referring to the class and pass the attribute of the context node which will be the ID of the column and get the object reference that the method is returning by creating a variable of returning type.
Modify the code as below.
This will now contain the object reference for the column of type cl_slav_wd_column. Using the methods of this class we can modify the settings of the column.
This class contains a method called set cell editor which determine the type of UI element the column is supposed to have. By default it will be a text view. To change the cell editor of the column we need to pass the object reference of class belonging to the UI element type to the importing parameter of this method.
Let us create an object reference for the drop down UI element class.
In tcode SE24 for class builder, if you search with CL_SALV_WD_UIE* it will list you the list of class for the cell editor available. Choose the class CL_SALV_WD_UIE_DROPDOWN_BY_IDX for the drop down by index UI element.
The constructor method of the class for drop down has an importing parameter selected_key_fieldname to which we need to pass the attribute of the field for which we are going to set the drop down.
Write the codings as below.
Now the object has been created, now we have to specify the valueset for the drop down. There is a method SET_VALUESET_FIELDNAME in the class for the drop down which determines which attribute of the context node contains the values for the drop down In our case it the valueset attribute.
Let us set the valueset attribute to the SET_VALUESET_FIELDNAME so that it will pick the drop down values what we populate in the valueset attribute and display it.
Then set the type of the drop down using the same class method set_type.
This will determine what kind of dropdown is to be displayed in the screen.
Now let us pass this object to the set cell editor method of the column and change the cell editor to drop down.
Using the object reference to the column we have now set the cell editor of the column. The ALV table which was displayed by default will be an read only and it will overshade the drop down UI element which was created so let us disable the read only property of the table.
The the object reference of the configuration class for the table set the read only property of the table to be false.
Now put the value set for the drop down in the attribute valueset and bind it to the context node.
Load the drop down valueset in the internal table of type which we have provided for valueset attribute and pass it to the valueset attribute and bind it.
Save and activate the whole component and test the application.
Output :
Codings in DOINIT method.
DATA LO_ND_OBSERVATION TYPE REF TO IF_WD_CONTEXT_NODE.
DATA LT_OBSERVATION TYPE WD_THIS->ELEMENTS_OBSERVATION.
DATA LS_OBSERVATION TYPE WD_THIS->ELEMENT_OBSERVATION.
* Getting the object reference of the context node observation
LO_ND_OBSERVATION = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_OBSERVATION ).
data : ls_valueset type WDR_CONTEXT_ATTR_VALUE,
lt_valueset type WDR_CONTEXT_ATTR_VALUE_LIST.
ls_valueset-VALUE = '01'.
ls_valueset-TEXT = 'OPEN'.
append ls_valueset to lt_valueset.
clear ls_valueset.
ls_valueset-VALUE = '02'.
ls_valueset-TEXT = 'CLOSED'.
append ls_valueset to lt_valueset.
clear ls_valueset.
* Populating some records in the context node.
ls_observation-sno = 1.
ls_observation-observation = 'Material not in shape'.
ls_observation-status = ' '.
ls_observation-valueset = lt_valueset.
append ls_observation to lt_observation.
clear ls_observation.
ls_observation-sno = 2.
ls_observation-observation = 'Material finishing done'.
ls_observation-status = ' '.
ls_observation-valueset = lt_valueset.
append ls_observation to lt_observation.
clear ls_observation.
* Bind the datas to the context node.
LO_ND_OBSERVATION->BIND_TABLE( NEW_ITEMS = LT_OBSERVATION SET_INITIAL_ELEMENTS = ABAP_TRUE ).
* ALV Settings.
* Instantiating the used component.
DATA LO_CMP_USAGE TYPE REF TO IF_WD_COMPONENT_USAGE.
LO_CMP_USAGE = WD_THIS->WD_CPUSE_ALV( ).
IF LO_CMP_USAGE->HAS_ACTIVE_COMPONENT( ) IS INITIAL.
LO_CMP_USAGE->CREATE_COMPONENT( ).
ENDIF.
* Method call in the current controller.
DATA LO_INTERFACECONTROLLER TYPE REF TO IWCI_SALV_WD_TABLE .
LO_INTERFACECONTROLLER = WD_THIS->WD_CPIFC_ALV( ).
DATA LV_VALUE TYPE REF TO CL_SALV_WD_CONFIG_TABLE.
LV_VALUE = LO_INTERFACECONTROLLER->GET_MODEL(
).
* Get the column address of the table whose cell editor we need to change as drop down.
data : lo_status type ref to CL_SALV_WD_COLUMN .
CALL METHOD LV_VALUE->IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMN
EXPORTING
ID = 'STATUS'
RECEIVING
VALUE = lo_status.
* Creating an object for UI element.
data : lo_drop type ref to CL_SALV_WD_UIE_DROPDOWN_BY_IDX.
create object lo_drop exporting selected_key_fieldname = 'STATUS'.
* Set the valueset of the field name
CALL METHOD LO_DROP->SET_VALUESET_FIELDNAME
EXPORTING
VALUE = 'VALUESET'.
* Set type
CALL METHOD LO_DROP->SET_TYPE
EXPORTING
VALUE = IF_SALV_WD_C_UIE_DRDN_BY_INDEX=>TYPE_KEY_VALUE.
* Making the cell as a drop down
CALL METHOD LO_status->SET_CELL_EDITOR
EXPORTING
VALUE = LO_DROP.
* Setting read only
CALL METHOD LV_VALUE->IF_SALV_WD_TABLE_SETTINGS~SET_READ_ONLY
EXPORTING
VALUE = ABAP_FALSE.
0 Comments:
Post a Comment