Skip to Content
Author's profile photo Vivek Singh Bhoj

Calling XSJS Service using SAP UI5

Hi Everyone,

In the blog SAP HANA Extended Application Services( by Thomas Jung, he showed us lots of things about XS development and one of them was how to create and extend Server Side JavaScript and it was explained beautifully in the video :

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

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:


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


5. We found that wizard created three objects for us:




In index.html file we will enter the full path of Source as



6. After that enter the following code in XSUI.view.js file

sap.ui.jsview("xsui.XSUI", {
      getControllerName : function() {
         return "xsui.XSUI";
createContent : function(mController) {
                var mPanel = new sap.ui.commons.Panel().setText("XS Service Test - Multiplication");
                var mlayout = new sap.ui.commons.layout.MatrixLayout({width:"auto"});
                var V1 = new sap.ui.commons.TextField("val1",{tooltip: "Value #1", editable:true});
                var V2 = new sap.ui.commons.TextField("val2",{tooltip: "Value #2", editable:true});
                var mResult = new sap.ui.commons.TextView("result",{tooltip: "Results"});
                var mEqual = new sap.ui.commons.TextView("equal",{tooltip: "Equals", text: " = "});                
                var mMultiply = new sap.ui.commons.TextView("multiply",{tooltip: "Multiply by", text: " * "});
                    V1.attachEvent("liveChange", function(mEvent){
                            mController.onLiveChangeV1(mEvent,V2); });  
                      V2.attachEvent("liveChange", function(mEvent){
                            mController.onLiveChangeV2(mEvent,V1); });
            mlayout.createRow(V1, mMultiply, V2, mEqual, mResult );
                   return mPanel;

7. After that enter the following code in XSUI.controller.js file :

sap.ui.controller("xsui.XSUI", {
onLiveChangeV1: function(mEvent,V2){
                    var aUrl = '../../../Services/Func.xsjs?cmd=multiply'+'&n1='+escape(mEvent.getParameters().liveValue)+'&n2='+escape(v2.getValue());
                              url: aUrl,
                              method: 'GET',
                              dataType: 'json',
                              success: this.onCompleteMultiply,
                              error: this.onErrorCall });
onLiveChangeV2: function(mEvent,V1){
                    var aUrl = '../../../services/Func.xsjs?cmd=multiply'+'&n1='+escape(V1.getValue())+'&n2='+escape(mEvent.getParameters().liveValue);
                              url: aUrl,
                              method: 'GET',
                              dataType: 'json',
                              success: this.onCompleteMultiply,
                              error: this.onErrorCall });
onCompleteMultiply: function(mt){
                    var mResult = sap.ui.getCore().byId("result");
                     if(mt==undefined){ mResult.setText(0); }
                       var oNumberFormat = sap.ui.core.format.NumberFormat.getIntegerInstance({
                          maxFractionDigits: 10,
                          minFractionDigits: 0,
                          groupingEnabled: true });
                       mResult.setText(oNumberFormat.format(mt)); }
 onErrorCall: function(jqXHR, textStatus, errorThrown){ 
                                         "Error in calling Service" ); 

8. Now we will save all the files and share the project


9. Now Select SAP HANA Repository:


10. Inside the repository select the folder where you would like to share it : I selected UI5 folder here


11. Now we will commit and activate our UI5 project :


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.


14. Now enter the following code in Func.xsjs file :

function Multiply(){
          var body = '';
          var n1 = $.request.parameters.get('n1');
          var n2 = $.request.parameters.get('n2');
          var ans;
          ans = n1 * n2;
          body = ans.toString();
          $.response.status = $.net.http.OK;
var a = $.request.parameters.get('cmd');
switch (a) {
case "multiply":
          $.response.status = $.net.http.INTERNAL_SERVER_ERROR;
          $.response.setBody('Invalid Command: '+a);

15. In the browser enter address :  http://ipaddress:8000/path/index.html


As in the aboveexample we have used JavaScript, JSON, Ajax and JQuery, so i would also like to tell you some basics about them

First i will start with JavaScript

JavaScript is a Object based Scripting language. It is not a Object Oriented language.

• Client-side JavaScript allows an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.

• Server-side JavaScript allows an application to communicate with a relational database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.


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 :

int a; // so 'a' cannot hold anything other than integer

But in case of JavaScript, we only define:

var a; // here 'a' can be a string an integer or anything else
a = hello; // 'a' becomes string
a = '10'; // here 'a' becomes an 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 or

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 :


Now moving on to JQuery :

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.

To learn more about JQuery, visit or

Now about JSON :

Well JSON stands for JavaScript Object Notation.

It is a light weight data interchange format and it is preferred over XML because:

In XML, Parsing is difficult and XML doesn’t support rich data type( everything is written in the form of string )

Other benefits of JSON are that :

Data is typeless and values can be assigned dynamically.

Its Syntax is written in key and value pair

For Example => User(Key) : Name(Value)

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 :

Finally AJAX :

AJAX stands for Ashynchronous JavaScript and XML

It is one of the Web 2.0 standards and is used by web applications to send data to and retrieve  data from a server asynchrously without interfering in the display and beahaviour of the existing page.

It runs completely independent of the browser and no plugins are required.

Google Suggest was the very first example of using AJAX.

In most of the payment sites we generally see ” Please Wait! Your Order is being processed” – this is done through the help of AJAX only.

One of the sites from where we can download those moving GIFs for our web design is :

For learning AJAX visit :

Thank You for reading the Blog.

As this is my very first Blog so i would like to get feedback

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Benedict Venmani Felix
      Benedict Venmani Felix

      Seriously, is this your first blog?

      The blog was exceptional and I think anybody who reads this blog would want to go out and try it out. 🙂

      Good luck and we expect more!!!

      You have raised the bar with your very first blog so keep the future ones as simple and interesting as this one.


      Author's profile photo Vivek Singh Bhoj
      Vivek Singh Bhoj
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member


      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!

      Will post a link in the course forum to your Blog post.


      Author's profile photo Vivek Singh Bhoj
      Vivek Singh Bhoj
      Blog Post Author

      Hi David,

      I am well aware of OpenSAP course and i have also been following it closely.

      Author's profile photo Former Member
      Former Member

      So closely that you make a copy of it...


      Author's profile photo Vivek Singh Bhoj
      Vivek Singh Bhoj
      Blog Post Author

      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.

      Author's profile photo Former Member
      Former Member

      Ok. Then it was my mistake and so I apologize.

      Author's profile photo Raj Kumar Salla
      Raj Kumar Salla

      Hi Vivek,

      Really a nice blog from you. Keep up the good work.

      I never tried this as I am not good at JAVA related stuff.



      Author's profile photo Vivek Singh Bhoj
      Vivek Singh Bhoj
      Blog Post Author

      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....

      Author's profile photo Kamal Mehta
      Kamal Mehta

      Nice one Vivek !!!!!!!!!

      Keep it up .

      Could have been better if you could provide some explanation on the code as well.



      Author's profile photo Vivek Singh Bhoj
      Vivek Singh Bhoj
      Blog Post Author

      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.



      Author's profile photo Kamal Mehta
      Kamal Mehta

      Thanks Vivek.

      This would help learn the basics about the code as well.



      Author's profile photo Christoph Pohl
      Christoph Pohl

      Nice write-up!

      Author's profile photo CH Raman
      CH Raman

      Good command on code. Good content. Thanks for your efforts.

      Author's profile photo Vivek Singh Bhoj
      Vivek Singh Bhoj
      Blog Post Author

      Thanks a lot Raman

      Author's profile photo Former Member
      Former Member

      Why are you getting the value of request parameters 'num1' & 'num2' , when you're passing the value through parameters 'n1' & 'n2' ?

      Author's profile photo Vivek Singh Bhoj
      Vivek Singh Bhoj
      Blog Post Author

      Hi Sakthivel,

      It should be 'n1' and 'n2' only - thanks for pointing out

      I was making some changes in my blogs and this is what happens when you don't pay attention on what you are editing



      Author's profile photo Former Member
      Former Member

      Hi Vivek,

      I was trying out this example, however I am getting blank screen. Please find my code below

      function performMultiply()



        var body = '';

        var num1 = $.request.getParameter('num1');

        var num2 = $.request.getParameter('num2');

        var answer;

        answer = num1 * num2;

        body = answer.toString();





        msg += e.toString();



      var aCmd = aCmd = '';




        case "multiply": performMultiply();break;



        //$.response.addBody("Invalid Cmd:" + aCmd);


      I am not sure what am I missing? Can you please provide any solution?

      Author's profile photo Former Member
      Former Member


      I did all this , then later I made some changes on html page via Notepad. Then saved it and when I try to run on browser through IP it shows old page and when I try running in HANA studio via web browser it was not able to connect to xsjs file. I have committed it but still same . I think I am missing some basic steps, but dont know what. So please help. Thanks

      Author's profile photo Former Member
      Former Member

      Hi Vivek,

      I am getting the result in xsjs. But I dont want to print the data in body instead I need to return this result set to my SAP view file. How can I return the data


      Suja Arjunan

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai

      XSJS services return data in form of string only. You may stringify(serialize formally) JSON objects from XSJS(using JSON.stringify()) and set as the body . In the UI5 , read the data using ajax call or jsonmodel call and parse the string as JSON object(JSON.parse()).

      Author's profile photo Former Member
      Former Member

      Hi Vivek,

      I have created the view.js and controller.js and xsjs. when i run the index.html the two textviews are showing and i can able to enter the values. But the results are not showing? can you please help me out with this?

      Author's profile photo Thomas Jung
      Thomas Jung

      This is a duplicate question/posting to this: How to use XSJS file path in Controller.js file

      Please do not double post your questions. This just fragments the discussion and could cause people to work to answer a question which may have been already answered elsewhere.

      Author's profile photo Former Member
      Former Member


      To test this service, I am passing two parameters in the URL.

      The URL looks like:"10"&num2="30"

      But, this links doesn't work. It's giving an HTTP Error 500.

      Help me where am I going wrong.



      Author's profile photo Former Member
      Former Member


      when i test the service,

      http error 404.

      Problem accessing /SAPUI5_Videos/VideoSeries1/logic/demo_main.xsjs.

      Reason: Not Found

      please help me with this issue.


      thanking you.


      Author's profile photo Caio Silva
      Caio Silva

      Hello, i am having the same problem:


      http error 404.

      Problem accessing .xsjs.

      Reason: Not Found


      Did you can solve the problem? How did you do?