Working with Tabstrip in Webdynpro for ABAP

Size: px

Start display at page:

Download "Working with Tabstrip in Webdynpro for ABAP"

Jasper Merritt
6 years ago
Views:

1 Working with Tabstrip in Webdynpro for ABAP Applies to: SAP ECC 6.0 (Release 700, SP 12). For more information, visit the Web Dynpro ABAP homepage.. Summary This tutorial explains about Step-By-Step procedure for creating a Tabstrip in Webdynpro ABAP. It makes use of a number of UI elements as well. We will also see how to clear the selection screen context and how to call a POPUP window. Author: Company: Anusha Vupalapathi Intelligroup Asia Pvt Limited Created on: 8th JUNE 2009 Author Bio Anusha V is a senior associate consultant currently working for Intelligroup Asia Pvt. Ltd. She is having good knowledge in SAP ABAP SAP AG 1

2 Table of Contents Description... 3 Create Webdynpro Component... 4 Creating context in Component Controller... 4 Design View... 6 Implementation of the methods Embedding view to window Create a WebDynpro Application Output 1: If an entries exits for the selection criteria Related Content Disclaimer and Liability Notice SAP AG 2

3 Description The Tabstrip UI element allows the display of a tab page. The user can toggle between several tab pages by selecting a specific tab. The same window is shared by all tab pages and used for displaying the content. The user can display the content of a tab by selecting a tab title. Scenario: To create a Webdynpro application with a Tab strip. UI Elements on the output screen: Parameter: Airline Code: SFLIGHT-CARRID Button: SUBMIT. Tables in Tabstrip: Displays the list of all flights and Flight schedules in two different tabs based on the input given by user on Screen. And also displays a popup window with a message if no flight detail exists with given input. Snap Shot of output Screen: 2009 SAP AG 3

Create Webdynpro Component Go to transaction SE80. Select Webdynpro Comp. /Intf from the list. Create a new Webdynpro component by the name ZWDA_TABSTRIP.

So create these attributes in the context of component controller. Right click on the context tab create node.

4 Create Webdynpro Component Go to transaction SE80. Select Webdynpro Comp. /Intf from the list. Create a new Webdynpro component by the name ZWDA_TABSTRIP. Creating context in Component Controller In component Controller create the nodes and attributes. We are taking Airline code i.e. CARRID as input and displaying the list of all flights (SFLIGHT) and Flight schedules (SPFLI) as output. So create these attributes in the context of component controller. Right click on the context tab create node. For CARRID create node as shown below and select Add Attribute from structure and create attribute to the node. Make sure that the cardinality is 1..1 as it is the input field SAP AG 4

5 Select the fields you want to display from the table SFLIGHT using Add attribute from structure button SAP AG 5

Activate the component at this point of time.

6 Similarly create the remaining two nodes SFLIGHT and SPFLI with corresponding attributes. Make the cardinality as 0..N for these two nodes. Finally the context in the component controller looks like the below figure. Design View Create a view for the selection. Activate the component at this point of time. On the Context Tab, drag the nodes from the Component Controller context and drop it onto the Main View Context. Define the layout of the view. Create a label to the input field. Right click on ROOTUIELEMENTCONTAINER and insert element as shown below SAP AG 6

Create a label by specifying the type as label.

Click on the value field and select the Carrid node from the

Create one Button and if you click this button the flight details

7 Create a label by specifying the type as label. Create the INPUT field and set the Property as shown in the figure. Click on the value field and select the Carrid node from the context Main view. This will be input field for the application. Create one Button and if you click this button the flight details will be display in the table. In button properties give action as SELECTION SAP AG 7

8 If you give the property as SELECTION, then one event handler will generate for this button with name ONACTIONSELECTION. In this handler you need to write the code that you want to execute when ever button is pressed. Creation of TABSRIP. To create Tabstrip insert Tabstrip element in your layout, further to create n no. of tabs, right click on the Tabstrip and insert tab as shown below. In the current application insert two tabs SAP AG 8

a single tab. We need to add elements to tab separately.

9 Note: In each tab only one element can be created. The UI Element transparent container can be used to have multiple elements in a single tab. We need to add elements to tab separately. In the first tab add a table with Sflight node details. And in the second tab add a table with Spfli node details SAP AG 9

After adding table element to the tab, Bind

Select the context and we get the nodes in the

10 After adding table element to the tab, Bind the Table with the corresponding Nodes we created in the Context Component. The same is shown below. Select the context and we get the nodes in the context of the view. Select the Sflight node and we get the below details SAP AG 10

11 After binding the table this is the screen with table values binded with context. Similarly create a table and bind the values of Spfli node for the second tab. After all it looks like the below screen SAP AG 11

Implementation of the methods Write the code you want to execute in ONACTIONSELECTION method of the Button. Go to Wizard and select the radio button READ Context and insert the nodes names CARRID.

12 Implementation of the methods Write the code you want to execute in ONACTIONSELECTION method of the Button. Go to Wizard and select the radio button READ Context and insert the nodes names CARRID. Press the OK button. Now the Wizard generates the code to access the node Carrid. Similarly do for the remaining two nodes i.e. SFLIFGT and SPFLI. We are reading the context of Node CARRID. Similarly get the nodes of SFLIGHT and SPFIL from context using via lead selection. Fetch the data from Sflight and Spfli into tables based on the input field Carrid. See the below code for more information. METHOD onactionselection. * Types declaration DATA lo_nd_carrid TYPE REF TO if_wd_context_node. DATA lo_el_carrid TYPE REF TO if_wd_context_element. DATA ls_carrid TYPE wd_this->element_carrid. * navigate from <CONTEXT> to <CARRID> via lead selection lo_nd_carrid = wd_context->get_child_node( name = wd_this->wdctx_carrid ). * get element via lead selection lo_el_carrid = lo_nd_carrid->get_element( ). * get all declared attributes lo_el_carrid->get_static_attributes( IMPORTING static_attributes = ls_carrid ). * Internal table declaration DATA: it_flight TYPE STANDARD TABLE OF sflight, it_spfli TYPE STANDARD TABLE OF spfli, wa_flight TYPE sflight, wa_spfli TYPE spfli, text TYPE string, lv_carrid TYPE string. DATA: lo_nd_sflight TYPE REF TO if_wd_context_node, lo_nd_spfli TYPE REF TO if_wd_context_node. * navigate from <CONTEXT> to <SFLIGHT> via lead selection 2009 SAP AG 12

13 lo_nd_sflight = wd_context->get_child_node( name = wd_this->wdctx_sflight ). * navigate from <CONTEXT> to <SPFLI> via lead selection lo_nd_spfli = wd_context->get_child_node( name = wd_this->wdctx_spfli ). *Fetch Flight details CLEAR text. SELECT * FROM sflight INTO CORRESPONDING FIELDS OF TABLE it_flight WHERE carrid = ls_carrid-carrid. IF sy-subrc = 0. SELECT * FROM spfli INTO CORRESPONDING FIELDS OF TABLE it_spfli WHERE carrid = ls_carrid-carrid. ELSE. *Display a popup window with an error message if the data does not exist DATA: l_cmp_api TYPE REF TO if_wd_component, l_window_manager TYPE REF TO if_wd_window_manager, l_popup TYPE REF TO if_wd_window, l_text TYPE string_table, l_api TYPE REF TO if_wd_view_controller, message TYPE string. l_cmp_api = wd_comp_controller->wd_get_api( ). l_window_manager = l_cmp_api->get_window_manager( ). lv_carrid = ls_carrid-carrid. CONCATENATE 'No Flights avilable for' lv_carrid INTO text SEPARATED BY ' '. APPEND text TO l_text. l_popup = l_window_manager->create_popup_to_confirm( text = l_text button_kind = if_wd_window=>co_buttons_ok message_type = if_wd_window=>co_msg_type_information window_title = 'Information' window_position = if_wd_window=>co_center ). l_popup->open( ). *Clear the selection screen. DATA: l_node TYPE REF TO if_wd_context_node. l_node = wd_context->get_child_node( 'CARRID' ). l_node->invalidate( ). ENDIF. IF sy-subrc EQ 0. * binding the table it_flight lo_nd_sflight->bind_table( it_flight ). lo_nd_spfli->bind_table( it_spfli ). ENDIF. ENDMETHOD. Embedding view to window In window embed the view MAINVIEW SAP AG 13

14 After embedding the screen would be 2009 SAP AG 14

Output 1: If an entries exits for the selection criteria.

15 Create a WebDynpro Application Create WebDynpro application. And save it. Activate the WebDynpro component. Test WebDynpro component. Output 1: If an entries exits for the selection criteria. Select the value from the search help and click on Display button. Data for selected values will be displayed in Tabstrip element like below. Values in the first tab Sflight Details SAP AG 15

16 Values in the second tab Spfli Details. OUTPUT 2: If there doesn t exits entries for the selection criteria. Give any Airline code as an input which doesn t have entries in Sflight and Spfli SAP AG 16

17 This is the final Output SAP AG 17

18 Related Content Web Dynpro ABAP Basic UI Elements For more information, visit the Web Dynpro Java homepage SAP AG 18

19 Disclaimer and Liability Notice This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document SAP AG 19

Using Drop Down By Index in Table UI Element in WebDynpro ABAP

Using Drop Down By Index in Table UI Element in WebDynpro ABAP Applies to: Enterprise portal, ECC 6.0, Web Dynpro ABAP. For more information, visit the Web Dynpro ABAP homepage. Summary This article would