How-to Guide
SAP NetWeaver ‘04
How To…
Enhance your
Web Query
with the Table
Interface
Version 1.10 – January 2005
Applicable Releases:
SAP NetWeaver ’04 (BW3.5)
© Copyright 2004 SAP AG. All rights reserved. contained in this document serves informational
purposes only. National product specifications may vary.
No part of this publication may be reproduced or
transmitted in any form or for any purpose without the These materials are subject to change without notice.
express permission of SAP AG. The information These materials are provided by SAP AG and its affiliated
contained herein may be changed without prior notice. companies ("SAP Group") for informational purposes
only, without representation or warranty of any
Some software products marketed by SAP AG and its kind, and SAP Group shall not be liable for errors or
distributors contain proprietary software components of omissions with respect to the materials. The only
other software vendors. warranties for SAP Group products and services are those
that are set forth in the express warranty statements
Microsoft, Windows, Outlook, and PowerPoint are accompanying such products and services, if any.
registered trademarks of Microsoft Corporation. Nothing herein should be construed as constituting an
additional warranty.
IBM, DB2, DB2 Universal Database, OS/2, Parallel
Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, These materials are provided “as is” without a warranty
iSeries, pSeries, xSeries, zSeries, z/OS, AFP, Intelligent of any kind, either express or implied, including but not
Miner, WebSphere, Netfinity, Tivoli, and Informix are limited to, the implied warranties of merchantability,
trademarks or registered trademarks of IBM Corporation fitness for a particular purpose, or non-infringement.
in the United States and/or other countries. SAP shall not be liable for damages of any kind including
without limitation direct, special, indirect, or
Oracle is a registered trademark of Oracle Corporation. consequential damages that may result from the use of
these materials.
UNIX, X/Open, OSF/1, and Motif are registered SAP does not warrant the accuracy or completeness of
trademarks of the Open Group. the information, text, graphics, links or other items
contained within these materials. SAP has no control
Citrix, ICA, Program Neighborhood, MetaFrame, over the information that you may access through the
WinFrame, VideoFrame, and MultiWin are trademarks use of hot links contained in these materials and does not
or registered trademarks of Citrix Systems, Inc. endorse your use of third party web pages nor provide
any warranty whatsoever relating to third party web
HTML, XML, XHTML and W3C are trademarks or pages.
®
registered trademarks of W3C , World Wide Web SAP NetWeaver “How-to” Guides are intended to
Consortium, Massachusetts Institute of Technology. simplify the product implementation. While specific
product features and procedures typically are explained
Java is a registered trademark of Sun Microsystems, Inc. in a practical business context, it is not implied that those
features and procedures are the only approach in solving
JavaScript is a registered trademark of Sun Microsystems, a specific business problem using SAP NetWeaver. Should
Inc., used under license for technology invented and you wish to receive additional information, clarification
implemented by Netscape. or support, please refer to SAP Consulting.
Any software coding and/or code lines / strings (“Code”)
MaxDB is a trademark of MySQL AB, Sweden. included in this documentation are only examples and
are not intended to be used in a productive system
SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP environment. The Code is only intended better explain
NetWeaver, and other SAP products and services and visualize the syntax and phrasing rules of certain
mentioned herein as well as their respective logos are coding. SAP does not warrant the correctness and
trademarks or registered trademarks of SAP AG in completeness of the Code given herein, and SAP shall
Germany and in several other countries all over the not be liable for errors or damages caused by the usage of
world. All other product and service names mentioned the Code, except if such damages were caused by SAP
are the trademarks of their respective companies. Data intentionally or grossly negligent.
1 Business scenario
You are a BW consultant for an e-intelligence project and have the task of equipping BW
Web reports with more information. In particular, you need to add a movement indicator
that compares the current share price with that of the previous day and then displays the
comparison in the form of a chart. In addition to this, you need to add a marker to the
chart that shows the development of the price of the chosen share.
The result
The solution is based on a Web report that contains two icons in the last column. The
first icon is the movement indicator, a green arrow pointing upwards if the price had gone
up, a red arrow pointing downwards if the price has fallen, and a gray arrow to the right if
the price has not changed. The second icon represents the chart. This is also a link to
the Web report that contains the chart showing the previous rate.
If you put your cursor on the chart icon, the various rates of the chosen shares are
shown in a chart (in the example, a bar chart).
-1-
2 The step by step solution
2.1 Query definition
1. There is an InfoCube that contains
at least one characteristic and 2 key
figures. For this example, we will use
an InfoCube that has the
characteristic 'share ID' and the key
figures 'closing price yesterday' and
(current) 'trading price'.
A query is created on the basis of
this InfoCube. This contains the
share ID in the rows and the closing
price yesterday and the current
trading price in the columns.
A further field is filled with a
calculated key figure. The formula is
SIGN ( NODIM ( 'current trading
pric' - 'closing p. yesterday' ) )
The short text for the calculated key
figure is . This represents a
line break in HTML and therefore
this key figure is not displayed in the
Web report as a column heading.
The screenshot shows the query
definition and, in the foreground, the
formula for the calculated key figure.
The InfoObject 0CALDAY is
restricted to the current calendar day
by a variable.
-2-
2. The query created in point 1 is
published on the Web. As you only
want to show the share name and
the key figure for the current trading
price in the Web report, the other
columns must be hidden before you
save the view. You can use this
function by clicking on the right-hand
mouse button when your cursor is
on the 'key figures' row of the
navigation block. The column with
the calculated key figure is replaced
by icons at runtime.
Save the global view
Name of the Queryview is
“SHAREPRICE”
-3-
3. Create a second query
“SHARECART” for the historical
share chart.
The InfoObject 0CALDAY and the
keyfigure CPY (closing price
yesterday) are in Columns.
The InfoObject ShareID is in the free
Characteristics.
4. Save the view “SHARECHART”
-4-
2.2 Publishing a query on the Web
5. Start the Web Application designer
6. Start the Wizard…
7. Select the Query view
“SHAREPRICE”
-5-
8. Enter the title: “Share Price”
Enter the name of the TableInterface
Class. “ZSHRMINAPP”
Comment:
The ABAP class is not yet available.
9. Save the Web Template
Comment:
Save the Web Template URL
(http://us7031.wdf.sap.corp:8131/sa
p/bw/BEx?sap-
language=EN&bsplanguage=EN&C
MD=LDOC&TEMPLATE_ID=SHAR
EPRICE)
10. Publish the Chart of the Query-
View “SHARECHART “ to the Web.
Save the Web Template
“ShareChart”
-6-
11. Upload the GIF’s to the MIME
repository in the ABAP workbench.
(SE80)
arrow_down.gif
arrow_nochange.gif
arrow_up.gif
chart_view.gif
to the MINE repository of ABAP
development workbench in
transaction SE80
SAP BW Customer Images
12. Create the TableInterface ABAP
Class
Log on to the BW system. Classes
are created in transaction SE24
(Class Builder). You can create the
class ZSHRMINAPP here.
Choose 'class' as the object type.
-7-
13. The class “ZSHRMINAPP” takes
the same properties as the
superclass
CL_RSR_WWW_MODIFY_TABLE.
If the class is to be transported, you
must assign the class to a customer
development class when you create
it.
14. Various methods are given to this
class. The following methods must
be redefined:
• START
• DATA_CELL
• CHARACTERISTIC_CELL
15. These methods are defined in
the superclass, yet do not contain
any programming logic.
-8-
16. Cross-method variables/tables are
defined in the tab-strip 'attributes'.
The attribute 'L_FILTER' is defined
for the scenario.
17. Firstly, the method START is
implemented. Position the cursor on
the name of the method and click on
'Redefine'.
-9-
18. The data structures provided by the N_R_DATA_SET- Characteristic values,
table interface are used in the >N_SX_VERSION_20 attribute values and structure
methods. A_1-AXIS_DATA parts according to their
sequence on the axes
The table on the right hand side
N_R_DATA_SET- Value cells. Arrangement
gives an overview of the data
>N_SX_VERSION_20 takes place be rows and then
structures used and their meaning
A_1-CELL_DATA by columns
and contents. For a complete
I_X X coordinate of the row in the
description of the table interface, see
table
the documentation on 'Web
I_IS_SUM 'X' = totals cell
Reporting Table Interface'.
I_CHAVL Key value of characteristic
value. This is needed for filter
operations
I_VALUE Value of cell without scaling
19. Additional JAVASCRIPT code in the
Web template is generated in the
START method. Therefore it is no
longer necessary to carry out further
changes in the Web template.
1.) The Web query URL is
determined.
2.) The source code for the
JAVASCRIPT function
FIRE_URL. This calls the chart
for a selected share. The method
call
SET_JAVASCRIPT_FUNCTION
generates the function at runtime
in the Web template. For an
explanation of the chart
definition, see the appendix.
3.) The optional function
OPEN_WINDOW is generated in
the same way. This is for the
configuration of the chart call
window, and can be left out.
- 10 -
method START.
data:
* includes the JAVASCRIPT Coding.
l_coding type string,
* WEB URL
url type string.
url = get_url( ).
* fire_url Javascript-function
concatenate
'function fire_url(filter) {'
Cl_rsr_www_renderer=>c_lf
'chart_url="' url '" + "&CMD=LDOC'
'&TEMPLATE_ID=SHARECHART' "WEB ID of the work book
'&PAGEID=Graphics' "Name of the view
'&FILTER_IOBJNM=SHAREID&FILTER_VALUE=" + filter'
"Technical name of the InfoObject
* '+ "&STATELESS=X"'
Cl_rsr_www_renderer=>c_lf
'openWindow(chart_url,"chart_window","dependent=yes","730",'
'"400","true")'
' }'
Cl_rsr_www_renderer=>c_lf
into l_coding.
call method set_javascript_function
exporting
i_name = 'fire_url'
i_coding = l_coding.
* openWindow Javascript-function
clear l_coding.
concatenate 'var info=0;'
Cl_rsr_www_renderer=>c_lf
'function openWindow(theURL,winName,features, myWidth, myHeight,'
'isCenter) ' '{'
Cl_rsr_www_renderer=>c_lf
'if(window.screen)if(isCenter)if(isCenter=="true"){'
Cl_rsr_www_renderer=>c_lf
'var myLeft = (screen.width-myWidth)/2;'
Cl_rsr_www_renderer=>c_lf
'var myTop = (screen.height-myHeight)/2;'
Cl_rsr_www_renderer=>c_lf
'features+=(features!="")?",":"";'
Cl_rsr_www_renderer=>c_lf
'features+=",left="+myLeft+",top="+myTop;'
Cl_rsr_www_renderer=>c_lf
' }'
Cl_rsr_www_renderer=>c_lf
'info=window.open(theURL,winName,features+((features!="")?",'
'":"")+"width="+myWidth+",height="+myHeight);'
Cl_rsr_www_renderer=>c_lf
'info.focus();'
' }'
Cl_rsr_www_renderer=>c_lf
into l_coding.
call method set_javascript_function
exporting
i_name = 'openWindow'
i_coding = l_coding.
endmethod.
- 11 -
20. Method: method CHARACTERISTIC_CELL.
'CHARACTERISTIC_CELL' * Store characteristic value of current row
if i_x = 1 and i_is_sum 'X'.
The characteristic value (share ID l_filter = i_chavl.
key) is stored in the L_FILTER. This endif.
is needed to call up the chart and is
generated in the last column of the endmethod.
table with the icons for the chart .
21. Method: 'DATA_CELL'
The method 'DATA_CELL' is run for each cell. The cell content can be changed to fit your
requirements. In the example:
1.) An icon is appended to the table in the cell in the last column. This is the movement
indicator. This depends on the value in this cell. The value shows the difference between the
current trading price and yesterday's price. A positive change is shown by a green arrow.
The icons must first be stored in the MIME repository . The path variables in the program
must be adjusted appropriately.
2.) In the same cell there is an icon that represents a link to the chart showing the share price.
method DATA_CELL.
*CALL METHOD SUPER->DATA_CELL
* EXPORTING
* I_X =
* I_Y =
* I_VALUE =
* I_DISPLAY_VALUE =
* I_NUMERICAL_SCALE =
* I_NUMERICAL_PRECISION =
* I_CURRENCY =
* I_UNIT =
* I_ALERTLEVEL =
* I_IS_SUM =
* CHANGING
* C_CELL_ID =
* C_CELL_CONTENT =
* C_CELL_STYLE =
* C_CELL_TD_EXTEND =
* .
data:
filter type string,
path type string,
l_cell_content type string.
* Generate icons in 4th column
if i_x = 3 and i_is_sum 'X'. "=> column for icon, yet no SUM row
* Initialization
path = '/sap/bw/mime/Customer/Images/'. "path to the GIF's
* Movement Indicator
- 12 -
if i_value = 1. "today > yesterday
concatenate ''
into l_cell_content.
elseif i_value = 0. "today = yesterday
concatenate ''
into l_cell_content.
else. "today '
into l_cell_content.
endif.
* Chart Icon with link to Report
filter = I_filter. "l_filter is set in method characteristic cell
concatenate l_cell_content
''
''
into l_cell_content.
* create cell content
c_cell_content = l_cell_content.
endif.
endmethod.
22. The result of the Web Query is:
- 13 -
www.sap.com/netweaver
- 14 -