Static and Dynamic Context Menu in ABAP Web Dynpro

By M Singh

This tutorial covers following points

1. Create context menu and attach it to UI Element statically.

2. Create context menu and attach it to UI Element dynamically.

Steps.

Create a Web Dynpro component “ZWD_CONTEXT_MENU”

Activate WD component and open the view “V_MAIN”

1.     Open “Context”  tab and create node “INPUT”

2.     Create attributes “ID” and “NAME” of type “CHAR5” and “CHAR10” respectively.

3.     Also create another node “TABLE” with cardinality 0:n

4.     Create attributes “ID” and “NAME” of type “CHAR5” and “CHAR10” respectively also for “TABLE” node.

5.     Now click on “Action” tab and create these 4 actions “RESET” “SAVE” “RELOADT” and “CLEART”.

6.     Now click on “Layout” tab and Make layout like as shown below. Please refer “element and property table” for designing layout.

Table of element and their property

Element ID

Parent Ele ID

Element Type

Attribute

Value

Note

CONTEXT_MENUS

 

context_menus

     

DYN_MENU

CONTEXT_MENUS

Menu

title

DYN_MENU

 

TAB_CLEAR

DYN_MENU

MenuActionItem

text

Clear table

 

TAB_CLEAR

DYN_MENU

MenuActionItem

onAction

CLEART

 

TAB_RELOAD

DYN_MENU

MenuActionItem

text

Reload Initial data

 

TAB_RELOAD

DYN_MENU

MenuActionItem

onAction

RELOADT

 

STATIC_MENU

CONTEXT_MENUS

Menu

title

STATIC_MENU

 

IN_SAVE

STATIC_MENU

MenuActionItem

text

Save Input

 

IN_SAVE

STATIC_MENU

MenuActionItem

onAction

SAVE

 

IN_RESET

STATIC_MENU

MenuActionItem

text

Reset Input

 

IN_RESET

STATIC_MENU

MenuActionItem

onAction

RESET

 
           

ROOTUIELEMENTCONTAINER

 

TransparentContainer

contextMenuBehaviour

Provide

 

ROOTUIELEMENTCONTAINER

 

TransparentContainer

contextMenuId

STATIC_MENU

 

FORM_CONTAINER

ROOTUIELEMENTCONTAINER

TransparentContainer

Layout

FormLayout

 

FORM_CONTAINER

ROOTUIELEMENTCONTAINER

TransparentContainer

labeledBy

FORM_CONTAINER_HEADER

 

FORM_CONTAINER_HEADER

FORM_CONTAINER

SectionHeader

text

Enter data below

 

FORM_CONTAINER_HEADER

FORM_CONTAINER

SectionHeader

colCount

8

 

ID_LBL

FORM_CONTAINER

Label

Layout Data

FormHeadData

 

ID_LBL

FORM_CONTAINER

Label

text

ID

 

ID_LBL

FORM_CONTAINER

Label

labelFor

ID

 

ID_LBL

FORM_CONTAINER

Label

colSpan

1

 

ID

FORM_CONTAINER

InputField

value

V_MAIN.INPUT.ID

Bind to attribute "id" of node "Input"

ID

FORM_CONTAINER

InputField

colSpan

1

 

NAME_LBL

FORM_CONTAINER

Label

Layout Data

FormHeadData

 

NAME_LBL

FORM_CONTAINER

Label

text

NAME

 

NAME_LBL

FORM_CONTAINER

Label

labelFor

Name

 

NAME_LBL

FORM_CONTAINER

Label

colSpan

1

 

NAME

FORM_CONTAINER

InputField

value

V_MAIN.INPUT.NAME

Bind to attribute "name" of node "Input"

NAME

FORM_CONTAINER

InputField

colSpan

2

 

BUT_SAVE

FORM_CONTAINER

Button

Layout Data

FormHeadData

 

BUT_SAVE

FORM_CONTAINER

Button

text

Save

 

BUT_SAVE

FORM_CONTAINER

Button

colSpan

1

 

BUT_SAVE

FORM_CONTAINER

Button

onAction

SAVE

 

TABLE

FORM_CONTAINER

Table

Layout Data

FormHeadData

 

TABLE

FORM_CONTAINER

Table

dataSource

V_MAIN.TABLE

Bind to node "table"

TABLE

FORM_CONTAINER

Table

rowSpan

10

 

TABLE_ID

TABLE

TableColumn

     

TABLE_ID_EDITOR

TABLE_ID

TextView

text

V_MAIN.TABLE.ID

Bind to attribute "id" of node "Table"

TABLE_ID_HEADER

TABLE_ID

Caption

text

ID

 

TABLE_NAME

TABLE

TableColumn

     

TABLE_NAME_EDITOR

TABLE_NAME

TextView

text

V_MAIN.TABLE.NAME

Bind to attribute "name" of node "Table"

TABLE_NAME_HEADER

TABLE_NAME

Caption

text

Name

 
Click here to continue...
 

Please send us your feedback/suggestions at webmaster@SAPTechnical.COM 

HomeContribute About Us Privacy Terms Of Use • Disclaimer • SafeCompanies: Advertise on SAPTechnical.COM | Post JobContact Us  

Graphic Design by Round the Bend Wizards

footer image footer image