Skip to Content
Author's profile photo Mani Sekar

Creating Simple WebDynpro ABAP using Contextual panel

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

/wp-content/uploads/2015/02/wda_c_638708.jpg

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

/wp-content/uploads/2015/02/wda_2_638711.jpg

/wp-content/uploads/2015/02/wda_3_638712.jpg

Step 4: Insert view switch element inside contextual panel element

/wp-content/uploads/2015/02/wda_4_638713.jpg

/wp-content/uploads/2015/02/wda_5_638715.jpg

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

/wp-content/uploads/2015/02/wda_6_638716.jpg

/wp-content/uploads/2015/02/wda_7_638718.jpg

Step 6: Insert text view in free contextual area

/wp-content/uploads/2015/02/wda_8_638719.jpg

/wp-content/uploads/2015/02/wda_9_638720.jpg

Step 7: Create another contextual panel

/wp-content/uploads/2015/02/wda_10_638721.jpg

Step 8: Insert free contextual area in second contextual panel

/wp-content/uploads/2015/02/wda_11_638724.jpg

Step 9: Insert transparent container inside free contextual area

/wp-content/uploads/2015/02/wda_12_638725.jpg

Step 10: Insert two transparent containers inside main transparent container

/wp-content/uploads/2015/02/wda_13_638726.jpg

Step 11: Insert text view in both transparent containers

/wp-content/uploads/2015/02/wda_14_638727.jpg

Step 12: Create Two Nodes as below

Node1 ‘REP

                Attribute ‘REP’ type String

Node2 ‘VISIBILITY

                Attribute ‘FIRST’ type Boolean

                Attribute ‘SECOND’ type Boolean

/wp-content/uploads/2015/02/wda_15_638729.jpg

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

/wp-content/uploads/2015/02/wda_16_638730.jpg

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

/wp-content/uploads/2015/02/wda_17_638731.jpg

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 =
‘FIRST’.
APPEND ls_reports TO lt_reports.

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

lo_nd_reports->bind_table( lt_reports ).

ENDMETHOD.


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 =
‘VISIBILITY’ ).

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.

ENDIF.

lo_nd_visibility->set_static_attributes( EXPORTING static_attributes = ls_visibility ).
ENDMETHOD.

Output

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

/wp-content/uploads/2015/02/wda_18_638735.jpg

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.