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

Drop down by Index in ALV report.

 

 

 

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.

 

clip_image002

 

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.

 

clip_image004

 

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.

 

  1. Component usage with the controller access.
  2. 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.

 

clip_image005

clip_image007

 

 

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.

 

 

clip_image008

 

clip_image010

 

 

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.

 

clip_image012

 

Double click on the interface controller in the popup to add the interface controller of the alv to our view.

clip_image014

 clip_image016

 

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.

 

clip_image018

 

The two methods are namely,

 

clip_image019

 

 

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.

 

clip_image021

 

 

 

 

 

 

Provide the ID and type for the UI element.

 

clip_image023

 

 

clip_image025

 

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.

 

clip_image027

Select the view to be embedded using F4 help.

 

clip_image029

 

 

Select the Table View of the ALV component.

 

clip_image031

 

clip_image033

 

 

clip_image035

 

 

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.

 

clip_image037

 

Enter the name for the node and choose the cardinality and press enter.

 

clip_image039

 

 

Add attributes to the context node as shown below.

 

clip_image041

 

Enter the attribute name and type of attribute and press enter.

 

clip_image043

 

 

 

 

 

 

 

 

Similarly create two other attributes observation and status of type string.

 

clip_image045

 

 

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.

 

clip_image047

 

clip_image049

 

 

 

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).

 

clip_image051

 

Click on the create controller usage.

 

clip_image052

 

Choose the component controller from the Pop-Up.

clip_image054

 

Map the context node to the data context node.

 

clip_image056

 

 

You will now be able to see the change in the binding direction of the context node data.

 

clip_image057

 

 

 

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.

 

clip_image059

 

Code will be generated as below.

 

clip_image061

 

Note : I have removed the unwanted code.

 

Modify the code as below.

 

clip_image063

 

 

Save and activate the whole component.

 

Step 7: Create an application and test the component.

 

clip_image065

 

 

 

 

 

 

 

 

 

 

Output:

 

 

clip_image067

 

 

 

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.

 

clip_image069

 

 

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.

 

 

clip_image071

 

 

clip_image073

 

Update the context node in the view controller.

 

clip_image075

 

Delete the external mapping to the data node of ALV component usage and redefine it again.

clip_image077

 

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.

 

clip_image078

 

Codes will be generated as below.

 

clip_image079

 

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.

 

clip_image080

 

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.

 

clip_image082

 

 

 

 

 

 

Using pattern call the get column method using the class for the ALV table.

 

clip_image084

 

Code will be generated as follows.

 

clip_image086

 

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.

clip_image088

 

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.

 

clip_image090

 

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.

 

clip_image092

 

 

Write the codings as below.

 

clip_image094

 

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.

 

clip_image096

 

Then set the type of the drop down using the same class method set_type.

 

clip_image098

 

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.

 

clip_image100

 

 

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.

 

clip_image102

 

 

 

 

Now put the value set for the drop down in the attribute valueset and bind it to the context node.

 

clip_image104

 

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 :

 

clip_image106

 

 

 

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.

 

 

 

About Arun

0 Comments:

Post a Comment

Powered by Blogger.