Web Dynpro: Select option and Tab Strip

Applies to:
SAP ECC 6.0, For more information, visit the Web Dynpro ABAP homepage.

Summary
The article aims to help the professionals who have only ABAP knowledge and desire to develop their Web Dynpro knowledge in ABAP. This article provides the knowledge for designing select option and Tab strip in Web dynpro. Author: J.Jay anthi

Company: Siemens Information Processing Services P vt. Ltd. Created on: 20 Sep 2010

Author Bio
J.Jay anthi is a Certified ABAP consultant with HR ABAP knowledge.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 1

Web Dynpro: Select option and Tab Strip

Table of Contents
Objective ................................................................................................................................................ 3 Prerequisites ........................................................................................................................................... 3 Creating Web Dynpro ........................................................................................................................... 3 Component Controller .......................................................................................................................... 4 Designing View .................................................................................................................................... 4 Embedding View ................................................................................................................................ 11 Creating Web Dynpro Application........................................................................................................ 11 Code. ................................................................................................................................................ 12 Output ............................................................................................................................................... 14 Relat ed Content .................................................................................................................................... 15 Disclaimer and Liability Notice................................................................................................................ 16

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 2

Web Dynpro: Select option and Tab Strip

Objective
In this article, we are going to use a select option for sales document, and then bas ed on t he information; we will be displaying the sales details and Billing details. We are going to see how to develop Tab strip. In addition to that, this article is aimed to explain the use of select option.

Prerequisites
Component The component is the central, reusable unit of the application project. You can create any number of views in a component and arrange them in any number of windows. Component Usage s Web Dynpro components can be nested. This means that you can integrate any number of other, alr eady existing components into a component. View The view is the smallest unit of a Web Dynpro application visible for the user. The layout elements and dialog elements - for example, tables, text fields, or buttons - required for the application are arranged in a view. The view contains a controller and a controller context in which the application dat a to be processed is stored in a hierarchical structure. This allows the linking of the graphical elements with the application data.
Window A window is used to group multiple views and to specify the navigation bet ween the views. A view can only

displayed by the browser if the view is embedded in a window.

Creating Web Dynpro

Go to SE80 and select Web Dynpro Comp./Int f. and provide the name(s ay ZZZ_JAY TES T 6) to create. Then enter the description and choos e the type as Web Dynpro Component.

This will create a Component Usages by name SELECT_OP TIONS.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 3

Web Dynpro: Select option and Tab Strip

Component Controller
Go to Component Cont roller and Right click the context. Then select Create Node VBAK and VBRK as below.

Designing View
In View-> Cont ext, copy and map the nodes VBAK and VBRK to the view cont ext from component controller. In context tab, drag and drop the context which appears under component controller to view(Main is the view name).

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 4

Web Dynpro: Select option and Tab Strip

Go to the layout in view and right click the ROOTUIELEME NTCONTA INER and then choose Insert element . Create a transparent container with name say TC1(layout as Matrix). Then create ViewContainerUIElement with name say SELECT_OP TIONS inside transparent cont ainer TC1.

Create a button for Display and create event on Action (say Buttonclick). Set the height of the button as required so that the transparent container and Button will appear in the same line. Do the necessary changes for alignment, if required for halign and valign.

Then create element for Tab strip. Right click the tab strip and insert tab.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 5

Web Dynpro: Select option and Tab Strip

Mention the data source against the tab(Change caption as VBAK). Right click the tab and create table say VBAK. This is done by Adding Elements to tab since Table is element inside the tab.

The right click the table VBAK and create binding as above. Insert another tab for VBRK and then create table, map datasource, create binding as explained above. Now the layout will appear as below.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 6

Web Dynpro: Select option and Tab Strip

In the properties, define as below.

The caption of the tables can be changed as desired. Here it is changed into Sales and Billing.

Then we can use Web Dynpro code wizard Select DOINIT method. Use Code Wizard as below.

to generate code aut omatically

This will generate the below code.

Then use the Method call in Used controller.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 7

Web Dynpro: Select option and Tab Strip

Create range table using the method CREATE _RA NGE _TABLE in if_wd_select_options.
DATA lt_range TYPE REF TO data.

Then disable the global options as below.

Add the selection field as below.

The field is made as mandatory by making the obligatory option. I_VALUE_HELP _TYPE is set to searchhelp to display F4 help.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 8

Web Dynpro: Select option and Tab Strip

Help id is taken from the VBELN Parameter id.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 9

Web Dynpro: Select option and Tab Strip

Select the method ONA CTIONBUTTONCLICK(method created for Display button) in methods tab in View. Then our aim is to get the values entered in the select option.

Declare the range as below for select-options.

data lt_range1 type ref to data. Use pattern to call the method GET_RANGE_TABLE_OF_SEL_FIELD in class IF_WD_SELECT_OPTIONS.

In the generated code, assign the values as below.

Then assign the range table to the field symbol. FIELD-SYMBOLS: <FS_vbeln> TYPE TABLE. ASSIGN lt_range1->* TO <FS_vbeln>. Then read both contexts VBAK and VBRK.

Keep the required code as below.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 10

Web Dynpro: Select option and Tab Strip

Then bind the tables. lo_nd_vbak->bind_table( t_vbak ). lo_nd_vbrk->bind_table( t_vbrk ).

Embedding View
Embed the view as below.

Creating Web Dynpro Application

Create Web Dynpro Application by right clicking the Webdynpro( say ZZZ_JAY TES T6). Right click the Web Dynpro component and activate.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 11

Web Dynpro: Select option and Tab Strip

Code

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 12

Web Dynpro: Select option and Tab Strip

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 13

Web Dynpro: Select option and Tab Strip

Output
Mention the sales document (us e F4 help) and then press Display button.

Switch to Billing tab by pressing the Billing.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 14

Web Dynpro: Select option and Tab Strip

Related Content
For more information, visit the Web Dynpro ABAP homepage

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 15

Web Dynpro: Select option and Tab Strip

Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP offic ial 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 w ill 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 w ith respect to the content of this technical article or code sample, including any liability resulting from incompatibility betw een 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 w ith respect to the content of this document.

SAP COMMUNITY NETWORK 2010 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com 16