How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

SAP Tech Pro

SAP Technical Blog
Magzter [CPS] IN

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

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

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

Context structure

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

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

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

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.

Window structure

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

Runtime

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

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

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

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

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

V_STEP1 view layout

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

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

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

Now,we embed the view V_STEP1 in the ViewContainerUIElement VCU_1 and we create the navigation link (Fig1).

Window structure

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

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:

wd_this->fire_op_to_v_step1_plg( ).

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

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

Runtime

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

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

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

V_STEP2 view layout

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

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).

Window structure

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

Window structure

How to use Web Dynpro UI element – “ViewContainerUIElement” with Static and Dynamic Programming

Dynamic Programming

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.

Add comment

Before Buying, Compare Prices at Topprice.in

Topprice.in