Design Studio 1.4 SDK - What is the correct approach for binding events to script methods for UI5-based components?

[MustafaBensan]

Design Studio 1.4 has introduced the concept of binding events to script methods, which allows an SDK component to access the BIAL API.  This is documented towards the end of the article What's Coming in Design Studio 1.4 SDK. In an attempt to apply this new feature to an SDK component based on a UI5 control I'm not getting the desired result so would appreciate any suggestions to resolve the issue.

As a way to test the approach, I have simply modified the UI5 Application Header component provided with the SDK Samples so that the logo title of the component is automatically set to the Design Studio application name as determined by a call to the APPLICATION.getInfo().name API method.  However, for some reason, the logo title isn't populated as shown below:

The intended result is that the application name obtained from APPLICATION.getInfo().name should appear next to the SAP logo.

I have added two properties to the contribution.xml file, as shown below:

<property
  id="onSetAppName"
  title="Set Application Name"
  type="ScriptText"
    visible="false"/>
  <property
  id="appName"
  title="Application Name"
  type="String"
    visible="false"/>

<initialization>
  <defaultValue property="LEFT_MARGIN">0</defaultValue>
  <defaultValue property="RIGHT_MARGIN">0</defaultValue>
  <defaultValue property="WIDTH">auto</defaultValue>
  <defaultValue property="HEIGHT">38</defaultValue>
  <defaultValue property="displayWelcome">true</defaultValue>
  <defaultValue property="onSetAppName">this.setAppInfoName();</defaultValue>
<initialization>

The onSetAppName event is for invoking the script method this.setAppInfoName() as defined in the default value.  The property appName is intended to store the application name to be populated in the Application Header.

I have defined a script method in the contribution.ztl file as follows:

/* Sets the value of the invisible property appName to the application name */
  @Visibility(private)
  void setAppInfoName() {*
    this.appName = APPLICATION.getInfo().name;
  *}

Then I have updated the component.js file as follows:

sap.ui.commons.ApplicationHeader.extend("com.sap.sample.ui5.ApplicationHeader", {

  metadata : {
     properties : {
      "appName" : { type : "string", defaultValue : "App Name" }
    }
  },

  getAppName : function() {
  return this.getProperty("appName");
  },

  setAppName : function(v) {
  this.setProperty("appName", v);
  return this;
  },

  initDesignStudio: function() {

  // Raise the onSetAppName event to execute the script for getting the application name
  this.fireDesignStudioEvent("onSetAppName");

  // Set the logo text to the appName property filled by the onSetAppName event script
  this.setLogoText(this.getAppName());

  this.attachLogoff(function() {
  this.fireDesignStudioEvent("onLogoff");
  });
  },
  renderer: {}
});

In the initDesignStudio function I raise the event onSetAppName which should invoke the setAppInfoName() method in the contribution.ztl file, in turn setting the appName property to the application name.  The LogoText property of the Application Header is then set to the value of the AppName property.

So, it all seems to look good in theory but in practice the LogoText of the Application Header component isn't updated with the application name.  I'd appreciate any ideas about what I may have missed.

Thanks,

Mustafa.

[Karol-K · Accepted solution]

Hi Mustafa,

you have been almost at the target .

check the examples, I could get it to run:

Karol

[MustafaBensan · Accepted solution]

Hi Karol,

Glad to know I was on the right track .  Thank you so much for your quick feedback with a formal blog post on the subject.  This will be very helpful for SDK developers.

Regards,

Mustafa.