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
