Eventing between SAP BI 7.0 BEX iView and Webdynpro · PDF fileEventing between SAP BI 7.0 BEX iView and Webdynpro iView Overview: The Portal Eventing in BI 7.0 iViews can be accomplished

www.mouritech.com Page 1 of 18

Author: Shilpa Chavvakula (SAP NetWeaver BI Consultant) Date: March 20th, 2011

Email: [email protected]

Phone: 203-788-6558

Eventing between SAP BI 7.0 BEX iView and Webdynpro iView

Overview:

The Portal Eventing in BI 7.0 iViews can be accomplished with the help of enterprise

portal client framework (EPCF) and java script web item in web application designer

(WAD 7.0).

The BI 7.0 iViews uses new web templates which are built using the XHTML markup

language which is different than HTML used in older versions.

As of BI 7.0 java script can’t be directly added to the XHTML code but has to be added

as a part of script web item.

The documentation will be written by taking example of the eventing between Web

dynpro java org viewer iView and a BI 7.0 BEX iView.

Business functionality required:

The portal page consists of two iViews namely

1) Org Viewer

2) Bex iView

Org Viewer iView displays

1) Directly reporting employees

2) All reporting employees

3) Org Units


The Bex iView shows data relating those employees.

Whenever user clicks on refresh button in org viewer iView the selected employee’s data

will be shown in BEX iView. Also whenever the page is accessed first time the bex

iView has to show data of all employees reporting to user.

Technical Code:

Only the BEX web template and Java script used in Web templates will be covered in this

documentation. The webdynpro java code is not covered here.

The above bex web template consists of

1) Analysis web item


2) Script web item

3) Data provider

Data provider supplies the data to web template. It can be initialized with

1) Query

2) Filter

The functionality required can be achieved with the help of java script web item.

To add the java script to java script web item please follow below steps

1) Click on the layout tab and go to properties pane in left bottom of web application

designer


2) Select the web template parameters tab and select the Script web item from the

drop down of web items


3) To open the editor for adding java script click on the button on the right hand side

of script property.

Please find below the java script added and also the explanation.

i) The below part is added to relax the domain which is mandatory for eventing

to work.

if(window.document.domain == window.location.hostname){

document.domain = document.domain.substring(document.domain.indexOf('.')+1);

}

ii) The below part is added to raise a default event when the user clicks for the

first time on the role in Top level navigation(TLN)

if(document.referrer.indexOf("InitialNodeFirstLevel=true") > -1)

{

EPCMPROXY.raiseEvent( "urn:com.we.hr.wd.orgviewer",

"defaultDataRequest", "ZPR_0PT_C01_Q0005_T0001");

}

iii) The below part is added to raise a default event when user clicks on the detail

navigation

if(document.referrer.indexOf("NavPathUpdate=false") > -1)

{

EPCMPROXY.raiseEvent( "urn:com.we.hr.wd.orgviewer",

"defaultDataRequest", "ZPR_0PT_C01_Q0005_T0001");

}


iv) The below part is added to to subscribe to the events raised by the org viewer

iViews.

EPCMPROXY.subscribeEvent(

"urn:com.we.hr.wd.orgviewer:EMPLOYEE:ZPR_0PT_C01_Q0005_T0001",

"defaultData", window, "receiveOrgViewerEvent");

EPCMPROXY.subscribeEvent(

"urn:com.we.hr.wd.orgviewer:ORG_UNIT:ZPR_0PT_C01_Q0005_T0001",

"defaultData", window, "receiveOrgViewerEvent");

EPCMPROXY.subscribeEvent( "urn:com.we.hr.wd.orgviewer:EMPLOYEE",

"selectionChanged", window, "receiveOrgViewerEvent");

EPCMPROXY.subscribeEvent( "urn:com.we.hr.wd.orgviewer:ORG_UNIT",

"selectionChanged", window, "receiveOrgViewerEvent");

v) The below function is event handler when ever an event is raised.

This function initially creates and command sequence.

The commands are instructions to do some action on

1) Data providers

2) Web items

3) Web templates

They can be used to change properties dynamically at runtime of all the three

items mentioned above.

The below function gets the value array from the data object got from org

viewer iView. Replaces the “,” with the “;” because BI 7.0 expects “;” in a value

array.

Then depending upon the type of selection either EMPLOYEE or ORGUNIT

call another function which sets the data provider parameters dynamically at

runtime.

function receiveOrgViewerEvent(eventObj) {

//Create a new object of type sapbi_CommandSequence

var commandSequence = new sapbi_CommandSequence();

alert(eventObj.eventName);

//Get the data from dataobject


var valueArray = eventObj.dataObject.split(",");

alert(valueArray);

if (eventObj.eventNamespace.indexOf("EMPLOYEE") > -1) {

var valueObject = "0EMPLOYEE";

for (var i=0; i <valueArray.length; i++)

{

var VAL = valueArray[i];

commandSequence = setFilterValue(commandSequence,valueObject,VAL);

}

} else {

var valueObject = "0ORGUNIT";

for (var i=0; i <valueArray.length; i++)

{

var VAL = valueArray[i];

commandSequence = setFilterValue(commandSequence,valueObject,VAL);

}

}

sapbi_page.sendCommand( commandSequence );

}

vi) The java script web item in BI 7.0 consists of a wizard which will automatically

generate the java script depending upon the command or command sequence we have

created.

In our scenario our requirement is to in two stages

1) Initialize the data provider with the query

2) Set filters to the data provided from the value array passed.

This can be achieved by using two commands which are

1) SET_DATA_PROVIDER_PARAMETERS

2) SET_FILTER_VALUES

Please see the screen shots below to automatically create the java script mentioned below


function setFilterValue(commandSequence,valueObject,valueArray){

//Note: information can be extracted using the parameter 'currentState'

// and 'defaultCommandSequence'. In either case create your own object

// of type 'sapbi_CommandSequence' that will be sent to the server.

// To extract specific values of parameters refer to the following

// snippet:

// var key = currentState.getParameter( PARAM_KEY ).getValue();

// alert( "Selected key: " + key );

//

// ('PARAM_KEY' refers to any parameter's name)

//Create a new object of type sapbi_CommandSequence

var commandSequence = new sapbi_CommandSequence();

/*

* Create a new object of type sapbi_Command with the command named

"SET_DATA_PROVIDER_PARAMETERS"

*/

var commandSET_DATA_PROVIDER_PARAMETERS_1 = new

sapbi_Command( "SET_DATA_PROVIDER_PARAMETERS" );

/* Create parameter DATA_PROVIDER_TYPE */

var paramDATA_PROVIDER_TYPE = new sapbi_Parameter(

"DATA_PROVIDER_TYPE", "QUERY_VIEW_DATA_PROVIDER"

);commandSET_DATA_PROVIDER_PARAMETERS_1.addParameter(

paramDATA_PROVIDER_TYPE );

/* End parameter DATA_PROVIDER_TYPE */

/* Create parameter INIT_PARAMETERS */

var paramINIT_PARAMETERS = new sapbi_Parameter(

"INIT_PARAMETERS" );

var paramListINIT_PARAMETERS = new

sapbi_ParameterList();commandSET_DATA_PROVIDER_PARAMETERS_1.addPa

rameter( paramINIT_PARAMETERS );

// Create parameter INITIAL_STATE

var paramINITIAL_STATE = new sapbi_Parameter( "INITIAL_STATE",

"QUERY" );

var paramListINITIAL_STATE = new sapbi_ParameterList();

// Create parameter QUERY

var paramQUERY = new sapbi_Parameter( "QUERY",

"ZPR_0PT_C01_Q0007_ADB_7" );

paramListINITIAL_STATE.addParameter( paramQUERY );

// End parameter QUERY!

paramINITIAL_STATE.setChildList( paramListINITIAL_STATE );


paramListINIT_PARAMETERS.addParameter( paramINITIAL_STATE );

// End parameter INITIAL_STATE!

paramINIT_PARAMETERS.setChildList( paramListINIT_PARAMETERS );

/* End parameter INIT_PARAMETERS */

/* Create parameter TARGET_DATA_PROVIDER_REF */

var paramTARGET_DATA_PROVIDER_REF = new sapbi_Parameter(

"TARGET_DATA_PROVIDER_REF", "DATAPROVIDER_1" );

commandSET_DATA_PROVIDER_PARAMETERS_1.addParameter(

paramTARGET_DATA_PROVIDER_REF );

/* End parameter TARGET_DATA_PROVIDER_REF */

// Add the command to the command sequence

commandSequence.addCommand(

commandSET_DATA_PROVIDER_PARAMETERS_1 );

/*

* End command commandSET_DATA_PROVIDER_PARAMETERS_1

*/

/*

* Create a new object of type sapbi_Command with the command named

"SET_SELECTION_STATE"

*/

var commandSET_SELECTION_STATE_2 = new sapbi_Command(

"SET_SELECTION_STATE" );

/* Create parameter TARGET_DATA_PROVIDER_REF_LIST */

var paramTARGET_DATA_PROVIDER_REF_LIST = new sapbi_Parameter(

"TARGET_DATA_PROVIDER_REF_LIST", "" );

var paramListTARGET_DATA_PROVIDER_REF_LIST = new

sapbi_ParameterList();

// Create parameter TARGET_DATA_PROVIDER_REF

var paramTARGET_DATA_PROVIDER_REF1 = new sapbi_Parameter(

"TARGET_DATA_PROVIDER_REF", "DATAPROVIDER_1" );

paramListTARGET_DATA_PROVIDER_REF_LIST.setParameter(

paramTARGET_DATA_PROVIDER_REF1, 1 );

// End parameter TARGET_DATA_PROVIDER_REF!

paramTARGET_DATA_PROVIDER_REF_LIST.setChildList(

paramListTARGET_DATA_PROVIDER_REF_LIST );

commandSET_SELECTION_STATE_2.addParameter(

paramTARGET_DATA_PROVIDER_REF_LIST );

/* End parameter TARGET_DATA_PROVIDER_REF_LIST */

/* Create parameter CHARACTERISTICS_SELECTIONS */


var paramCHARACTERISTICS_SELECTIONS = new sapbi_Parameter(

"CHARACTERISTICS_SELECTIONS", "" );

var paramListCHARACTERISTICS_SELECTIONS = new


// Create parameter CHARACTERISTIC_SELECTIONS

var paramCHARACTERISTIC_SELECTIONS1 = new sapbi_Parameter(

"CHARACTERISTIC_SELECTIONS", "" );

var paramListCHARACTERISTIC_SELECTIONS1 = new


// Create parameter CHARACTERISTIC

var paramCHARACTERISTIC = new sapbi_Parameter( "CHARACTERISTIC",

"0EMPLOYEE" );

paramListCHARACTERISTIC_SELECTIONS1.addParameter(

paramCHARACTERISTIC );

// End parameter CHARACTERISTIC!

// Create parameter SELECTIONS

var paramSELECTIONS = new sapbi_Parameter( "SELECTIONS", "" );

var paramListSELECTIONS = new sapbi_ParameterList();

// Create parameter SELECTION

var paramSELECTION1 = new sapbi_Parameter( "SELECTION",

"SELECTION_INPUT_STRING" );

var paramListSELECTION1 = new sapbi_ParameterList();

// Create parameter SELECTION_INPUT_STRING

var paramSELECTION_INPUT_STRING = new sapbi_Parameter(

"SELECTION_INPUT_STRING", valueArray );

paramListSELECTION1.addParameter( paramSELECTION_INPUT_STRING );

// End parameter SELECTION_INPUT_STRING!

paramSELECTION1.setChildList( paramListSELECTION1 );

paramListSELECTIONS.setParameter( paramSELECTION1, 1 );

// End parameter SELECTION!

paramSELECTIONS.setChildList( paramListSELECTIONS );

paramListCHARACTERISTIC_SELECTIONS1.addParameter(

paramSELECTIONS );

// End parameter SELECTIONS!

paramCHARACTERISTIC_SELECTIONS1.setChildList(

paramListCHARACTERISTIC_SELECTIONS1 );

paramListCHARACTERISTICS_SELECTIONS.setParameter(

paramCHARACTERISTIC_SELECTIONS1, 1 );

// End parameter CHARACTERISTIC_SELECTIONS!

paramCHARACTERISTICS_SELECTIONS.setChildList(

paramListCHARACTERISTICS_SELECTIONS );

commandSET_SELECTION_STATE_2.addParameter(

paramCHARACTERISTICS_SELECTIONS );


/* End parameter CHARACTERISTICS_SELECTIONS */

// Add the command to the command sequence

commandSequence.addCommand( commandSET_SELECTION_STATE_2 );

/*

* End command commandSET_SELECTION_STATE_2

*/

//Send the command sequence to the server

return commandSequence;

}

Screen shots for creating java script

1) Click on the create wizard button

2) Select the All commands tab and select Set Data provider Parameters command as

shown below


3) Select Next button and select the data provider

4) Click on next button and select the query to be initialized.

Note: If you do not select a query, BEx Web Designer will automatically

assume what query you are trying to set for the data parameters and insert

“(Default)” next to the query name.


If this is the query name that you want to use, erase the “(Default)” text or

click the box and select the query. The query should be bold as displayed

below (e.g. ZCC_ZCC_IS02_7)

5) Click on next command button which will be executed as soon as the initialization is

done. In our case it is set filter values, but setting the Data provider Parameters command

can be repeated if you have additional data providers in on ivew.


6) Next click on the Insert button to select the Set filter value command

7) Click on next button to select the data provider and next the characteristic and

characteristic values and select ok after which java script is automatically generated.

Note: If your template is using more than one data providers for one ivew using

eventing, you can enter additional “Data Provider Affected” values below in the

additional drop down menu.



Note: In the resulting java script code replace “” before are after of valueObject and

valueArray strings inside the function. See below remove double quotes from

“valueObject” and “valueArray” as highlighted below.


The commands can also be added in the XHTML code

1) In action before rendering functionality mentioned in the web template properties


2) On click functions of buttons etc

Documents

Eventing between SAP BI 7.0 BEX iView and Webdynpro · PDF fileEventing between SAP BI 7.0 BEX iView and Webdynpro iView Overview: The Portal Eventing in BI 7.0 iViews can be accomplished