Tabstrip

Document Prepared By: Prajakta Bhivare (Enteg Infotech PVT Ltd)
Tab strip UI element allows the display of the tab page. The user can toggle
between several pages by selecting specific tab. The same window will be
shared by all the pages and used for displaying the content. User can
navigate on any of the tabs by selecting tab title.
Scenario – Use tab strip with three different tabs, two of them must be input
tabs and third tab should display details entered in previous tabs.
Create context node with the attributes relevant to the scenario , as I have
taken Personal Information to display.
Hence, Context node consist of the attributes as shown below

We will use the same nodes in third tab so both the nodes MAIN_INFO &
DETAIL_INFO should be of 1:N cardinality.
Save and activate the component controller.
Map the component controller context node to View Context node.
Insert UI Element TABSTRIP to ROOTEUIELEMENTCONTAINER with
MatrixLayout for the concern of alignments.

Insert Tabs .Insert tabs in to the tab strips.

As we want more than one input fields. So we can use option for binding as Create Container Form. We have taken context node in view and the same attributes we will use in first tab. . insert GROUP UI ELEMENT passing through Insert Content.

layout will be For binding of context node to second tab with personal details.On binding with the context node. do the same as we followed steps above .

so third screen must be in display format. . data should come from first two tabs.For third screen.

To incorporate this. * lo_nd_main_info->bind_table( lt_main_info ). lt_main_info TYPE wd_this->elements_main_info. lo_el_main_info TYPE REF TO if_wd_context_element. insert UI Element Button on first and second tabs. ls_main_info TYPE wd_this->element_main_info. lo_el_main_info->get_static_attributes( IMPORTING static_attributes = ls_main_info ). with the following code. * get all declared attributes lo_el_main_info->get_static_attributes( IMPORTING static_attributes = ls_main_info ). lo_el_main_info = lo_nd_main_info->get_element( ). . we need event handler action. endif.To take fields from first two tabs. lo_nd_main_info = wd_context->get_child_node( name = wd_this>wdctx_main_info ). Use code wizard to call the context node main_info DATA : lo_nd_main_info TYPE REF TO if_wd_context_node. Call the context node Detail_Info and bind the inputs to Internal table.

* Object Reference to context node DETAIL_INFO lo_nd_detail_info = wd_context->get_child_node( name = wd_this>wdctx_detail_info ). Activate entire application. lo_el_detail_info TYPE REF TO if_wd_context_element. lo_el_detail_info->get_static_attributes( IMPORTING static_attributes = ls_detail_info ). . lt_detail_info TYPE wd_this->elements_detail_info. Save the component. ls_detail_info TYPE wd_this->element_detail_info.* Node : DETAIL_INFO DATA : lo_nd_detail_info TYPE REF TO if_wd_context_node. lo_el_detail_info = lo_nd_detail_info->get_element( ). compile and create Webdynpro Application Component. And test the same. Give meaningful description for the wd application Press enter and save it in preferred package.

Sign up to vote on this title
UsefulNot useful