Skip to Content

Sometimes there is a need to customize the standard toolbar button in ALV for Web Dynpro. Yes, we can do so, but, we can change only a limited set of properties like position, visibility, alignment etc. We cannot change properties like label, image etc. However, there is an alternative for that, we can create our custom buttons and assign the standard button functionality to it. This will save you the extra coding to be done for the custom button. Here are the detailed steps described to achieve this.

Step 1. Open SE80 transaction and create a new Web Dynpro Component.

/wp-content/uploads/2013/04/a1_205142.png

Step 2. Now include the ALV component in the “Used Web Dynpro Components”.  

/wp-content/uploads/2013/04/a2_205143.png

Step 3. Double click on Component controller and go to Properties tab. Click on “create controller usage” button. Select ALV component and press enter.

/wp-content/uploads/2013/04/a3_205144.png

Step 4. Go to Context tab. Add a context node corresponding to the table SPFLI. Set the cardinality to 0..n.

/wp-content/uploads/2013/04/a4_205147.png

/wp-content/uploads/2013/04/a5_205148.png

Step 5. Double click on Interface Controller of ALV in Component Usages. Click on “create controller usage” button. Select component controller and press enter.

/wp-content/uploads/2013/04/a6_205150.png

Step 6. Drag the node ‘SPFLI’ of component controller to the node ‘Data’ of interface controller.

/wp-content/uploads/2013/04/a7_205151.png

Step 7. Double click on MAIN view, go to layout tab, Right click on ROOTUIELEMENT and select ‘Insert Element’ to insert new element.

/wp-content/uploads/2013/04/a8_205152.png

Step 8. Insert a view container element by providing element ID and type as ‘ViewContainerUIElement’.

/wp-content/uploads/2013/04/a8_205152.png

Step 9. Double click on Main Window. Select view container element ALV in MAIN view. Right click on it.

/wp-content/uploads/2013/04/a9_205155.png

Step10. Click on Embed view and select TABLE view of ALV from the popup.

/wp-content/uploads/2013/04/a10_205154.png

Step 11. Double click on Component controller and go to Methods tab. Add a method with name “INIT_ALV_CONFIG”.

/wp-content/uploads/2013/04/a11_205156.png

Step 12. Double click on this method. Click on Web dynpro wizard and go to ‘General tab’. Initialize the web dynpro component ALV.

/wp-content/uploads/2013/04/a12_205160.png

Step 13. Call method ‘GET_MODEL’ by using the wizard option ‘Method Call in Used Controller’. And write the below code.

METHOD init_alv_config .

DATA lo_cmp_usage           TYPE REF TO if_wd_component_usage.
DATA lo_interfacecontroller TYPE REF TO iwci_salv_wd_table .
DATA lo_alv_table           TYPE REF TO cl_salv_wd_config_table.
DATA lo_del_button          TYPE REF TO cl_salv_wd_fe_button.
DATA lo_but_func            TYPE REF TO cl_salv_wd_function.
DATA lo_std_del             TYPE REF TO cl_salv_wd_function_std.

* Initialize used component
lo_cmp_usage =   wd_this->wd_cpuse_alv( ).
IF lo_cmp_usage->has_active_component( ) IS INITIAL.
lo_cmp_usage->create_component( ).
ENDIF.

* Get model
lo_interfacecontroller =   wd_this->wd_cpifc_alv( ).
lo_alv_table = lo_interfacecontroller->get_model( ).

* Set ALV editable
lo_alv_table->if_salv_wd_table_settings~set_read_only( abap_false ).

CREATE OBJECT lo_del_button.
* Set button text
lo_del_button->set_text( ‘Delete’ ).
* Set button image
lo_del_button->set_image_source( ‘~Icon/RemoveRow’ ).
* Set button tooltip
lo_del_button->set_tooltip( ‘Delete’ ).

* Set button function
lo_but_func = lo_alv_table->if_salv_wd_function_settings~create_function(
id = ‘DEL_SUP’ ).
lo_but_func->set_editor( lo_del_button ).
lo_but_func->set_function_std( if_salv_wd_c_std_functions=>edit_delete_row ).

* Hide the standard Button
lo_std_del = lo_alv_table->if_salv_wd_function_settings~get_function_std(
if_salv_wd_c_std_functions=>edit_delete_row ).
lo_std_del->set_visible( ’01’ ).

ENDMETHOD.

The if_salv_wd_c_std_functions interface contains the constants for all the standard toolbar functions. You can get the desired constant from this interface.

You can use this method if_salv_wd_function_settings~get_function_std to get the standard function object and you can change some of its properties (like the visibility done above).

Step 14. Double click on the method ‘WDDOINIT’ and generate the code to set data of node ‘SPFLI’. Insert the select query to retrieve the data. Call the method ‘INIT_ALV_CONFIG’ .

METHOD wddoinit .

DATA lo_nd_spfli TYPE REF TO if_wd_context_node.
DATA lt_spfli TYPE STANDARD TABLE OF spfli.

*   navigate from <CONTEXT> to <SPFLI> via lead selection
lo_nd_spfli = wd_context->get_child_node( name = wd_this->wdctx_spfli ).

* Get data from SPFLI
SELECT *
FROM spfli
INTO TABLE lt_spfli
WHERE carrid = ‘AA’.

lo_nd_spfli->bind_table( new_items = lt_spfli set_initial_elements = abap_true ).
wd_this->init_alv_config( ).

ENDMETHOD.

Step 15. Right click on web dynpro component and create a web dynpro application by providing application and description.

/wp-content/uploads/2013/04/a13_205161.png

Step 16. Fill in the required entries as follows

/wp-content/uploads/2013/04/a14_205162.png

Step 17. Save and execute the application.

/wp-content/uploads/2013/04/a15_205163.png

/wp-content/uploads/2013/04/a16_205164.png

To report this post you need to login first.

9 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply