How to Create a Context Menu in Web Dynpro ABAP

Creating customized menu for right click is always cool and creating such menu’s in Web Dynpro ABAP is quite easy. In this article we are going to see creating context menu for a TextEdit UI element which has to be filled with the text ‘Hello World’ on clicking an action in the menu.

Begin by creating a new component and place a TextEdit UI element in the layout with the ID as TEXT_EDIT. Now you need a context attribute to bind TEXT_EDIT. Create an attribute named TEXT of type STRING under the context and bind it to value property of TEXT_EDIT.

Now we have to create the context menu. Right click CONTEXT_MENUS just above the ROOTUIELEMENTCONTAINER in the layout and create a new menu, then create a MenuActionItem under the menu. Use the naming as shown in the picture below. Create an action named SAY_HELLO for the MenuActionItem SAY_HELLO.

In the action, we have to write the code for filling the TextEdit UI element with ‘Hello World’ which in turn means we have to set ‘Hello World’ to attribute TEXT of context root node.

method ONACTIONSAY_HELLO .
  wd_context->set_attribute( exporting name = 'TEXT'
                                       value = 'Hello World' ).
endmethod.

Now we have to specify for which element the context menu should be shown. This is done through coding as I’m using NetWeaver 7.00. However, in recent versions you will have the property ContextMenuId on certain UI elements (UI elements that inherit CL_WD_CTXT_MENU_PROVIDER) and you don’t have to write the following code if you have that property.

We have a method named WDDOONCONTEXTMENU by default with three parameters as shown below.

CONTEXT_MENU_EVENT contains the information about on which element right click took place. CONTEXT_MENU_MANAGER has all the menus associated with a view and the returning parameter MENU is the menu shown on the right click.

method WDDOONCONTEXTMENU .
  if context_menu_event->originator->id = 'TEXT_EDIT'.
    menu = context_menu_manager->
            get_context_menu( 'TEXT_MENU' ).
  endif.
endmethod.

Now the menu appears only if you right click on the TEXT_EDIT.