select option and tab strip in web dynpro abap

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com

© 2010 SAP AG 1

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.Jayanthi

Company: Siemens Information Processing Services Pvt. Ltd.

Created on: 20 Sep 2010

Author Bio

J.Jayanthi is a Certified ABAP consultant with HR ABAP knowledge.

https://www.sdn.sap.com/irj/sdn/nw-wdabap

Web Dynpro: Select option and Tab Strip


© 2010 SAP AG 2

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

Related Content .................................................................................................................................... 15

Disclaimer and Liability Notice................................................................................................................ 16



© 2010 SAP AG 3

Objective

In this article, we are going to use a select option for sales document, and then bas ed on the 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 Usages Web Dynpro components can be nested. This means that you can integrate any number of other, already

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 data 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 between 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(say ZZZ_JAYTEST6) to create. Then enter the description and choose the type as Web Dynpro Component.

This will create a Component Usages by name SELECT_OPTIONS.



© 2010 SAP AG 4

Component Controller

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

Designing View

In View->Context, copy and map the nodes VBAK and VBRK to the view context from component controller.

In context tab, drag and drop the context which appears under component controller to view(Main is the view name).



© 2010 SAP AG 5

Go to the layout in view and right click the ROOTUIELEMENTCONTAINER and then choose Insert element .

Create a transparent container with name say TC1(layout as Matrix). Then create ViewContainerUIElement with name say SELECT_OPTIONS inside transparent container 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.



© 2010 SAP AG 6

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.



© 2010 SAP AG 7

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 to generate code automatically

Select DOINIT method.

Use Code Wizard as below.

This will generate the below code.

Then use the Method call in Used controller.



© 2010 SAP AG 8

Create range table using the method CREATE_RANGE_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.



© 2010 SAP AG 9

Help id is taken from the VBELN Parameter id.



© 2010 SAP AG 10

Select the method ONACTIONBUTTONCLICK(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.



© 2010 SAP AG 11

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_JAYTEST6).

Right click the Web Dynpro component and activate.



© 2010 SAP AG 14

Output

Mention the sales document (use F4 help) and then press Display button.

Switch to Billing tab by pressing the Billing.



© 2010 SAP AG 15

Related Content

For more information, visit the Web Dynpro ABAP homepage

https://www.sdn.sap.com/irj/sdn/nw-wdabap



© 2010 SAP AG 16

Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP off icial 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.

select option and tab strip in web dynpro abap

Documents

web dynpro component

web dynpro

select option

transparent container

jay anthi

ith respect

tab strip

create binding