How to Client Side Eventing with BW 3.x and EP 5.

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 2 3 BUSINESS SCENARIO ................................................................................................................ 1 SOLUTION .................................................................................................................................... 2 THE STEP-BY-STEP SOLUTION ................................................................................................ 4

APPENDIX ........................................................................................................................................... 7 3.1 3.2 3.3 3.4 3.5 3.6 Example Code of the Sender iView.......................................................................................................7 Example Code of the Receiver iView....................................................................................................8 Second Example Code for Sender iView ..............................................................................................9 Second Example Code for Receiver iView .........................................................................................10 BW-Items and Portal-Eventing...........................................................................................................11 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

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

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

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"

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

2003 SAP AG

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

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

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

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

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

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 Drop-Down-Box Radio-Button Table How to integrate Use Parameter only_values=X and create your own selectTag with onchange-JavaScript-Event Parameter only_values=X and create your own form with action Table-Interface (run JavaScript function for eventraising directly on click, add icon to raise event); Enhance context menu Enhance context menu Table-Interface (run JavaScript function for eventraising directly on click, add icon to raise event); Enhance context menu

Chart; Map; Label 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