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

Question

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.
Thanks,
Mustafa.

Answer 1

Hi Mike,
Thanks very much for your suggestion.  Your mind-bogglingly creative solutions never cease to amaze me .
Reviewing the code, yes I did wonder about the use of the Math.random() function.  Then when I subsequently read your explanation about the state saving, the penny dropped as to the issue I was experiencing with the approach I had previously tried (as described in point form in my question), whereby I could not invoke the setter function multiple times from the BIAL script.  So I added a call to the fireDesignStudioPropertiesChanged() function, which has partially solved my issue but the parameter properties are out of sync.
I'll describe what I've implemented and hopefully you can shed some more light on how to resolve the issue:
In the contribution.xml file I've defined invisible properties for the method function and it's parameters as follows:
<component id="ActionLabel"
       title="Action Label"
       icon="res/com.infovizi.prototypes.actionlabel/icon.png"
       handlerType="sapui5">
      <jsInclude>res/com.infovizi.prototypes.actionlabel/js/component.js</jsInclude>
       <cssInclude>res/com.infovizi.prototypes.actionlabel/css/component.css</cssInclude>
       <property id="text" type="String" title="Text" visible="true" />
       <property id="showAlert" type="boolean" title="Show Alert" visible="false" />
       <property id="alertText1" type="String" title="Alert Text 1" visible="false" />
       <property id="alertText2" type="String" title="Alert Text 2" visible="false" />
       <initialization>
            <defaultValue property="SHOWALERT">false</defaultValue>
            <defaultValue property="TEXT">"Hello"</defaultValue>
       </initialization>
  </component>
In the contribution.ztl file I've defined a script method to invoke a method function for displaying an alert as follows:
class com.infovizi.prototypes.ActionLabel extends Component {
  /* Displays an alertbox */
  void showAlertBox(/* Text 1 */ String alertMsg1, /* Text 2 */ String alertMsg2) {*
  this.alertText1 = alertMsg1;
  this.alertText2 = alertMsg2;
  this.showAlert = true;
In the component.js file, to keep things simple I've chosen the UI5 Label control to extend with a custom method function that I want to invoke via the script contribution as follows:
sap.ui.commons.Label.extend("com.infovizi.prototypes.ActionLabel",{
  metadata : {
     properties : {
      "showAlert" : "boolean",
        "alertText1" : "string",
        "alertText2" : "string"
  initDesignStudio: function(){
  renderer:{},
  // Override ShowAlert setter to perform action
  setShowAlert: function(alertState){
  if(alertState == true) {
  this.displayAlert(this.getAlertText1(),this.getAlertText2());
  // Reset showAlert property value to "false" and call fireDesignStudioPropertiesChanged()
  // to allow setShowAlert function to be invoked multiple times via BIAL script
  this.showAlert = false;
  this.fireDesignStudioPropertiesChanged(["showAlert"]);
  return this;
// Alert method
  displayAlert: function(alertMsg1, alertMsg2){
  alert("Message: " + alertMsg1 + " " + alertMsg2);
I then created a DS app with the following script in the click event of a button to invoke the method function in the custom Label control:
ACTIONLABEL_1.showAlertBox("Hello", "World!");
After launching the application and clicking the button for the first time, the alert display function is displayed as expected but the parameters have not been updated, even though they are updated in the script contribution function, so the parameters are not displayed, as follows:
After the alert is dismissed and the DS button is clicked again, this time the parameters are passed correctly as follows:
So the parameter updates for alertText1 and alertText2 seem to be out of sync for some reason.  I'm sure I'm missing a nuance here.  Any ideas?
Conceptually, I'm just trying to achieve what Leandro Cardoso has done with the script contribution action function calls in his Notify component.  The only difference is that I'm implementing HandlerType "sapui5" instead of "div".
Any thoughts about the parameter syncing issue would be appreciated.