eventing between sap bi 7.0 bex iview and webdynpro · pdf fileeventing between sap bi 7.0 bex...
TRANSCRIPT
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
www.mouritech.com Page 2 of 18
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
www.mouritech.com Page 3 of 18
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
www.mouritech.com Page 4 of 18
2) Select the web template parameters tab and select the Script web item from the
drop down of web items
www.mouritech.com Page 5 of 18
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");
}
www.mouritech.com Page 6 of 18
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
www.mouritech.com Page 7 of 18
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
www.mouritech.com Page 8 of 18
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 );
www.mouritech.com Page 9 of 18
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 */
www.mouritech.com Page 10 of 18
var paramCHARACTERISTICS_SELECTIONS = new sapbi_Parameter(
"CHARACTERISTICS_SELECTIONS", "" );
var paramListCHARACTERISTICS_SELECTIONS = new
sapbi_ParameterList();
// Create parameter CHARACTERISTIC_SELECTIONS
var paramCHARACTERISTIC_SELECTIONS1 = new sapbi_Parameter(
"CHARACTERISTIC_SELECTIONS", "" );
var paramListCHARACTERISTIC_SELECTIONS1 = new
sapbi_ParameterList();
// 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 );
www.mouritech.com Page 11 of 18
/* 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
www.mouritech.com Page 12 of 18
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.
www.mouritech.com Page 13 of 18
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.
www.mouritech.com Page 14 of 18
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.
www.mouritech.com Page 15 of 18
www.mouritech.com Page 16 of 18
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.
www.mouritech.com Page 17 of 18
The commands can also be added in the XHTML code
1) In action before rendering functionality mentioned in the web template properties
www.mouritech.com Page 18 of 18
2) On click functions of buttons etc