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
![o1_1.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
![o2_2.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 ![]()
![]()
![]()
