Professional Documents
Culture Documents
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
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).
Table of Contents
HOW TO ........................................................................................................................................... 1
CLIENT SIDE EVENTING WITH BW 3.X AND EP 5.0 ....................................................................... 1
1
SOLUTION .................................................................................................................................... 2
APPENDIX ........................................................................................................................................... 7
3.1
3.2
3.3
3.4
3.5
3.6
2003 SAP AG
TABLE OF CONTENTS
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
2 Solution
The Portal provides a framework for clientside eventing.
Enterprise Portal Client Framework (EPCF)
A service in the Portal, that enhances your Portal Components 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
2003 SAP AG
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>
<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
<script language=javascript>
EPCMPROXY.subscribeEvent( "urn:com.sap:BWEvents",
"BWSetABCClassification", window, "myreceiveEvent");
2003 SAP AG
Appendix
3.1
2003 SAP AG
3.2
<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
3.3
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
3.4
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
3.5
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
Table
Navigation Block
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