Skip to Content

Follow the below step to create an simple WebDynpro Application using Contextual Panel UI

Step 1: Goto T-code : SE80

Step 2: Create New WebDynpro Component “ZCONTEXT_PANEL


Step 3:  After creating component activate the entire Component and controllers. In view, insert Contextual panel UI element



Step 4: Insert view switch element inside contextual panel element



Step 5: Insert free contextual panel to insert other UI element



Step 6: Insert text view in free contextual area



Step 7: Create another contextual panel


Step 8: Insert free contextual area in second contextual panel


Step 9: Insert transparent container inside free contextual area


Step 10: Insert two transparent containers inside main transparent container


Step 11: Insert text view in both transparent containers


Step 12: Create Two Nodes as below

Node1 ‘REP

                Attribute ‘REP’ type String


                Attribute ‘FIRST’ type Boolean

                Attribute ‘SECOND’ type Boolean


Step 13: Bind REP node in Item source properties of view switch element and Bind REP attribute in item text properties of view switch element


Step 14: Create method ‘SHOW’for view switch element


Step 15: Bind the attribute first from visibility node  to the visibile properties of tc_first element and Bind the attribute Second from visibility node  to the visibile properties of tc_second element

Step 16: Use below Code in WDDOINIT

METHOD wddoinit .
DATA : lo_nd_reports      TYPE REF TO   if_wd_context_node.
DATA : lo_nd_visibility   TYPE REF TO   if_wd_context_node.
DATA : ls_reports         TYPE          wd_this->element_rep.
DATA : lt_reports         TYPE          wd_this->elements_rep.

* Default Graph Show
lo_nd_visibility = wd_context->get_child_node( name = wd_this->wdctx_visibility ).

lo_nd_visibility->set_attribute( name = ‘FIRST’ value = abap_true ).
lo_nd_visibility->set_attribute( name =
‘SECOND’ value = abap_false ).

lo_nd_reports = wd_context->get_child_node( name = wd_this->wdctx_rep ).

* Setting the Drop Down & Other Values
ls_reports-rep =
APPEND ls_reports TO lt_reports.

ls_reports-rep = ‘SECOND’.
APPEND ls_reports TO lt_reports.

lo_nd_reports->bind_table( lt_reports ).


Step 17: Use below code in Method SHOW

METHOD onactionshow .

DATA  lo_nd_reports     TYPE REF TO   if_wd_context_node.
DATA  lo_nd_visibility  TYPE REF TO   if_wd_context_node.
DATA  ls_visibility     TYPE          wd_this->element_visibility.

lo_nd_reports = wd_context->get_child_node( name = wd_this->wdctx_rep ).
lo_nd_reports->set_lead_selection_index( index = index ).
lo_nd_visibility = wd_context->get_child_node( name =

IF index = 1.
ls_visibility-first   =  abap_true.
ls_visibility-second    = abap_false.

ELSEIF index = 2.
ls_visibility-first   =  abap_false.
ls_visibility-second   =  abap_true.


lo_nd_visibility->set_static_attributes( EXPORTING static_attributes = ls_visibility ).


Second panel result will be display based on action taken in first contextual panel


To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply