Professional Documents
Culture Documents
Calling Xsjs Service Using Sap Ui5 SCN PDF
Calling Xsjs Service Using Sap Ui5 SCN PDF
Hi Everyone,
At the end in the above video, Thomas told us about Calling the XSJS Service From the User Interface :
Here i would like to tell how to create the UI files and then call xsjs service step by step postpost
1. We will go to Project Explorer tab in SAP HANA Development perspective and then R-Click and select Other:
2. Select SAP UI5 Application Development and then select Application Project:
http://scn.sap.com/community/developer-center/hana/blog/2013/06/20/calling-xsjs-service-using-sap-ui5 1/11
2/10/2014 Calling XSJS Service using SAP UI5 | SCN
3. We will enter project name and select Desktop for rendering the ui on our desktop and also select create an initial
view so that wizard creates a view for us
4. Enter the name of the View that we need to create Select JavaScript rendering for our purpose
http://scn.sap.com/community/developer-center/hana/blog/2013/06/20/calling-xsjs-service-using-sap-ui5 2/11
2/10/2014 Calling XSJS Service using SAP UI5 | SCN
01. sap.ui.jsview("xsui.XSUI", {
02. getControllerName : function() {
03. return "xsui.XSUI";
04. },
05. createContent : function(mController) {
06. var mPanel = new sap.ui.commons.Panel().setText("XS Service Test - Multiplication");
07. mPanel.setAreaDesign(sap.ui.commons.enums.AreaDesign.Fill);
08. mPanel.setBorderDesign(sap.ui.commons.enums.BorderDesign.Box);
09. var mlayout = new sap.ui.commons.layout.MatrixLayout({width:"auto"});
10. mPanel.addContent(mlayout);
11. var V1 = new sap.ui.commons.TextField("val1",{tooltip: "Value #1", editable:true});
12. var V2 = new sap.ui.commons.TextField("val2",{tooltip: "Value #2", editable:true});
13. var mResult = new sap.ui.commons.TextView("result",{tooltip: "Results"});
14. var mEqual = new sap.ui.commons.TextView("equal",{tooltip: "Equals", text: " = "});
15. var mMultiply = new sap.ui.commons.TextView("multiply",{tooltip: "Multiply by", text: " * "});
16. V1.attachEvent("liveChange", function(mEvent){
17. mController.onLiveChangeV1(mEvent,V2); });
18. V2.attachEvent("liveChange", function(mEvent){
19. mController.onLiveChangeV2(mEvent,V1); });
http://scn.sap.com/community/developer-center/hana/blog/2013/06/20/calling-xsjs-service-using-sap-ui5 3/11
2/10/2014 Calling XSJS Service using SAP UI5 | SCN
20. mlayout.createRow(V1, mMultiply, V2, mEqual, mResult );
21. return mPanel;
22.
23. }
24. });
01. sap.ui.controller("xsui.XSUI", {
02. onLiveChangeV1: function(mEvent,V2){
03. var aUrl = '../../../Services/Func.xsjs?cmd=multiply'+'&n1='+escape(mEvent.getParameters().liveValue)+
04. jQuery.ajax({
05. url: aUrl,
06. method: 'GET',
07. dataType: 'json',
08. success: this.onCompleteMultiply,
09. error: this.onErrorCall });
10. },
11. onLiveChangeV2: function(mEvent,V1){
12. var aUrl = '../../../services/Func.xsjs?cmd=multiply'+'&n1='+escape(V1.getValue())+'&n2='+escape(mEvent.getParameters().liveValue);
13. jQuery.ajax({
14. url: aUrl,
15. method: 'GET',
16. dataType: 'json',
17. success: this.onCompleteMultiply,
18. error: this.onErrorCall });
19. },
20. onCompleteMultiply: function(mt){
21. var mResult = sap.ui.getCore().byId("result");
22. if(mt==undefined){ mResult.setText(0); }
23. else{
24. jQuery.sap.require("sap.ui.core.format.NumberFormat");
25. var oNumberFormat = sap.ui.core.format.NumberFormat.getIntegerInstance({
26. maxFractionDigits: 10,
27. minFractionDigits: 0,
28. groupingEnabled: true });
29. mResult.setText(oNumberFormat.format(mt)); }
30. },
31. onErrorCall: function(jqXHR, textStatus, errorThrown){
32. sap.ui.commons.MessageBox.show(jqXHR.responseText,
33. "ERROR",
34. "Error in calling Service" );
35. return;
36. }
37. });
8. Now we will save all the files and share the project
http://scn.sap.com/community/developer-center/hana/blog/2013/06/20/calling-xsjs-service-using-sap-ui5 4/11
2/10/2014 Calling XSJS Service using SAP UI5 | SCN
10. Inside the repository select the folder where you would like to share it : I selected UI5 folder here
http://scn.sap.com/community/developer-center/hana/blog/2013/06/20/calling-xsjs-service-using-sap-ui5 5/11
2/10/2014 Calling XSJS Service using SAP UI5 | SCN
12. As we share our XSUI project in UI5 folder in the repository, so now we can see that in our project explorer also :
13. Now in Services folder we will create Func.xsjs file that we have used in our Controller and View in XSUI project.
http://scn.sap.com/community/developer-center/hana/blog/2013/06/20/calling-xsjs-service-using-sap-ui5 6/11
2/10/2014 Calling XSJS Service using SAP UI5 | SCN
02. var body = '';
03. var n1 = $.request.parameters.get('n1');
04. var n2 = $.request.parameters.get('n2');
05. var ans;
06. ans = n1 * n2;
07. body = ans.toString();
08. $.response.setBody(body);
09. $.response.status = $.net.http.OK;
10. }
11. var a = $.request.parameters.get('cmd');
12. switch (a) {
13. case "multiply":
14. Multiply();
15. break;
16. default:
17. $.response.status = $.net.http.INTERNAL_SERVER_ERROR;
18. $.response.setBody('Invalid Command: '+a);
19. }
As in the aboveexample we have used JavaScript, JSON, Ajax and JQuery, so i would also like to tell you some basics
about them
Features:
JavaScript is very light language
JavaScript supports only supports data type but doesn't support variable type.
For Example:
In Java or C++, if we define a variable of integer type we will define it as :
01. int a; // so 'a' cannot hold anything other than integer
JavaScript doesn't have Keywords like Class, Private, Public but there are different ways through which we can make
an object Public or Private and we can even use Inheritance concept in JavaScript through the use of prototype and
inherit from.
To learn more about JavaScript, please visit http://www.w3schools.com/js/ or http://www.javascriptkit.com/
SAP HANA has JavaScript editor that includes the JSLint open-source library, which helps to validate JavaScript code.
For debugging purpose:
We can use SPA HANA debug perspective or any browser like Chrome and Mozilla Firefox.
Chrome has default JavaScript debugger and for Mozilla, we can download a plugin called Firebug.
There is also a free online tool called jsfiddle that can be used to create, debug and run your JavaScript code along
with HTML and CSS.
jsfiddle : http://jsfiddle.net/
http://scn.sap.com/community/developer-center/hana/blog/2013/06/20/calling-xsjs-service-using-sap-ui5 7/11
2/10/2014 Calling XSJS Service using SAP UI5 | SCN
JQuery is a JavaScript Library and it simplifies our JavaScript Coding as we don't need to write many lengthy codes.
In the OPenSAP course in Week 4 Unit 3 example a JQuery function fadeout() was used on Button.
We can use eval and JSON.parse functions to convert JSON String into JavaScript string.
JSON.parse is preferref over eval because of the following reason :
When we use eval to parse JSON data, eval is always active and it might be used to create malicious data that can be
harmful to our sources.
For learning JSON visit : http://www.w3schools.com/json/default.asp
Finally AJAX :
(14 ratings)
Tweet
http://scn.sap.com/community/developer-center/hana/blog/2013/06/20/calling-xsjs-service-using-sap-ui5 8/11
2/10/2014 Calling XSJS Service using SAP UI5 | SCN
17 Comments
Benedict
Like (1)
Vivek Singh Bhoj Jun 21, 2013 5:03 AM (in response to Benedict Vasanth)
Hi Benedict,
Thanks for such appreciating and kind words
This has given me alot of confidence.
I would try to write more blogs and will try my best to keep them informative and simple
Like (1)
Vivek,
I agree with Benedict and hope that you will proceed with similar efforts.
You are probably well aware of the on-going openSAP course "An Introduction to Software
Development on SAP HANA".
In case not, wanted to mention that the course features over 30 videos delivered by Thomas Jung.
Many would likely benefit from your approach.
Ample material!
David
Like (1)
Vivek Singh Bhoj Jul 1, 2013 5:55 PM (in response to David Watson)
Hi David,
I am well aware of OpenSAP course and i have also been following it closely.
Like (0)
Luis Soares Jul 17, 2013 4:39 PM (in response to Vivek Singh Bhoj)
Vivek Singh Bhoj Jul 17, 2013 4:48 PM (in response to Luis Soares)
Hi Luis,
In the first line, i have clearly mentioned that this is based on Thomas's
Video shown in Youtube that was out last year - if you check that video no
code was mentioned.
And i created this blog before the Week 5 Material was released.
Like (1)
Luis Soares Jul 18, 2013 9:55 AM (in response to Vivek Singh Bhoj)
Hi Vivek,
Regards
Raj
Like (1)
http://scn.sap.com/community/developer-center/hana/blog/2013/06/20/calling-xsjs-service-using-sap-ui5 9/11
2/10/2014 Calling XSJS Service using SAP UI5 | SCN
Vivek Singh Bhoj Jul 24, 2013 1:32 PM (in response to Raj Kumar Salla)
Thanks Raj!
JavaScript is different from Java and is much easier to learn.
Very less keywords are used here.
You should give it a try someday....
Like (0)
Keep it up .
Could have been better if you could provide some explanation on the code as well.
Thanks
Kamal
Like (1)
Vivek Singh Bhoj Aug 5, 2013 11:49 AM (in response to Kamal Mehta)
Hi Kamal,
I didn't explain code because it would have made blog even more lengthy, but as you said
i could have at least added comments in the code.
Next time onwards going to keep this in mind.
Regards,
Vivek
Like (0)
Kamal Mehta Aug 5, 2013 1:35 PM (in response to Vivek Singh Bhoj)
Thanks Vivek.
This would help learn the basics about the code as well.
Regards
Kamal
Like (0)
Nice write-up!
Like (1)
Vivek Singh Bhoj Oct 13, 2013 2:16 PM (in response to Ramanjaneyulu Korrapati)
Like (1)
Why are you getting the value of request parameters 'num1' & 'num2' , when you're passing the value
through parameters 'n1' & 'n2' ?
Like (0)
Vivek Singh Bhoj Feb 3, 2014 12:43 PM (in response to Sakthivel Elango)
Hi Sakthivel,
Regards,
Vivek
Like (1)
http://scn.sap.com/community/developer-center/hana/blog/2013/06/20/calling-xsjs-service-using-sap-ui5 10/11
2/10/2014 Calling XSJS Service using SAP UI5 | SCN
http://scn.sap.com/community/developer-center/hana/blog/2013/06/20/calling-xsjs-service-using-sap-ui5 11/11