Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

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

clip_image002

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.

clip_image004

Insert tabs in to the tab strips.

clip_image005clip_image006clip_image007

Insert Tabs

 

 
clip_image008clip_image010

clip_image012

As we want more than one input fields, insert GROUP UI ELEMENT passing through Insert Content.

We have taken context node in view and the same attributes we will use in first tab. So we can use option for binding as Create Container Form.

clip_image015

clip_image018

On binding with the context node, layout will be

clip_image020

For binding of context node to second tab with personal details, do the same as we followed steps above

clip_image023

 

clip_image024clip_image026

clip_image028

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

clip_image030

To take fields from first two tabs, we need event handler action. To incorporate this, insert UI Element Button on first and second tabs, with the following code.

Use code wizard to call the context node main_info


  DATA : lo_nd_main_info
TYPE REF TO if_wd_context_node,
         lo_el_main_info
TYPE REF TO if_wd_context_element,
         ls_main_info
TYPE wd_this->element_main_info,
         lt_main_info
TYPE wd_this->elements_main_info.

  lo_nd_main_info = wd_context->get_child_node( name = wd_this->wdctx_main_info ).
  lo_el_main_info = lo_nd_main_info->get_element( ).


*   get all declared attributes
    lo_el_main_info->get_static_attributes(
     
IMPORTING
        static_attributes = ls_main_info ).

  lo_el_main_info->get_static_attributes(
   
IMPORTING
      static_attributes = ls_main_info ).

*  lo_nd_main_info->bind_table( lt_main_info ).
endif.

 

Call the context node Detail_Info and bind the inputs to Internal table.


* Node : DETAIL_INFO
 
DATA : lo_nd_detail_info    TYPE REF TO  if_wd_context_node,
         lo_el_detail_info    
TYPE REF TO  if_wd_context_element,
         ls_detail_info
         
TYPE        wd_this->element_detail_info,
         lt_detail_info
     
TYPE         wd_this->elements_detail_info.

* Object Reference to context node DETAIL_INFO
  lo_nd_detail_info = wd_context->get_child_node( name = wd_this->wdctx_detail_info ).
  lo_el_detail_info = lo_nd_detail_info->get_element( ).

  lo_el_detail_info->get_static_attributes(
   
IMPORTING static_attributes = ls_detail_info ).

 

Save the component, compile and create Webdynpro Application Component.

clip_image032

Give meaningful description for the wd application

clip_image034

Press enter and save it in preferred package.

Activate entire application. And test the same.

clip_image036

clip_image038

 

clip_image040

 

About Arun

0 Comments:

Post a Comment

Powered by Blogger.