Skip to Content

Return Web service data with a property

Hi experts,

I am calling a web service and trying to return the result within a property. Unfortunantely the property is alway "" (empty) and I dont know why...

Here is the code, enriched with michaels hack

Component.js:

sap.designstudio.sdk.Component.subclass("com.sap.a.webservicecomp.WebService", function() {

  var that = this;

  var _websrvurl;

  var _user = "user";

  var _pw = "pw";

  var _execute;

  var _allnews = [];

  var _news = "";

  var _url;

  this.init = function() {

  };

  this.beforeUpdate = function () {

  };

  // Implement this function to execute JavaScript code after all properties of the custom extension component have been updated.

  this.afterUpdate = function() {

  // Verbindet WebService URL mit Paramtern

  _url = _websrvurl + _param;

  // Test

  if(_news == "" && _execute != "" ) {

  this.news(x.setExecute(_execute)); // work!

  alert("Test:" + this.news()); // work too!

  //that.firePropertiesChanged(["news"]); // has no effect

  }

};

   // Hack to call inside methods from Component

  var x = {

  someMethod : function(value) {

  alert("I am 'someMethod'.  You passed me value: " + value);

  // Call web service

  $.ajax({

  async: false,

  crossDomain: true,

  url: _url,

  headers: {

  'Authorization': "Basic " + btoa(_user + ":" + _pw)

  }

  }).done(function(dataArray) {

  _allnews = dataArray;

  });

  // Return one specific news

  return _.find(_allnews, function(y) {

         return y.identifier == value;

     }).news;

  },

  setExecute : function(s){

  var cmd;

  if(s) cmd = s.split("~");

  if(cmd!==undefined && cmd.length > 1){

  var methodNameParam = cmd[0].split("|");

  var methodName = methodNameParam[0];

  var methodParam;

  if(methodNameParam.length>1) methodParam = methodNameParam[1];  // noch ermöglichen das mehrere Parameter übergeben werden können

  if(this[methodName]) {

  return this[methodName](methodParam);

  } else {

  alert("You passed me a bad method (" + methodName + ")");

  }

  }

  },

  getExecute : function() {

  return String(Math.random());

  }

  };

  // Getter/Setter

  this.websrvurl = function(value) {

  if (value === undefined) {

  return _websrvurl;

  } else {

  _websrvurl = value;

  return this;

  }

  };

   this.execute = function(value) {

  if (value === undefined) {

  return _execute;

  } else {

  _execute = value;

  return this;

  }

  };

  this.news = function(value) {

  if (value === undefined) {

  return "Fixwert";

  } else {

  _news = value;

  return this;

  }

  };

});

Component.ztl

class com.sap.a.webservicecomp.WebService extends Component {

   /* Returns a specific News by Identifier */

  String getNews(String someId) {*

  this.execute = "someMethod|" + someId + "~" + Math.random();

  return this.news;  // return always "" (empty)

  *}

}

Contribution.xml

<?xml version="1.0" encoding="UTF-8"?>

<sdkExtension

  xmlns="http://www.sap.com/bi/zen/sdk"

  id="com.sap.a.webservicecomp"

  title="Design Studio SDK Extension WebService"

  version="14.0"

  vendor="xxx">

  <component

  id="WebService"

  title="Webservice Data Source"

  tooltip="Call SAP Webservice RESTful"

  icon="res/icon.png"

  handlerType="div"

  propertySheetPath="res/additional_properties_sheet/additional_properties_sheet.html">

  <jsInclude>res/js/underscore-min.js</jsInclude>

  <jsInclude>res/js/component.js</jsInclude>

  <property

  id="websrvurl"

  title="URL"

  type="Url"

  group="Webservice"/>

  <property id="news" title="Neues" type="String" group="Webservice" visible="true"/>

  <property type="String" title="Execute" id="execute" visible="false"/>

  </component>

</sdkExtension>

Now it is the problem, that the red marked code in the contribution.ztl doest return the result value from the web service.

Actually I am out of ideas to solve that issue. If I change the ztl from return this.news to return "test" it will run correctly and the string returned.

The fixed return value "Fixwert" is also never returned by the method "getNews("id")"...

I have following questions:

Q: How can i push this.news() value to the ZTL?

Q: It is possible to debug the contribution.ztl? I find nothing to do it?

I hope for your help 😊

Thanks in advance,

jens

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Jan 13, 2015 at 05:41 PM

    To test the component i am using a "button" and a "textfield" in my design studio.

    The onClick event implements the following snippet:

    TEXT_1.setText(WEBSERVICE_1.getNews("id3"));

    I have to push this "button" twice to get the news into the "textfield".

    Hopefully anyone have an idea....

    ps: i am using DS 1.4

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member Jens Weghorst

      Hi Jens,

      I am currently writing my masterthesis and have the same challenge: To call a Webservice and return data via Design Studio SDK Component.

      Can you give me a hint how the solution looked like?

      Thanks a lot

      Frederic

  • Jan 13, 2015 at 10:10 AM

    I have been making some proceedings, but its not the solution!

    I changed this code in the Component.js

    if(_news == "" && _execute != "" ) {

      this.news(x.setExecute(_execute)); // work!

      alert("Test:" + this.news()); // work too!

      //that.firePropertiesChanged(["news"]); // has no effect

      }

    to

    if(_execute != "" ) {

      this.news(x.setExecute(_execute)); // work!

      alert("Test:" + this.news()); // work too!

      that.firePropertiesChanged(["news"]); // works, but another roundtrip is needed!!

      }

    Could someone help me to avoid these roundtrip? Or show me how to implement a "manual" roundtrip as workaround?

    Add comment
    10|10000 characters needed characters exceeded