Dynamic Table Display - Using BSP Application

Dynamic Table Display - Using BSP Application

Applies To
SAP 4.7 BSP Applications

Summary
This code sample is to dynamically display tables from SAP Data Dictionary in IE using BSP application. Any
table from SAP R/3 can be displayed directly just by specifying the table name.
Specific records from a table can be viewed using Filter option.
This code explains how to display data from any table specified by creating field catalog and internal table
dynamically.
Tables are displayed using TableView element in BSP Application.

Author(s): Immanuel Daniel

Company: Wipro Technologies Ltd.

Created on: 25 October 2006

Author Bio
Immanuel Daniel is working with Wipro Technologies as ABAP Consultant. Has about 1 ½ yrs of experience
in ABAP.

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

© 2006 SAP AG 1
 Dynamic Table Display - Using BSP Application

Table of Contents

Applies To ........................................................................................................................................ 1

Summary.......................................................................................................................................... 1

Author Bio ........................................................................................................................................ 1

Table of Contents ............................................................................................................................ 2

Technical Description ...................................................................................................................... 3

Screen Shots ................................................................................................................................... 4

Application Code.............................................................................................................................. 6

Related Content............................................................................................................................... 9

Disclaimer and Liability Notice....................................................................................................... 10

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

© 2006 SAP AG 2
 Dynamic Table Display - Using BSP Application

Technical Description
This BSP application is constructed with two pages of type ‘Page with Flow Logic’.
Here, the names of the two pages are INDEX.HTM and TABDISPLAY.HTM
In the ‘Navigation’ declaration part of the BSP Application, navigation from INDEX page to TABDISPLAY
page. (Here navigation request is ‘TOTABLE’.)
The index page consists of an input field to supply the table name that has to be displayed and a ‘Submit’
button. The value in the input field is stored in variable, should be defined as a page attribute.
Here, page attribute with name ‘tabname’ is added as type string.
In the event handler portion of this page the event ‘OnInputProcessing’ is handled to set the parameter
‘tabname’ and then to navigate to next page ‘TABDISPLAY.HTM’.

The second page is ‘TABDISPLAY.HTM’. This page displays the data from the table specified in a tableview
element in multiple slots.
This page contains code that provides the flexibility of viewing any table directly.
The tableview has been defined to include filter option using which records with specific data can be filtered
any viewed.
In event handler portion of this page, the event “OnInputProcessing” is handled to pass the events to the
server.
The internal table to store the data fetched from the SAP Table specified is created dynamically.

Both the pages of this BSP application are of Page Type “Page with Flow Logic”.

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

© 2006 SAP AG 3
 Dynamic Table Display - Using BSP Application

Screen Shots

Enter Table Name

Table Display

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

© 2006 SAP AG 4
 Dynamic Table Display - Using BSP Application

Filtering Data

Here the table ‘SAPLANE’ is displayed. Similarly any table can be displayed directly without changing the
below code.

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

© 2006 SAP AG 5
 Dynamic Table Display - Using BSP Application

Application Code
INDEX.HTM
Layout
<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<htmlb:content design="design2003" >
<htmlb:page title="Table Display" >
<htmlb:form>

<html>
<h1><center>Table Browser</center></h1>
Enter Table Name:
<htmlb:inputField id = "TABNAME"
description = "Table Name"
required = "TRUE"
value = "MARA"
submitOnEnter = "TRUE"
doValidate = "X"
showHelp = "TRUE"
tooltip = "Table Name" />
<htmlb:button id = "submit"
text = "Display Table"
tooltip = "Display Table"
onClick = "OnInputProcessing" />
<marquee><font size = 2>Table Browser</font></marquee>
</html>
</htmlb:form>

</htmlb:page>
</htmlb:content>

Event Handler
OnInputProcessing
* event handler for checking and processing user input and
* for defining navigation

class cl_htmlb_manager definition load.

data: event type ref to cl_htmlb_event,
inputfield type ref to cl_htmlb_manager.

event ?= cl_htmlb_manager=>get_event( runtime->server->request ).

navigation->set_parameter( 'tabname' ).
navigation->next_page( 'totable' ).

Page Attributes
tabname type string

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

© 2006 SAP AG 6
 Dynamic Table Display - Using BSP Application

TABDISPLAY.HTM
Layout
<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<html>
<htmlb:content design="design2002" >
<htmlb:page title="Table Display" >
<htmlb:form>
<head>
<title>
<%= tabname %>
</title>
</head>
<body>
<%
data : dref type ref to data,
it_grid_fcat type table of lvc_s_fcat ,
struct_grid_lset type lvc_s_layo,
tab_info type table of dfies,
str type string,
n_lines type i,
n_fields type i,
n type i,
fn type i.
field-symbols :
<fs_tab> like line of tab_info,
<it_disptab> type table,
<wa_disptab> type any,
<FS_OUTTAB1> type Any,
<val> type any.
%>
<%
call function 'LVC_FIELDCATALOG_MERGE'
exporting
i_structure_name = tabname
changing
ct_fieldcat = it_grid_fcat[].
%>
<%
call method cl_alv_table_create=>create_dynamic_table
exporting
it_fieldcatalog = it_grid_fcat
importing
ep_table = dref.
assign dref->* to <it_disptab> .
select * from (tabname) into corresponding fields of table <it_disptab> up to 250 rows.
%>
<htmlb:tableView id = "TABLE"
table = "<%= <it_disptab> %>"
design = "TRANSPARENT"
width = "100%"
headerVisible = "TRUE"
filter = "SERVER"
onFilter = "MyFilter"
visibleRowCount = "20"
allRowsEditable = "TRUE"
fillUpEmptyRows = "TRUE"
tableLayout = "AUTO"
headerText = "<%= tabname %>"
selectionMode = "LINEEDIT"
onRowSelection = "MyRowSelection">
</htmlb:tableView>

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

© 2006 SAP AG 7
 Dynamic Table Display - Using BSP Application

</body>
</htmlb:form>
</htmlb:page>
</htmlb:content>
</html>
Event Handler
OnInputProcessing
* event handler for checking and processing user input and
* for defining navigation
IF event_id = cl_htmlb_manager=>event_id.
* Scenario 1: Read event from manager.
DATA: event TYPE REF TO cl_htmlb_event.
event = cl_htmlb_manager=>get_event( runtime->server->request ).

IF event IS NOT INITIAL AND event->name = htmlb_events=>tableview.

DATA: tableview_event TYPE REF TO cl_htmlb_event_tableview.
tableview_event ?= event.
ENDIF.

ENDIF.

Page Attributes
it_mara TYPE T_MARA
tabname TYPE DFIES-TABNAME
value TYPE STRING
wa_grid_fcat TYPE LVC_S_FCAT

Type Definitions
types : t_mara type table of mara.

BSP Application – Navigation

Start Navigation Request Target
index.htm TOTABLE table.htm

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

© 2006 SAP AG 8
 Dynamic Table Display - Using BSP Application

Related Content

1. SAP Library - Business Server Pages

2. ABAP Code Sample for Data Browser Using ALV Grid

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

© 2006 SAP AG 9
 Dynamic Table Display - Using BSP Application

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 DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

© 2006 SAP AG 10