Purpose:

Application to demonstrate the scenario of embedding views into a view container and navigating dynamically at run time.

Scenario:

I would like to explain the steps involved in creating view container and embedding views along with navigation at run time.

  • View V_MAIN contains 2 buttons “show view1” & “show view2”, and view container is created at run time and it is used for embedding other views
  • V_ONE & V_TWO views are embedding and navigated based on respective button action.

Pre-requisite:

Basic knowledge of Webdynpro ABAP & OO ABAP


Step by step process:


Step 1:


Go to t-code SE80 and create a webdynpro component ZWD_RK_DYNAMIC_VIEW_EMBED as below

1.PNG

Step 2:


Go to the layout of view V_MAIN and create page header ui element and set the text as below

2_1.PNG

Step 3:

Create a transparent container to hold the buttons underneath the page header ui element as below

2_2.PNG

Step 4:

Create a button BTN_VIEW1 inside the transparent container and create an action SHOW_VIEW & assign as below

2_3.PNG

Step 5:

Similarly, create another button BTN_VIEW2 and attach the action SHOW_VIEW as below

2_4.PNG

Step 6:

Create horizontal gutter ui element as below

2_5.PNG

Final View layout of V_MAIN is as below

2_6.PNG

Step 7:

Create an outbound plug TO_OTHER_VIEW as below

2_7.PNG

Step 8:

Go to the method WDDOMODIFYVIEW( ) of V_MAIN and write the below logic to create view container ui element


WDDOMODIFYVIEW( )

method WDDOMODIFYVIEW .

  IF first_time EQ abap_true.

    DATA lo_root_cont TYPE REF TO cl_wd_uielement_container.

    DATA lo_root      TYPE REF TO cl_wd_transparent_container.

    DATA lo_vcu       TYPE REF TO cl_wd_view_container_uielement.

    lo_vcu =

    cl_wd_view_container_uielement=>new_view_container_uielement(

     enabled      = abap_true

      id           = ‘VCU_DYNAMIC’

        ).

    cl_wd_flow_data=>new_flow_data(

      EXPORTING

        element     = lo_vcu

    ).

    lo_root ?= view->get_root_element( ).

    lo_root->add_child( lo_vcu ).

  ENDIF.

endmethod.


Go to the event handler ONACTIONSHOW_VIEW and write the below code – for embedding views and navigating based on action


Parameters:

param.PNG

Logic:


ONACTIONSHOW_VIEW( )

method ONACTIONSHOW_VIEW .

   DATA:

      lv_source_vusage_name   TYPE string,

      lv_source_window_name   TYPE string,

      lv_source_plug_name     TYPE string,

      lv_target_plug_name     TYPE string,

      lv_curr_embed_pos       TYPE string,

      lv_target_embed_pos     TYPE string,

      lv_target_view_name     TYPE string,

      lo_view_ctrl            TYPE REF TO if_wd_view_controller,

      lo_view_usage           TYPE REF TO if_wd_rr_view_usage,

      lx_runtime_repository   TYPE REF TO cx_wd_runtime_repository.

  lo_view_ctrl = wd_this->wd_get_api( ).

  “get view usage ref

  lo_view_usage = lo_view_ctrl->get_view_usage( ).

  lv_source_vusage_name = lo_view_usage->get_name( ).

  lv_target_embed_pos = ‘V_MAIN/VCU_DYNAMIC’.

  CASE id.

    WHEN ‘BTN_VIEW1’.

      lv_target_view_name = ‘V_ONE’.

    WHEN ‘BTN_VIEW2’.

      lv_target_view_name = ‘V_TWO’.

    WHEN OTHERS.

  ENDCASE.

  lv_target_plug_name = ‘FROM_MAIN’.

  lv_source_plug_name = ‘TO_OTHER_VIEW’.

  lv_source_window_name =

  lo_view_ctrl->get_embedding_window_ctlr( )->get_window_info( )->get_name( ).

  TRY.

      lo_view_usage->delete_all_navigation_targets( plug_name = ‘TO_OTHER_VIEW’  ).

      lo_view_ctrl->do_dynamic_navigation(

                EXPORTING

                  source_window_name        = lv_source_window_name

                  source_vusage_name        = lv_source_vusage_name

                  source_plug_name          = lv_source_plug_name

                  target_view_name          = lv_target_view_name

                  target_plug_name          = lv_target_plug_name

                  target_embedding_position = lv_target_embed_pos ).

    CATCH cx_wd_runtime_repository INTO lx_runtime_repository .  “

  ENDTRY.

endmethod.



Step 9:

Create view V_ONE and go to the layout of view and create an ui element TXT_VIEW as below

3_2.PNG

Step 10:

Create an inbound plug FROM_MAIN as below

3_3.PNG

Step 11:

Similar to view V_ONE, create another view V_TWO as below

4_1.PNG

Step 12:

Create an inbound plug FROM_MAIN as below

4_2.PNG

Now save and activate whole component.


Step 13:

Create an application as below

5.PNG

Output:


Initial output screen is as below

o1.PNG


Click on button “Show view 1”, to embed and navigate to the view V_ONE as below

/wp-content/uploads/2014/06/o1_1_482606.jpg

The content of view V_ONE is shown below

o2.PNG

Click on button “Show view 2”, to embed and navigate to the view V_TWO as below

/wp-content/uploads/2014/06/o2_2_482608.png

The content of view V_TWO is shown below

o3.PNG


Hope this helps for those who are looking for embedding views and navigating at runtime.


I appreciate your comments/feedback/suggestions  

To report this post you need to login first.

5 Comments

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

  1. hari krishnan

    Hi Rama,

    Good article.I have a requirement where i need to create a view container dynamically in my view1 when a button in view1 is pressed.The view container will have the TABLE interface view of salv_wd_component.From your article i understood how to navigate to the desired view contaner dynamically.But how to dynamically create a view container and embed a view of another component in the same view?

    (0) 

Leave a Reply