Creating Simple WebDynpro ABAP using Contextual panel

[mani_sekar]

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

Node2 ‘VISIBILITY’

                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 = '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