How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming
The UI element ViewContainerUIElement is an area within a view that contains another view. It doesn’t have its own properties,but inherits properties from the abstract base class UIElement. We create a WD Component,a registration form with three views (Fig).In the view V_VIEW,we insert two ViewContainerUIElement’s (VCU_1 and VCU_2) required to embed the V_STEP1 and V_STEP2 views. The context node is created in COMPONENTCONTROLLER because we have to share data among different view controllers: V_STEP1, V_STEP2, V_VIEW.
WD component structure
The node INFO has the cardinality 0...1, Singleton. The attributes NAME, EMAIL, CITY are of STRING type, and the attribute COUNTRY is of Y_DEFORDOMAIN type defined in the ABAP Dictionary, domain that holds all the EU member states.
At runtime, the view V_VIEW is the default view (e.g. the view that is first displayed when the window is called). The layout of this view is presented in fig.
View V_VIEW layout
Because we want to display more views in the same time and in the same window,we are going to use ViewContainerUIElement. At runtime,when the screen is displayed for the first time, we want only the fields from V_VIEW view to be visible until the user presses the LinkToAction UI Element. This is the reason why we embed as default in VCU_1 and VCU_2 EMPTYVIEWs (Fig.).An EMPTYVIEW is a special type of view, automatically generated, that can be used to hide another view.
As we can see, only the UI Elements from the default view V_VIEW are displayed, because the VCU_1 and VCU_2 have EMPTYVIEWs as default. All these are schematically shown in Fig.
Embedding Views in Window
After the user presses the LinkToAction UI element, we want to show in the VCU_1 the view V_STEP1. To be able to do this, we define an outbound plug in the V_VIEW view (Fig).
Definition of an outbound plug in the view V_VIEW
V_STEP1 view layout
To be able to show the view V_STEP1 content when the user presses the LinkToAction UI Element, we have to define an inbound plug in the view V_STEP1 (Fig).
Definition of an Inbound Plug in the view V_STEP1
Now,we embed the view V_STEP1 in the ViewContainerUIElement VCU_1 and we create the navigation link (Fig1).
When the user presses the LinkToAction UI element, the Framework triggers the event handler method onactionlta1. When we create an outbound plug for a view,a fire method is added to its interface. A fire method of our outbound plug op_to_v_ step1 is called with the statement:
We have created a navigation link from OP_TO_V_STEP1 to IP_V_STEP1. When this method is fired, the view V_STEP1 is displayed. To integrate the fire method, we can use the Web Dynpro Code Wizard (Fig.).
Calling the web Dynpro code wizard
Hereunder,we have to display the view V_STEP2 when the user presses the LinkToAction UI element (ID = LTA_NEXT2). To do this, we define an outbound plug named OP_TO_V_STEP2 in the view V_STEP1,and we fire the generated method (Fig).
Outbound plug, event handler method
V_STEP2 view layout
After this, we have to define an inbound plug named IP_V_STEP2, we embed the view V_STEP2 into the ViewContainerUIElement VCU_2 and we create the corresponding navigation link (Fig).
RUNTIME CLASS: CL_WD_VIEW_CONTAINER_UIELEMENT
The implementation of a dynamic ViewContainerUIElement contains the following statements (Listing):
data lr_vcu type ref to cl_wd_view_container_uielement.
lr_vcu = cl_wd_view_container_uielement=>new_view_container_uielement (id = 'VCU').
In this case, after dynamically creating the View ContainerUI Element,we have to dynamically create the view embedding and the navigation links.