consume bi - yahoo widgets

8/6/2019 Consume BI - Yahoo Widgets

1/31

How-to Guide

SAP NetWeaver 2004s

How ToConsume BIData withinYahoo Widgets

January 2007Version 1.3

Applicable Releases:SAP NetWeaver 2004s(Business Information Management - EnterpriseReporting, Query, and Analysis)


2/31

Copyright 2007 SAP AG. All rights reserved.

No part of this publication may be reproduced ortransmitted in any form or for any purpose without the

express permission of SAP AG. The information

contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its

distributors contain proprietary software components of

other software vendors.

Microsoft, Windows, Outlook,and PowerPoint

are

registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, OS/2, Parallel

Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400,

iSeries, pSeries, xSeries, zSeries, z/OS, AFP, Intelligent

Miner, WebSphere, Netfinity, Tivoli, and Informix are

trademarks or registered trademarks of IBM Corporation

in the United States and/or other countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered

trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame,

WinFrame, VideoFrame, and MultiWinare trademarks

or registered trademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or

registered trademarks of W3C, World Wide Web

Consortium, Massachusetts Institute of Technology.

Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems,Inc., used under license for technology invented and

implemented by Netscape.

MaxDB is a trademark of MySQL AB, Sweden.

SAP, R/3, mySAP, mySAP.com, xApps, xApp, and other

SAP products and services mentioned herein as well as

their respective logos are trademarks or registered

trademarks of SAP AG in Germany and in several other

countries all over the world. All other product and

service names mentioned are the trademarks of theirrespective companies. Data

contained in this document serves informational

purposes only. National product specifications may vary.

These materials are subject to change without notice.

These materials are provided by SAP AG and its affiliated

companies ("SAP Group") for informational purposes

only, without representation or warranty of any

kind, and SAP Group shall not be liable for errors or

omissions with respect to the materials. The only

warranties for SAP Group products and services are those

that are set forth in the express warranty statements

accompanying such products and services, if any.

Nothing herein should be construed as constituting an

additional warranty.

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.

SAP NetWeaver How-to Guides 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 SAP NetWeaver. Shouldyou wish to receive additional information, clarification

or support, please refer to SAP Consulting.

Any software coding and/or code lines / strings (Code)

included in this documentation are only examples and

are not intended to be used in a productive system

environment. The Code is only intended better explain

and visualize the syntax and phrasing rules of certain

coding. SAP does not warrant the correctness and

completeness of the Code given herein, and SAP shall

not be liable for errors or damages caused by the usage of

the Code, except if such damages were caused by SAPintentionally or grossly negligent.


3/31

- 1 -

1 Introduction

Yahoo Widgets are great applications for allowing users to interact with systems or applications

directly on their desktop. Within the SAP space, there are casual users of BI that may want metricson a daily basis. Many customers run their businesses off one or two key reports, such as a dailysales report, or a simplified financial statement. Therefore, this guide provides a way to consumeBI Data within Yahoo Widgets.

Screenshot of Widget:

2 Scenarios

As with any solution, the first thing you need to do is identify when to use the solution. The YahooWidgets solution is great for targeting your casual user. For example, many users have similartypes of desktop applications to view their stock ticker every morning. This information isperipheral. You glance at it in the morning, but dont really do anything or follow up unless your

stock value changes drastically (either positive or negative).

Im proposing that key enterprise metrics be treated in a similar manner. For example, if acompany uses daily sales numbers to measure performance, this metric should be pervasivewithin the organization. Users should see their metric peripherally every day when they log ontotheir machine, and should only follow up if they see unexpected numbers.

The Yahoo Widget Application allows you to present this to the user in a very nice way. They wonteven know they are interacting with an SAP application!

The example below will utilize a BI Query that provides daily sales results by Sales Organizations

within a CPG company.

Also, keep in mind that this widget renders the full BI dataset from the query. The widget sizeexpands based on how much data is returned from the BI query. Therefore, you should only usethe widget for small datasets.

3 Version History and Limitations

Version 1.1- Currently, this dynamic dataset only supports characteristics in the row and structures inthe column


4/31

- 2 -

- Does not support structures in both rows and columns- Does not support structures and characteristics in both rows and columns- Does not support hierarchies- Does not support queries with mandatory variables

Version 1.2

- Added support for all query datasets with 2 structures and n characteristics- Added support for structures in both rows and columns- Added support for structures and characteristics in both rows and columns- Does not support hierarchies- Does not support queries with mandatory variables

Version 1.3- Widget now refreshes when preferences are changed

4 Pre-requisites

4.1 Activate QueryViewData Web Service

The QueryViewData web service is a web service that allows you to interact with all your BI Data. It

providers a simple access to query results as XML list output. Therefore, it is optimal for customer-specific

development for front-end applications reading SAP BI data. For details, see this blog and the attached

presentation:

https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/4332

1. Go to SICF and activate this web

service:/sap/bc/srt/rfc/sap/QUERY_VIEW_DATA


5/31


6/31

- 4 -

5. Choose New to create a newexternal alias.

6. Enter external alias

/sap/bw/xml/soap/queryview andenter description SAP BI WebService XML Result Set

7. Specify your security and user ID onthe Logon data tab.


7/31

- 5 -

8. Specify/sap/bc/srt/rfc/sap/QUERY_VIEW_DATA under the Trg Element tab.

9. Save your external alias.

10. Go to transaction WSADMIN -> Goto -> Administration Settings. Ensurethat the path to your J2EE isspecified here and save this.


8/31

- 6 -

11. Find your web service and choosethe Web service homepage

12. Login to your ABAP system from theWeb Service Navigator

13. Choose Test -> GetQueryViewDatato test this service.


9/31

- 7 -

14. Enter and Infoprovider and Queryand send the request to test this webservice. Note: If the query hasmandatory variables, those must bepassed in the parameter. For the

sake of this test, use a query withoutvariables.

15. Ensure the request and response

are successful.

16. If you have issues, make sure youactivate your Web Service andInterface in SE80


10/31

- 8 -

17. Here is an example of how to passparameters for filter values usingWEB API commands. We arepassing theFILTER_IOBJNM=0D_CHANNEL

and FILTER_VALUE=3.

18. Here is an example of how to pass

parameters for variable values usingWEB API commands. In this case,we are using a selection optionvariable. We are passing thefollowing parameters:VAR_NAME_1=DISTGOPVAR_OPERATOR_1=EQVAR_VALUE_LOW_EXT_1=3VAR_VALUE_HIGH_EXT_1=5

4.2 Install Yahoo Widget Engine

The Yahoo Widget Engine is a pre-requisite to running these Widgets.

1. Go to http://widgets.yahoo.com/anddownload and install the latestversion of Yahoos Widget Engine.


11/31

- 9 -

4.3 Install Yahoo Widget Converter Widget

The Yahoo Widget Converter allows you to compile or de-compile a widget.

1. Go tohttp://widgets.yahoo.com/workshop/and download the widget converter.

5 The Step by Step Solution Creating your Widget

In this section, well discuss how-to create the Yahoo Widget. All Yahoo Widgets are open source so the

easiest way to start with widgets is look at other widgets that are accomplishing things similar to what

youre looking to accomplish. Therefore, this guide will provide a template widget that you can use to

start building widgets to consume SAP BI data. Additionally, well provide the basic steps to build a basicwidget from scratch. This example shows how to build a Daily Sales widget off SAP BI data.

5.1 Design your basic User Interface

There are two options for designing your user interface. A Yahoo Widget is just an XML document.

Therefore, you can update this XML Document with an XML text editor of your choice. The other option is

to use Adobe Photoshop Layers to build your user interface. Here is an example of the scenario using an

XML document. To use Photoshop Layers, see the help on yahoos website.


12/31

- 10 -

1. Create a new folder within your MyDocuments\My Widgets called BIData.

2. Create a new text document.

3. Name the new file BI_Data.kon.


13/31

- 11 -

4. Open your new kon file withWordpad or a text/xml editor of yourchoice.

5. Now we have to create the opening

and closing widget tags to define thisXML file as a widget. Therefore,copy this code into your new widgetand update the author, company,and commented description of yourwidget. For now, make sure debugmode is on.

on

6. Now to define the size and positionof your widget, add the tag. The width and height here willbe the size of your widget.

Daily Sales WidgetmainWindow50500leftfalse

mainWindow.hOffset = 10 +screen.availLeft;

mainWindow.vOffset =(screen.availHeight + screen.availTop) - 87;


14/31

- 12 -

7. Within your BI Data folder, create anew folder called Images. This iswhere the images for your widgetwill be stored.

8. Create a background image for your

widget and store it in this folder.Name this image background.png.If you want, you can use this image:

background.png

9. Add the background image tag toyour Widget within the tag.

bevel505000


15/31

- 13 -

10. Save your widget and double clickon the BI_Data.kon file. This shouldlaunch your widget in the YahooWidget Engine. Here you should seeyour debug window and the BI Data

Widget!

5.2 Adding preferences tags

Yahoo Widgets can have global preferences that are set by the user. For our Daily Sales widget, we will

allow the user to specify their userid, password, and host they want to connect to. Therefore, developers can

use this widget to connect to development, QA, and production systems.

1. Add the following preference tags toyour BI Data widget.

UserUserID:textBIM253_00User

PasswordPassword:textWelcome1Passwordyes

host

Hosttextcdphl338.phl.sap.corp:1080


16/31

- 14 -

host

InfoCube

InfoCubetext0D_SD_C03InfoCube

QueryQuerytextPM_DAILY_SALESQuery

modemodepopupofflineonlineonlineofflineofflineWidget Mode

2. Save your widget. Go to the debugconsole and click Reload.


17/31


18/31

- 16 -

1. Within your tag, add thefollowing action tag to make thewindow visibility true on load of thewidget.

5.3.2 Create Javascript Include

Include the library specified in the template widget and the next section.

1. Within your BI_Data folder, createanother file calledglobal_include.js.

2. Paste the include code which isattached at the bottom of this

document into the include file.

SEE SECTION 6 for include code.


19/31

- 17 -

5.3.3 Call the SAP BI QueryViewData Web Service

1. Update the action to now write thedata grid from the BI Dataset bycalling the query view data webservice.


20/31

- 18 -

//Declare Arrayvar dataset = new Array();

for(i = 0; i < numRows; i++){

dataset[i] = new Array();}

createTable(xmlDoc, numRows,numColumns, numHeaderRows, leadColumns);

resizeCol();

writeTitle(xmlDoc.evaluate("string(soap-env:Envelope/soap-env:Body/n0:GetQueryViewDataResponse/TextSymbo

ls/item[SymName='REPTXTLG']/SymValue)"));}

-->

5.4 Turn off Debug Mode

1. Update the debug tag to be off. off


21/31

- 19 -

5.5 Compile your Widget!

1. Run the Widget Converter

6 The Final Widget

6.1 Here is an example of the Final Daily Sales Widget

off

Daily Sales WidgetmainWindow50

500leftfalse

mainWindow.hOffset = 10 + screen.availLeft;mainWindow.vOffset = (screen.availHeight + screen.availTop) - 87;

bevel505000


22/31

- 20 -

UserUserID:textBIM253_00User

PasswordPassword:textWelcome1

Passwordyes

hostHosttextcdphl338.phl.sap.corp:1080host

InfoCubeInfoCubetext0D_SD_C03InfoCube

QueryQuerytextPM_DAILY_SALESQuery

modemodepopupofflineonlineonlineofflineofflineWidget Mode


23/31

- 21 -


24/31

- 22 -

{ alert("error");}else{

var numHeaderRows = xmlDoc.evaluate("number(soap-env:Envelope/soap-env:Body/n0:GetQueryViewDataResponse/AxisInfo/item[Axis='000']/Nchars)");

if(isNaN(numHeaderRows)){

numHeaderRows = 1;}

var numRows = xmlDoc.evaluate("number(soap-env:Envelope/soap-env:Body/n0:GetQueryViewDataResponse/AxisInfo/item[Axis='001']/Ncoords)");

if(isNaN(numRows)){numRows = 1;

}numRows = numRows + numHeaderRows;

var leadColumns = xmlDoc.evaluate("number(soap-env:Envelope/soap-env:Body/n0:GetQueryViewDataResponse/AxisInfo/item[Axis='001']/Nchars)");

if(isNaN(leadColumns)){

leadColumns = 0;}

var numColumns = xmlDoc.evaluate("number(soap-env:Envelope/soap-env:Body/n0:GetQueryViewDataResponse/AxisInfo/item[Axis='000']/Ncoords)");

if(isNaN(numColumns)){

numColumns = 1;}

numColumns = numColumns + leadColumns;

//Declare Arrayvar dataset = new Array();

for(i = 0; i < numRows; i++){dataset[i] = new Array();}

createTable(xmlDoc, numRows, numColumns, numHeaderRows, leadColumns);

resizeCol();writeTitle(xmlDoc.evaluate("string(soap-env:Envelope/soap-

env:Body/n0:GetQueryViewDataResponse/TextSymbols/item[SymName='REPTXTLG']/SymValue)"));}

]]>


25/31

- 23 -

6.2 Javascript include

/*** Global Include*/

function callWebService(){

//Create Web Service URL from preferencesvar infocube = preferences.InfoCube.value;var query = preferences.Query.value;var webservice = "http://" +

preferences.host.value +"/sap/bc/srt/rfc/sap/QUERY_VIEW_DATA?sap-

client=003&wsdl=1.1" +"&sap-user=" +preferences.User.value +

"&sap-password=" +preferences.Password.value;var action;

//Build SOAP Envelope String to pass to the web servicevar SOAPEnvelope = ""+ ""+ ""+ "true"

+ ""+ ""+ ""+ ""+ infocube+ ""+ ""+ query+ ""+ ""+ ""+ "";

// Create SOAP Requestvar request = new XMLHttpRequest();request.open("POST", webservice, false);

// Set Header Informationrequest.setRequestHeader ("SOAPAction", action);request.setRequestHeader ("Content-Type", "text/xml");

//Execute the SOAP request and send the SOAPEnvelope Stringrequest.send(SOAPEnvelope);

return request;}

function work_offline(){


26/31

- 24 -

//Use Local filetry{

//Test Document for 1 characteristic in row and 1 structure incolumn

var xmlDoc =

XMLDOM.parse(filesystem.readFile("sample_data/xmldoc_01.xml"));

//Test Document for 2 characteristics in row and 1 structure incolumn

//var xmlDoc =XMLDOM.parse(filesystem.readFile("sample_data/xmldoc_02.xml"));

//Test Document for 1 structure in row and 1 structure incolumn


//Test Document for 2 structures in row and nothing in column


//Test Document for nothing in row and 2 structures in column//var xmlDoc =


//Test Document for 1 structure and 2 characteristics in rowand 1 structure in column


//Test Document for 1 structure in row and 1 structure with 2characteristics in column


//Test Document for 1 structure with 2 characteristics in rowand 1 structure with 2 characteristics in column


//Test Document for nothing in row 1 structure in column//var xmlDoc =


return xmlDoc;}

catch( e ){

print( e );}

}

function getXML(){if (preferences.mode.value == 'offline')

{xmlDoc = work_offline();return xmlDoc;

}else


27/31

- 25 -

{request = callWebService();

if (request.status != 200){alert("Cannot load BI Query. Please change to offline mode in

preferences");

}else{//Create an XML Document and string with data returned from web

servicevar xmlDoc = request.responseXML;var textDoc = request.responseText;return xmlDoc;

}}

}

function PadInt(i,width,pad){if( i < 0 || (i + "").length >= width )

return i;return PadInt(pad + i,width,pad);

}

function createTable(xmlDoc, numRows, numColumns, numHeaderRows,leadColumns)

{var row;var col;

var init_colposition = 18;var init_rowposition = 65;var colposition = 18;var rowposition = 65;var row_step = 15;var col_step = 115;j = 1;

k = 1;m = 2;

//Create Vertical Scroll Barvar scrollFrame = new Frame( mainWindow );scrollFrame.vOffset = colposition;scrollFrame.hOffset = rowposition + row_step;scrollFrame.hOffset = rowposition + row_step;

//Write Datasetfor(row = 0; row < numRows; row++){

for(col = 0; col < numColumns; col++){

dataset[row][col] = new Text();dataset[row][col].hOffset = colposition;dataset[row][col].vOffset = rowposition;dataset[row][col].alignment = "left";dataset[row][col].size = 12;dataset[row][col].font = "Arial";

dataset[row][col].color = "#FFFFFF";dataset[row][col].visible = true;


28/31

- 26 -

//Write Headersif(row < numHeaderRows && col < leadColumns){

index = col + 1;dataset[row][col].data =

xmlDoc.evaluate("string(soap-env:Envelope/soap-env:Body/n0:GetQueryViewDataResponse/AxisInfo/item[Axis='001']/Chars/item[" + index +"]/Caption)");

dataset[row][col].style = "bold";}if (row < numHeaderRows && col >= leadColumns){

index = k;dataset[row][col].data =

xmlDoc.evaluate("string(soap-env:Envelope/soap-env:Body/n0:GetQueryViewDataResponse/AxisData/item[Axis='000']/Set/item[" + index +"]/Caption)");

dataset[row][col].style = "bold";

k = k + numHeaderRows;if(k > ((numColumns-leadColumns) * numHeaderRows)){

k = m;m++;

}

}//Write Lead Columnsif (row >= numHeaderRows && col < leadColumns){

index = (col) + (row - numHeaderRows) * (leadColumns)+ 1;

dataset[row][col].data =xmlDoc.evaluate("string(soap-env:Envelope/soap-env:Body/n0:GetQueryViewDataResponse/AxisData/item[Axis='001']/Set/item[" + index +"]/Caption)");

scrollFrame.addSubview(dataset[row][col]);}//Write DataSetif (row >= numHeaderRows && col >= leadColumns){

//cell_ordinal = (col) + (row-1) * numColumns - 1;//alert(cell_ordinal);itemvalue = PadInt(j, 6, "0" );dataset[row][col].data =

xmlDoc.evaluate("string(soap-env:Envelope/soap-env:Body/n0:GetQueryViewDataResponse/CellData/item[" + itemvalue +"]/FormattedValue)");

scrollFrame.addSubview(dataset[row][col]);j++;

}colposition = colposition + col_step;

}colposition = init_colposition;rowposition = rowposition + row_step;

//Increase Height of Widgetif(mainWindow.height < rowposition){

mainWindow.height = rowposition + row_step + 30;bevel.height = mainWindow.height;


29/31

- 27 -

}}

}

function writeTitle(w_title)

{ title = new Text();title.data = w_title;title.alignment = "right";title.size = 20;title.color = "#FFFFFF";title.hOffset = mainWindow.width -15;title.vOffset = 30;

}

function resizeCol(){

var colposition = 18;var col_buffer = 15;

for(col = 0; col < numColumns; col++){

var colSize = 0;//Find minimum column sizefor(row = 0; row < numRows; row++){

colSize = Math.max(colSize, dataset[row][col].width);}

for(row = 0; row < numRows; row++){

dataset[row][col].hOffset = colposition;}colposition = colposition + colSize + col_buffer;

//Increase Widget width based on datasetif(mainWindow.width < colposition){

mainWindow.width = colposition + col_buffer + 10;bevel.width = mainWindow.width;

}}

}

6.3 Here is a template widget you can copy to call BI data generically

BI_DATA.widget


30/31

- 28 -

7 Appendix

7.1 References

http://widgets.yahoo.com/workshop/


31/31

http://www.sdn.sap.com/irj/sdn/howtoguides