Skip to Content

Design Studio 1.3 SDK - Are script contributions for SAPUI5 method functions supported?

All of the SAPUI5 SDK component examples provided with the Design Studio Samples demonstrate how to expose property getter/setter functions as script contributions.  Indeed, the SDK Developer Guide also just focuses on this.  However, UI5 controls may also include method functions that allow certain actions to be performed on the control.  In this context, I have the following questions:

1)  Is it possible to expose method functions via script contributions in the contribution.ztl file?  If yes, what is the correct syntax for doing so?  Based on my experimentation so far, it seems like method functions cannot be exposed directly via script contributions;

2)  If method functions are not supported for script contributions, are there any recommended approaches as a workaround?  One possible approach that comes to mind is as follows:

i)  Define an invisible "dummy" property of type boolean to correspond with each method function that we want to expose as a script contribution;

ii)  Define invisible properties to correspond to the parameters required by the method functions;

iii) In the contributon.ztl code, perform the following tasks:

(a) Set the invisible parameter property values that correspond to the desired method function;

(b) Invoke the dummy property getter or setter function by getting or setting the boolean value of the dummy property in the contribution.ztl code;

iii).  Override the corresponding dummy property getter or setter function in the component.js code with additional logic to read the invisible parameter property values and then call the method function.

Any feedback would be appreciated.



Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    Jul 21, 2014 at 06:36 PM

    Unless there's a much more official graceful way, here's one approach:

    One dummy property in the contribution.xml:

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

    Two example .ztl "methods":

      * Execute some method 
      void someMethod( String someParameter){*
      this.execute = "someMethod|" + someParameter + "~" + Math.random();
      * Execute another method 
      void anotherMethod( String someParameter){*
      this.execute = "anotherMethod|" + someParameter + "~" + Math.random();

    And finally, the component.js that makes it work (2 regular example functions for the above 2 in the .ztl, followed by my bizarre 'setExecute' function that makes it all work.

    someMethod : function(value){
      alert("I am 'someMethod'.  You passed me value: " + value);
      anotherMethod : function(value){
      alert("I am 'anotherMethod'.  You passed me value: " + value);
      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];
      if(this[methodName]) {
      alert("You passed me a bad method (" + methodName + ")");
      getExecute : function(){
      return String(Math.random());

    Now, aside from this being a hack, you may notice Math.random() -- This is to defeat the state saving that happens in the server-side JavaScript command engine, so you can ensure you can invoke the same method and parameter over and over.

    Would love to see a better approach!

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jul 30, 2015 at 04:21 PM

    As for me, i use something like this to keep parameters valid and call events on client side.

    1) Create property in contribution.xml

    <property type="String" title="actions" id="actions" visible="false">

    2) Create method u call in contribution.ztl

    void performAction(/* Action */ String action_name,/* Parameter */ String parameter)/*or JSON parameter*/
         var obj;
         if (this.actions.length==0)
              obj = JSON.parse(this.actions);

    3) Create corresponding part in component.js

    this.actions = function(value) {
         if (value === undefined) {
               return actions;
          else {
               return this;
    function parse_command(commands)
    /*parse JSON, perform actions*/
    this.afterUpdate = function(){
         /*I do not use +1/+random/+char because i had problems with this wich i don`t remember(maby fake events),so i fire PropertiesChanged*/
          var properties_to_update = new Array();// array for all parameters i wish to reset
          if (actions.length>0)
         /*add other properties i want to reset to array and then fire PropertiesChanged to reset it on the server side*/

    as simple as  possible)

    Add comment
    10|10000 characters needed characters exceeded