SAP Tech Pro

SAP Technical Blog
Topprice Price Comparison

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

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

This UI element offers the possibility to create a header for a page.In the title content and the PageHeader Area, we can insert other UI elements. We create a WD component with the structure presented in Fig.

WD component structure

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

We use the view V_VIEW as Master View. Here, we insert a PageHeader UI element that contains two LinkToAction UI elements, and in the PageHeader Area we insert a ViewContainerUIElement. When the user interacts with the LinkToAction UI elements,we show in the ViewContainerUIElement one of the two slave views V_COUNTRYor V_CANDIDATE. All these are schematically presented in Fig.

Application structure

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

After the PageHeader UI element is inserted into the V_VIEW view,we can insert a PageHeader Title Content (Fig.–right) and one or more PageHeader Area(s) (Fig.–left).

Inserting the title content and PageHeader area

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

In a PageHeaderArea, we can insert how many other UI elements we want.Here, we have chosen to insert only one UI element (ViewContainerUIELement).As design options,it has: Standard, Emphasized and transparent.For our example,we have the default design: Standard. To see on screen the other Page Header Area designs,we can choose values from the list, one by one, and see the result in the view designer, or we can run again the application and see the different changes.In the system,we can find two WD components where we can see the UI elements and the effect of changing certain properties on these UI elements. These components are WDR_TEST_EVENTS and WDR_TEST_UI_ELEMENTS. The V_VIEW has the layout presented in Fig.

V_VIEW view layout

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

Each view (V_CANDIDATE and V_COUNTRY) has a Table UI element where we show the data stored in our database table YPERSON and YEU_COUNTRIES. The resulted runtime is presented in Fig.

Runtime

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

Dynamic Programming

RUNTIME CLASS: CL_WD_PAGE_HEADER

Hereunder,we present a table showing the correspondence between the view designer name and the runtime name, with the proper types,in case of dynamic programming of a PageHeader UI element (Table).

clip_image012

For the PageHeader UI element we have, as aggregation, the Area and the TitleContent elements. The Area runtime class is CL_WD_PAGE_HEADER_ AREA.

The implementation of a dynamic PageHeader UI element (with pageHeader title) and a PageHeaderArea (with a textView UI element) contains the following statements (Listing):

Dynamic programming of a PageHeader UI element


METHOD wddomodifyview.

DATA lr_pageheader TYPE REF TO cl_wd_page_header.

DATA lr_flow_data TYPE REF TO cl_wd_flow_data.

DATA lr_container TYPE REF TO cl_wd_uielement_container.

DATA lr_area TYPE REF TO cl_wd_page_header_area.

IF first_time EQ abap_true.

lr_container ?= view->get_element('ROOTUIELEMENTCONTAINER').

lr_pageheader = cl_wd_page_header=>new_page_header(

id = 'PH_PAGEHEADER'

text_direction = cl_wd_page_header=>e_text_direction-ltr

).

lr_pageheader->set_title('DYNAMIC PAGEHEADER').

lr_flow_data = cl_wd_flow_data=>new_flow_data(element =

lr_pageheader).

lr_container->add_child(lr_pageheader).

lr_area = cl_wd_page_header_area=>new_page_header_area(

id = 'PAGEHEADAREA'

design = cl_wd_page_header_area=>e_design-emphasized

).

DATA lr_textview TYPE REF TO cl_wd_text_view.

lr_textview = cl_wd_text_view=>new_text_view(

id = 'TXT'

text = 'PageHeaderArea'

).

lr_area->set_content(the_content = lr_textview).

lr_pageheader->add_area(the_area = lr_area).

ENDIF.

ENDMETHOD.

Add comment

Before Buying, Compare Prices at Topprice.in

Topprice.in