SAP Tech Pro

SAP Technical Blog
Topprice Price Comparison

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

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

 

This UI element allows us to display some tabs, and the user can toggle from a tab page to another. We create a WD Component, a registration form with the structure presented in Fig.

WD component structure

How to use Web Dynpro UI element – “TabStrip”

We create a TabStrip UI element and add two Tabs. To add tabs, we right-click on the tabStrip name and, from the contextual menu, we choose Insert Tab.When the user presses the Next button, we navigate to the next tab and we show the data entered by the user in the registration form of the first tab. The view Layout is presented in Fig.

View layout

How to use Web Dynpro UI element – “TabStrip”

Hereunder, we present a table with some of the tabStrip UI element properties that can be bound,and the attribute type in case the property is bindable (Table).

How to use Web Dynpro UI element – “TabStrip”

The property selectedTab of string type can be used to navigate from a tab to other one. This property set the name of the selected tab. We define a data binding between the selectedTab property and the attribute with the same name (string) defined in the node DYNAMIC in the view context.The node STUDENT has the dictionary structure YSTR_PERSON,cardinality 0...1,Singleton. The view context structure is presented in Fig.

Context structure

How to use Web Dynpro UI element – “TabStrip”

By using the wdDoInit Hook method, we populate the attribute SELECTEDTAB of the node DYNAMIC with the ID of the tab we want to be active at runtime–TAB_1 (Listing ).

Listing The wddoinit Hook method


METHOD wddoinit.

DATA lr_node TYPE REF TO if_wd_context_node.

DATA ls_data TYPE wd_this->element_dynamic.

lr_node = wd_context-get_child_node('DYNAMIC').

ls_data-selectedtab = 'TAB_1'.

lr_node-set_static_attributes(ls_data).

ENDMETHOD.

When the user presses the Next Button,the Framework triggers the event handler method onactionnext (Listing).We set the selectedtab property with the value TAB_2,by selecting in this mode the TAB_2.

Listing Event handler methodMETHOD onactionnext.

DATA lr_node TYPE REF TO if_wd_context_node.

DATA ls_data TYPE wd_this-element_dynamic.

lr_node = wd_context-get_child_node('DYNAMIC').

ls_data-selectedtab = 'TAB_2'.

lr_node-set_static_attributes(ls_data).

ENDMETHOD.


Runtime

How to use Web Dynpro UI element – “TabStrip”

Dynamic Programming

RUNTIME CLASS: CL_WD_TABSTRIP

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 TabStrip UI element (Table).For the tabStrip UI element we have, as aggregation, the Tab element.Its runtime class is CL_WD_TAB.

How to use Web Dynpro UI element – “TabStrip”

Add comment

Before Buying, Compare Prices at Topprice.in

Topprice.in