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
Step 2:
Go to the layout of view V_MAIN and create page header ui element and set the text as below
Step 3:
Create a transparent container to hold the buttons underneath the page header ui element as below
Step 4:
Create a button BTN_VIEW1 inside the transparent container and create an action SHOW_VIEW & assign as below
Step 5:
Similarly, create another button BTN_VIEW2 and attach the action SHOW_VIEW as below
Step 6:
Create horizontal gutter ui element as below
Final View layout of V_MAIN is as below
Step 7:
Create an outbound plug TO_OTHER_VIEW as below
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:
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
Step 10:
Create an inbound plug FROM_MAIN as below
Step 11:
Similar to view V_ONE, create another view V_TWO as below
Step 12:
Create an inbound plug FROM_MAIN as below
Now save and activate whole component.
Step 13:
Create an application as below
Output:
Initial output screen is as below
Click on button "Show view 1", to embed and navigate to the view V_ONE as below
The content of view V_ONE is shown below
Click on button "Show view 2", to embed and navigate to the view V_TWO as below
The content of view V_TWO is shown below
Hope this helps for those who are looking for embedding views and navigating at runtime.
