Download How to… Client Side Eventing with BW 3.x and EP 5.0

How to…
Client Side Eventing with BW
3.x and EP 5.0
Applicable Releases: BW 3.x
March 2003
SAP (SAP America, Inc. and SAP AG) assumes no responsibility for errors or omissions in these materials.
These materials are provided “as is” without a warranty of any kind, either express or implied, including but not limited to, the
implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
SAP shall not be liable for damages of any kind including without limitation direct, special, indirect, or consequential damages
that may result from the use of these materials.
SAP does not warrant the accuracy or completeness of the information, text, graphics, links or other items contained within
these materials. SAP has no control over the information that you may access through the use of hot links contained in these
materials and does not endorse your use of third party web pages nor provide any warranty whatsoever relating to third party
web pages.
mySAP BI “How-To” papers are intended to simplify the product implementation. While specific product features and
procedures typically are explained in a practical business context, it is not implied that those features and procedures are the
only approach in solving a specific business problem using mySAP BI. Should you wish to receive additional information,
clarification or support, please refer to SAP Professional Services (Consulting/Remote Consulting).
HOW TO … CLIENT SIDE EVENTING WITH BW AND EP
Table of Contents
HOW TO… ........................................................................................................................................... 1
CLIENT SIDE EVENTING WITH BW 3.X AND EP 5.0 ....................................................................... 1
1
BUSINESS SCENARIO ................................................................................................................ 1
2
SOLUTION .................................................................................................................................... 2
3
THE STEP-BY-STEP SOLUTION ................................................................................................ 4
APPENDIX ........................................................................................................................................... 7
3.1
Example Code of the Sender iView.......................................................................................................7
3.2
Example Code of the Receiver iView....................................................................................................8
3.3
Second Example Code for Sender iView ..............................................................................................9
3.4
Second Example Code for Receiver iView .........................................................................................10
3.5
BW-Items and Portal-Eventing...........................................................................................................11
3.6
Useful Links ..........................................................................................................................................11
2003 SAP AG
TABLE OF CONTENTS
HOW TO … CLIENT SIDE EVENTING WITH BW AND EP
1 Business Scenario
You have several BW iViews in a Portal page and you want them to communicate
with each other. In the scenario further down we have an iView “ABC Selection”
which allows us to choose ABC Classification based either on materials or on
vendors. We want it to influence the remaining iViews.
2003 SAP AG
1
HOW TO … CLIENT SIDE EVENTING WITH BW AND EP
2 Solution
The Portal provides a framework for clientside eventing.
Enterprise Portal Client Framework (EPCF)
A service in the Portal, that enhances your Portal Component’s output with
JavaScript. It also simplifies the client side programming of Web Components. The
Client Framework is accessible in embedded as well as in isolated iViews.
Enterprise Portal Client Manager (EPCM)
EPCM is the client side component that resides in a Portal page and provides the
service of the EPCF.
The functions of the Client Framework API are defined as methods of a global
JavaScript object called EPCM. All public framework methods are used as follows:
EPCM.[API_method_name]( [Params]* );
2003 SAP AG
2
HOW TO … CLIENT SIDE EVENTING WITH BW AND EP
The Client Framework consists of the following groups:
System Function
This includes interfaces that provide methods for obtaining important system
information (such as the version or the level of the framework).
Client Eventing
Client Eventing makes it possible for iViews to communicate with each other
on the client side and also to communicate with the Portal itself.
Client Data Bag
The Client Data Bag is a client-based memory that stores JavaScript data
during a portal session. It distributes data and objects on client-based
components that are linked with a browser session by pairs of key values.
For each BW Iview running in Portal the JavaScript-Library epcfproxy.js will
be added to the HTML-Coding. In this JavaScript-Library all relevant functions
for Client eventing in Portal are included. Those Java-Script-Functions can be
accessed via EPCMPROXY.functionname. The EPCMPROXY object
encapsulates BW specifics for Iview eventing.
The Sender BW-IView will raise an Event, as soon the Drop-Down-Box has
changed. The Receiver-Iviews will catch the event and act on it by changing a
Web-Item Attribute with Command-URLs.
2003 SAP AG
3
HOW TO … CLIENT SIDE EVENTING WITH BW AND EP
3 The Step-By-Step Solution
1. Sender iView (event producer)
Create a Sender iView, which serves as
event sender and insert it into your Portal
page.
Create a BEx Web Application and save it
as iView. Import the new iView in your
Portal. Assign the iView to the Portal page.
Via the HTML View in the Web Application
Designer you have to add the following
coding (on the right hand side) to the Web
Template.
2. Selection
If you choose a new option in the selectbox
the raiseEvent function is called.
“value” will be replaced automatically by the
actual value a user chooses via the drop
down function: "PMC_ABC_L" or
"PMC_ABC_M"
2003 SAP AG
<form name="myform">
<select class="SAPBexDdl" name="myselect" size="1"
onchange="raiseEvent(document.myform.myselect.options[docume
nt.myform.myselect.selectedIndex].value);">
<option value="PMC_ABC_L" > ABC Classification Vendors
</option>
<option value="PMC_ABC_M" > ABC Classification Material
</option>
</select>
</form>
4
HOW TO … CLIENT SIDE EVENTING WITH BW AND EP
This function raises an event. Via the event
the value is distributed to all subscribers.
Parameters of EPCMPROXY.raiseEvent:
•
namespace: unique event namespace an URN (i.e. your reserved
domain name in reverse order e.g.
com.sap:BWEvents)
•
eventName: the event name, e.g.
BWSetABCClassification
•
dataObject : a data object (String,
Number, Boolean or Object) with
information describing the event
•
sourceId: The component ID of the
event source (for example, the ID
defined by the Design Time) or null
if the parameter has been omitted.
<script language=javascript>
<!-function raiseEvent(value) {
EPCMPROXY.raiseEvent(
"urn:com.sap:BWEvents","BWSetABCClassification", value, null );
}
-->
</script>
Result:
The Portal framework will call all event
handlers which are registered for this event
and passes an event object as a single
value to the event handler.
3. Receiver iView
Create a BEx Web Application and save it
as iView. Import the new iView in your
Entreprise Portal. Assign the iView to the
Portal page.
Via the HTML View in the Web Application
Designer you have to add the following
coding (on the right hand side) to the Web
Template.
2003 SAP AG
5
HOW TO … CLIENT SIDE EVENTING WITH BW AND EP
4. Listen for events
To register the iView as listener for events
you add an event handler into your web
template. Therefore you have to add the
EPCMPROXY.subcribeEvent function in the
head of your HTML page.
Parameters of
EPCMPROXY.subscribeEvent:
•
namespace: unique event namespace an an URN (i.e. your
reserved domain name in reverse
order e.g. com.sap:BWEvents)
•
eventName: the event name, e.g.
BWSetABCClassification
•
window reference to which the
event is sent. The window must
implement the specified event
Handler. Here the current window is
specified. (iframe of BEx Web
Application running in the Portal)
•
eventHandler: Name of the
eventHandler function
<script language=javascript>
EPCMPROXY.subscribeEvent( "urn:com.sap:BWEvents",
"BWSetABCClassification", window, "myreceiveEvent");
function myreceiveEvent( eventObj ) {
var url = location.protocol "//"+location.host+SAP_BW_URL_Get();
url = url + "&ITEM=ABCANALYSIS_1&ABC_NAME=" +
eventObj.dataObject;
SAPBWOpenURL(url);
}
</script>
If the registered event takes place, the
eventHandler function is called with the
parameter eventObj. Within this
eventHandler the attribute ABC_NAME of
item ABCANALYSIS_1 is changed to the
new value. Because the function
myreceiveEvent is called from outside
(Portal) the BW URL has to be fully qualified
(location.protocol and location.host).
Result: The iView will be refreshed
2003 SAP AG
6
HOW TO … CLIENT SIDE EVENTING WITH BW AND EP
Appendix
3.1
Example Code of the Sender iView
<!-- BW data source object tags -->
<object>
<param name="OWNER" value="SAP_BW">
<param name="CMD" value="SET_PROPERTIES">
<param name="TEMPLATE_ID" value="IDES_BW_ABC_SELECTION">
TEMPLATE PROPERTIES
</object>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft DHTML Editing Control">
<TITLE>BW Web Application</TITLE>
<link href= "MIME/BEx/StyleSheets/BWReports.css" type="text/css" rel="stylesheet">
<script language=javascript>
<!-function raiseEvent(value) {
EPCMPROXY.raiseEvent( "urn:com.sap:BWEvents","BWSetABCClassification", value, null );
}
-->
</script>
</HEAD>
<BODY class="SAPBEXFlexBoxFormBg">
<form name="myform">
<select class="SAPBexDdl" name="myselect" size="1"
onchange="raiseEvent(document.myform.myselect.options[document.myform.myselect.selectedIndex].value);
">
<option value="PMC_ABC_L" > ABC Classification Vendors </option>
<option value="PMC_ABC_M" > ABC Classification Material </option>
</select>
</form>
</BODY>
</HTML>
2003 SAP AG
7
HOW TO … CLIENT SIDE EVENTING WITH BW AND EP
3.2
Example Code of the Receiver iView
<!-- BW data source object tags -->
<object>
<param name="OWNER" value="SAP_BW">
<param name="CMD" value="SET_PROPERTIES">
<param name="TEMPLATE_ID" value="IDES_BW_ABC_CLASSIFICATION">
TEMPLATE PROPERTIES
</object>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft DHTML Editing Control">
<TITLE>BW Web Application</TITLE>
<link href= "MIME/BEx/StyleSheets/BWReports.css" type="text/css" rel="stylesheet">
<script language=javascript>
EPCMPROXY.subscribeEvent( "urn:com.sap:BWEvents", "BWSetABCClassification", window, "myreceiveEvent");
function myreceiveEvent( eventObj ) {
var url = location.protocol +"//"+location.host+SAP_BW_URL_Get();
url = url +
"&ITEM=ABCANALYSIS_1&ABC_NAME=" + eventObj.dataObject;
SAPBWOpenURL(url);
}
</script>
</HEAD>
<BODY class="SAPBEXFlexBoxFormBg">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<object>
<param name="OWNER" value="SAP_BW">
<param name="CMD" value="GET_ITEM">
<param name="NAME" value="ABCANALYSIS_1">
<param name="ITEM_CLASS" value="CL_RS_DME_ABC_WEB_WWW_ITEM_ABC">
<param name="BORDER_STYLE" value="NO_BORDER">
<param name="SHOW_ABC_ANALYSIS" value="">
<param name="SHOW_MODEL" value="">
<param name="SHOW_STAT" value="">
<param name="ABC_NAME" value="PMC_ABC_L">
<param name="GENERATE_CAPTION" value="">
<param name="WIDTH" value="230">
<param name="GENERATE_LINKS" value="">
ITEM:
ABCANALYSIS_1
</object>
</td>
</tr>
</table>
</BODY>
</HTML>
2003 SAP AG
8
HOW TO … CLIENT SIDE EVENTING WITH BW AND EP
3.3
Second Example Code for Sender iView
Within the second example a user can select a material value from a Drop-Down-Box. This value will
be sent to the receiver iView, where the DataProvider will be filtered accordingly.
The Drop-Down-Box is filled by the BW system, using the Web Item Drop-Down-Box with the
attribute only_values=’X’ and an own javascript function for the onchange event.
<!-- BW data source object tags -->
<object>
<param name="OWNER" value="SAP_BW">
<param name="CMD" value="SET_DATA_PROVIDER">
<param name="NAME" value="DATAPROVIDER_1">
<param name="DATA_PROVIDER_ID" value="PM_BI_MA_029_V03">
DATA_PROVIDER:
DATAPROVIDER_1
</object>
<object>
<param name="OWNER" value="SAP_BW">
<param name="CMD" value="SET_PROPERTIES">
<param name="TEMPLATE_ID" value="PM_SENDER1">
TEMPLATE PROPERTIES
</object>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft DHTML Editing Control">
<TITLE>BW Web Application</TITLE>
<link href= "MIME/BEx/StyleSheets/BWReports.css" type="text/css" rel="stylesheet">
<script language=javascript>
<!-function raiseEvent(value) {
EPCMPROXY.raiseEvent( "urn:com.sap:BWEvents", "BWSetMaterialFilterEvent", value, null );
}
-->
</script>
</HEAD>
<BODY>
<P>
<TABLE cellSpacing=1 cellPadding=1 width="75%" border=0>
<TR>
<TD vAlign=top>
<form name="myform">
<select name="myselect" size="1"
onchange="raiseEvent(document.myform.myselect.options[document.myform.myselect.selectedIndex].value);
">
<object>
<param name="OWNER" value="SAP_BW">
<param name="CMD" value="GET_ITEM">
<param name="NAME" value="DROPDOWNBOX_1">
<param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_FILTER_DDOWN">
<param name="DATA_PROVIDER" value="DATAPROVIDER_1">
<param name="IOBJNM" value="0D_MATERIAL">
<param name="ONLY_VALUES" value="X">
<param name="GENERATE_CAPTION" value="">
ITEM:
DROPDOWNBOX_1
</object>
</select>
</form>
</TD></TR>
<TR>
<TD vAlign=top></TD></TR></TABLE></P>
</BODY>
2003 SAP AG
9
HOW TO … CLIENT SIDE EVENTING WITH BW AND EP
</HTML>
3.4
Second Example Code for Receiver iView
In this Example a filter command will be sent to the BW system on receiving the event
BWSetMaterialFilterEvent. DataProvider_1 will be filtered according to the material choosen in the
Drop Down Box of the Sender iView.
<!-- BW data source object tags -->
<object>
<param name="OWNER" value="SAP_BW">
<param name="CMD" value="SET_DATA_PROVIDER">
<param name="NAME" value="DATAPROVIDER_1">
<param name="DATA_PROVIDER_ID" value="PM_BI_MA_029_V03">
DATA_PROVIDER:
DATAPROVIDER_1
</object>
<object>
<param name="OWNER" value="SAP_BW">
<param name="CMD" value="SET_PROPERTIES">
<param name="TEMPLATE_ID" value="PM_RECEIVER1">
TEMPLATE PROPERTIES
</object>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft DHTML Editing Control">
<TITLE>BW Web Application</TITLE>
<link href= "/sap/bw/mime/BEx/StyleSheets/BWReports.css" type="text/css" rel="stylesheet">
<script language=javascript>
EPCMPROXY.subscribeEvent( "urn:com.sap:BWEvents", "BWSetMaterialFilterEvent", window,
"myreceiveEvent");
function myreceiveEvent( eventObj ) {
var url = location.protocol +"//"+location.host+SAP_BW_URL_Get();
url = url + "&data_provider=*&multi=X&FILTER_IOBJNM=0D_MATERIAL&FILTER_VALUE="
+eventObj.dataObject+"&filter_collapse=";
SAPBWOpenURL(url);
}
</script>
</HEAD>
<BODY>
<P><object>
<param name="OWNER" value="SAP_BW">
<param name="CMD" value="GET_ITEM">
<param name="NAME" value="TABLE_1">
<param name="ITEM_CLASS" value="CL_RSR_WWW_ITEM_GRID">
<param name="DATA_PROVIDER" value="DATAPROVIDER_1">
ITEM:
TABLE_1
</object></P>
</BODY>
</HTML>
2003 SAP AG
10
HOW TO … CLIENT SIDE EVENTING WITH BW AND EP
3.5
BW-Items and Portal-Eventing
The following table gives a short overview how Portal Eventing can be integrated
within BW Web Items, besides the using of stand-alone HTML-Coding within your
Web Application.
Web-Item
How to integrate
Drop-Down-Box
Use Parameter only_values=X and create your own selectTag with onchange-JavaScript-Event
Radio-Button
Parameter only_values=X and create your own form with
action
Table
Table-Interface (run JavaScript function for eventraising
directly on click, add icon to raise event); Enhance context
menu
Chart; Map; Label
Enhance context menu
Navigation Block
Table-Interface (run JavaScript function for eventraising
directly on click, add icon to raise event); Enhance context
menu
3.6
Useful Links
How-To-Guide Cient-Side-Eventing
http://service.sap.com/~sapidb/011000358700000590732003E/RIG_Call.zip
How-To-Guide Enhance the Context Menu in Web Applications
http://service.sap.com/~sapidb/011000358700002337242002E/HOWTOENHANCE
CONTEXTMENU.PDF
How-To-Guide Enhance your Web-Query with the Table-Interface
http://service.sap.com/~sapidb/011000358700003242362001E/HOWTOTABLEINTE
RFACE.DOC
Online Help BEx Web-Applications
http://help.sap.com Business Information Warehouse → Business Explorer → Web
Application Design
2003 SAP AG
11