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.

Context Menu Demo

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.

Context Menu Demo

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.

Context Menu Demo

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.

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

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 Demo

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.

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

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

Context Menu Demo

comments powered by Disqus