CONNECTED SAP Dashboard as HTML5 – Step-By-Step Info

As promised on the last post, you can find below a detailed account of how to get your connected HTML5 harvested SAP Dashboards (Xcelsius) files to work outside the SAP BI App.
I tried to strike a fine balance between keeping this to a simple set of instructions and giving enough info for troubleshooting and explanations.
At a very high level the process is as follow:
1. Harvest the HTML5 source files
2. Place them in a webapp
3. Obtain a BO token (as in any other connectivity scenario with BO)
4. Make a few small modifications to the HTML5 files to leverage the token and pass it through to the REST services being used to invoke the connections in the dashboard
So, let’s get started!
Step 0:
Copy the temp files while preview to mobile. I am not going to elaborate on this step, I assume by now you know how to find the dashboard html5 files


Step 1:
Paste the HTML5 source files from the temp directory in a webapp. In my example, I created a webapp on the BO server tomcat called dashboardunwiredrepeat. This webapp has all the jars needed in the WEB-INF directory to use the BO SDK to authenticate a user and obtain a token. To make it easy to deploy multiple dashboards in a single apps, you can make subfolders for each dashboard as dash1, and dash2 in this example


Step 2:
Prepare to use the BO token. In my example, I used a .jsp file to authenticate with a hard coded username and pwd against the BO system, obtain a token and store it in the tomcat session. To leverage this token, I simply renamed dashboard.html to dashboard.jsp, making it possible to include my .jsp file inside the main dashboard page to use the token. Of course, there are many different ways to accomplish this, and pass the token to the dashboard.html file without converting it to a .jsp with server side code


Step 3:
Get access to the BO token. As I explained in the prior step, my inc.jsp file contains SDK code to obtain a token and stire it in the session. I will include it in the dashboard.jsp file so I can easily access the token. Open dashboard.jsp with a text editor and make the following changes:
a. Paste the following line as the first line in the file:

<%@ include file="../inc.jsp" %>

b. Paste the following code immediately after the line

"<script type="text/javascript">"

in the

<body>

Section of the file (rename the url to be your server url as needed):

/*****************************************************

Begin Custom code added to Dashboards generated code

*****************************************************/

var mySession = '';

$(window).load(function() {

$.ajax({

type: "POST",

url: "http://[host:port]/dswsbobje/services/Session",

data: "{\"loginWithToken\":{\"@xmlns\":{\"$\":\"http://session.dsws.businessobjects.com/2007/06/01\"},\"loginToken\":{\"$\":\"<%= session.getAttribute("BOTOKEN")%>\"},\"locale\":{\"$\":\"\"},\"timeZone\":{\"$\":\"\"}}}",

contentType: "application/json; charset=utf-8",

dataType: "json",

beforeSend: function (xhr) {

xhr.setRequestHeader('SOAPAction', 'http://session.dsws.businessobjects.com/2007/06/01/loginWithToken');

},

success: function(msg) {

mySession = msg['ns:loginWithTokenResponse']['ns:SessionInfo']['@SerializedSession'];

},

error: function (errormessage) {

$('#msgid').html("oops got an error in first service call!");

alert('error');

}

, async: false

});

/***************************************************

End Custom code added to Dashboards generated code

****************************************************/

Save and close the dashboard.jsp file

Step 4:

Locate the file file_1.js and open it in a text editor. Copy the file contents and paste it in the site http://jsbeautifier.org/click the beatify button and paste the formatted text back into the file_1.js file.  Find the line

“this._ceSerializedSession = this._connectionAPI.getInitParameter(l.PARAM_CE_SERIALIZED_SESSION);”

and comment it out by typing two backslashes in front of it like so:

// this._ceSerializedSession = this._connectionAPI.getInitParameter(l.PARAM_CE_SERIALIZED_SESSION);

Then paste the following line under the commented out line:

this._ceSerializedSession = mySession;

Save the file and close it

Step 5:

Locate the file file_2.js (next to file_1.js), open it with a text editor, and format it as described in step 6 using the http://jsbeautifier.org/ web site. Find the following block of code:

} else {

u.soapAction = p.RUN_QUERY;

u.request = this._generateRunQuery();

u.response.responseRoot("x:runQueryResult")

comment out the three lines like so

} else {

//            u.soapAction = p.RUN_QUERY;

//            u.request = this._generateRunQuery();

//            u.response.responseRoot("x:runQueryResult")

And paste the following three lines beneath the lines you just commented out:

u.soapAction = p.RUN_QUERY_SPEC;

u.request = this._generateRunQuerySpec();

u.response.responseRoot("x:runQueryDesignTimeResult")

 

That’s it! Take your connected dashboard for a spin at http://yourserver:yourport/yourwebapp/yoursubdir(dash2inthisexample)/dashboard.jsp

This entry was posted in BusinessObjects 4.0, HTML5, SAP Mobile BI, Xcelsius and tagged . Bookmark the permalink.

32 Responses to CONNECTED SAP Dashboard as HTML5 – Step-By-Step Info

  1. Swapnil says:

    Hey Thanks A Lot!!!
    But Will it be Legal using SAP Dashboard with this way??

    • Ron Keler says:

      Hi Swapnil,
      Legal? Absolutely! Supported? Probably not… This is basically a “hack”. If you are comfortable with the technology and understand how this works and how to overcome problems using this approach, I would absolutely recommend it. However, if you are only looking to use features provided out of the box that are officially supported by the vendor, then this is not a good solution for you…

  2. Vips says:

    hey Ron,

    Thank you so much for this article its so much helpful.

    in the very last step where we are suppose to find below code in file_2. but i dont see any code like this in my file.

    } else {

    u.soapAction = p.RUN_QUERY;

    u.request = this._generateRunQuery();

    u.response.responseRoot(“x:runQueryResult”)

    can you please tell me what yo do ?

    Thank you so much again in advance

    • Ron Keler says:

      Hi, did you setup a connection in the dashboard? also, did you format the file text using the jsbeaufify web site? it’s very hard to read otherwise…

      • Vips says:

        what do you mean setting up connection in the dashboard.

        i previewed the dashboard for mobile. got the files from temp folder.

        renamed .html to .jsp and made changes in file_1 after beautifying the code. that went well.

        in the file_2 after beatifying the code i dont see the code which we are suppose to comment out.

        and yes as of now i am just trying so i havent setup the authentication part.

        • Ron Keler says:

          This code gets generated when you use the Query manager in dashboards to connect to a Universe and source data for your dashboard. That is the premise of this example. Thanks.

          • Vips says:

            Hi Ron,

            Thanks for reply again.

            i am using excel as my source data. i am not using bex query or universe.

            is it still possible to publish the dashboard as html 5 ?

          • Ron Keler says:

            If you are not using a universe connection, you do not need to make the changes described in this post to the html5 you harvest from the temp directory.

  3. Swapnil says:

    Thanks A Lot!!!

    • Vips says:

      hey Ron,

      Thank you so much for you help.

      i have put all the files under this folder
      C:\Program Files (x86)\SAP BusinessObjects\Tomcat6\webapps\Dash\dashboard.html

      as you said earlier i havent made any changes to any file as excel is my source file of the dashboard.

      and now i am trying to access that file
      http://boxi4.dev.acclim.local:8080/BOE/BI/Dash/dashboard.html

      but its is coming up with an error “404 missing page”

      Can you please help me with that ?

      Thank you in advance

      • Vips says:

        Hey Ron,

        Solved that problem. had to put everything in the other folder and now it works fine.

        sizing is the problem when it comes to tablets devices so will have to do something about it.

        Thank you so much wouldn’t have been possible without you

  4. Chikara says:

    Hi,
    I will be glad if you could help me for below situation;
    1. I created html5 files under temp directory.
    2. I copied them on my desktop and put it on Intranet with exact names. (With all other subdirectories)
    3. I opened the dashboard.html file on ipad from Intranet.

    What I see is just a blank page.

    What can be the problem and how can I solve it ?
    Thanks a lot !

    • Ron Keler says:

      Try to open it first using a browser with good debugging toolset (like Chrome, Firefox with Firebug or IE9) to see if you get any errors/warnings. You will probably be able to see the errors on the desktop browser better then with the iOS Safari and once you know what kind of errors are causing the page not to render, you will be able to address.

  5. Karthick says:

    i have prompt in the dashboard, so it queries when loading. I get the error “No network connection. The dashboard cannot retrieve data.”.

    when the above changes are made to the dashboard.jsp i get “error” JS alert two times before getting the same “No network connection…” alert error.

    • Ron Keler says:

      Hi Karthick, use your browser or other network sniffer to find the error root cause. The “No network connection” error is sometime indicative of a domain of origin issue…

      • Karthick says:

        I tried to debug using fiddler/firebug, but not able to get the success response.

        I have sdk code to generate serialized session, so how should i declare the msg[][][] variable. Or a way to set the serSes in mySession

      • Karthick says:

        Even if the serSes is set and the server connection again will be needed for querying, Right?

        the BO tomcat is working with ssl https://. Can this be due to cross-domain mismatch.

  6. Ri says:

    Dear Ron Keler,

    Thanks for sharing a valuable info.
    Friend, kindly help me to achieve it in BSP.

    I want to put that dashboard.html file in a BSP application, there I can write the javascript logics and all, but how to get the BO token in that html page without changing into jsp.

  7. Pat Quirk says:

    Hi Ron –

    We have a situation where we want to publish an application to html5 and let the entire world view it on their ipad (via safari) without any authentication. We keep getting stuck on the html5 looking for authentication from BO server. How do we comment that out? We are using a public WSDL data connection. Thanks in advance for any thoughts!

    Pat

    • Ron Keler says:

      Not sure exactly what you mean Pat.. This post is about how to get the html5 temp files generated from SAP dashboards working with data connections. The only data connections supported in the version used for this post (4.0 SP5) was the query browser used within the dashboard product. If you are using a different connectivity method, you will need to dig deeper into the code to see how you could replace the built in connection hooks with what you like to use (at which point, i am not sure you will not be better off building from scratch).. If you can provide more details, i can provide more info.. Feel free to email as well. Thanks – Ron

  8. Krishna says:

    Hi Vips/Ron,

    I did follow all the steps mentioned above.

    1) copied dashboard.html and all the files ( 4 files total) from temp folder to the tomcat folder C:\Program Files (x86)\SAP BusinessObjects\tomcat\webapps\Dashboard\Dash1

    and got stuck here

    when i try to run the url http://server/BOE/BI/Dashboard/dash1/dashboard.html
    it gives an 404 missing page. I haven’t modified anything since the source of the dashboard is an excel file.

    Can you please let me know how to make the url work so that i can show it to my business on their Ipads browsers with out the use of Mobile App.

    Thanks in advance for your help

    Thanks,
    Krishna

  9. Krishna says:

    Hi Vips,

    Where did you keep the files…. from you comment above

    “Solved that problem. had to put everything in the other folder and now it works fine.” ( this text is copied from your post on June 27 2013)

    Can you please explain me what do you mean by Other folder and what is the url

  10. Alvis says:

    Hi,
    I could not find the “this._ceSerializedSession = this._connectionAPI.getInitParameter(l.PARAM_CE_SERIALIZED_SESSION);” in step 4.
    Would you mind tell me where is it?
    Thanks

    • Ron Keler says:

      Alvis, it’s very possible that different versions of dashboards/xcelsius produce different html/js and that the version you are using is different then the one used to document this method. This post is over a year old, i believe SAP released several updated to dashboards since..

  11. Alvis says:

    Hi Ron,

    I would like to ask you a few questions about the CONNECTED HTML5 dashboard.

    1.Could you provide the code of inc.jsp which gets the token for login
    2.I want to put that dashboard.html file in a webapp application,
    how could this HTML file communicate with the REST services in BI 4 to get the token in order to logon to the BO server to retrieve the data on the mobile device.
    3.What’s the webapp details? What SDKs jar are required?
    4.Would you mind sending me the sample including the webapp. Therefore I could try it on my tomcat.

    Thanks
    Alvis

    • Ron Keler says:

      Hi Alvis, thanks for your comment. This post is an illustration, example, of a possible implementation, IT IS NOT a published project that can be used as is, rather it provides guidelines and possibilities for BI Happiness. YOu will have to do the work to adjust it to your specific situation, based on the requirements, environment and software versions that are relevant to you.
      1. You can lookup endless number of examples for obtaining token using BO SDKs. In this blog alone, you can search to token and retrieve 8 different posts with example code for token retrieval..
      2. Checkout my post about restful proxy http://bihappyblog.com/2012/11/05/businessobjects-4-0-restful-web-service-proxy/ since BO RESTFUL services are running on a different server then the web server (Tomcat), you need to work around the cross-origin-requests issue…
      3. Again, you can search this blog and others, as well as refer to the relevant SDK documentation for a list of required jars in your application

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>