Design Studio 1.2 SDK - SAPUI5 mobile library events not fired

[MustafaBensan]

In pursuit of enabling a mobile first design, I have been experimenting with integrating SAPUI5 mobile controls from the sap.m library with the Design Studio SDK.  In the process, I have come across an anomaly whereby event listeners for sap.m controls do not have any effect when the controls are rendered within the Design Studio SDK framework.

I'm hoping for suggestions to resolve this problem.

To demonstrate the point, below is a link to a standalone SAPUI5 demo that includes a standard button (sap.ui.commons.Button) and a mobile button (sap.m.Button).  Both buttons declare a press event handler to display an alert when the button is clicked:

http://demo.infovizi.com/mobiletest/

In the example, you will see that clicking both buttons achieves the desired result of launching an alert message box.  The code for this demo is attached in file StandandAloneSAPUI5code.txt.

When the same code is applied in a Design Studio SDK component, the event handler for the standard button (sap.ui.commons.Button) works as expected.  However, the event handler for the mobile button (sap.m.Button) has no effect whatsoever.  This issue seems to occur for any of the sap.m controls, whereas the sap.ui.commons controls don't have a problem.  The code applied in the SDK is attached in file SDK_component_code.txt.

I would very much appreciate it if anyone could provide feedback as to how this issue can be resolved.  It seems unusual that standard SAPUI5 control events work as expected but mobile control events have no effect.

Thanks,

Mustafa.

StandandAloneSAPUI5code.txt.zip

SDK_component_code.txt.zip

[reiner_hille-doering · Accepted solution]

Hi Mustafa,

as I mentioned, we don't encourage to use UI5 controls in our SDK using placeAt. The way how they are added by a wrapping Div-Control can have arbitrary effects. Maybe the non-working even is one of them.

Please wait until the direct UI5 control support is documented.

Best regards,

Reiner.

[MustafaBensan · Accepted solution]

Hi Reiner,

Thanks for the feedback.  To help me plan ahead and provide an idea of what to expect, I'd appreciate it if you could confirm if the direct UI5 control support will cover the following scenarios:

1)  Creation of composite controls that combine two or more UI5 controls

2)  Extension of existing UI5 controls

Regards,

Mustafa.

[reiner_hille-doering · Accepted solution]

Yes to both.

Here is a sample: In contribution.xml you declare the control  with type "sapui5".

<component

  id="ColorPicker"

  title="Color Picker"

  handlerType="sapui5"

  icon="res/colorpicker.png"

  group="sapui5">

  <jsInclude>res/js/components.js</jsInclude>

  <property

  id="colorString"

  title="Color"

  type="Color"

  tooltip="This is the import-parameter of the ColorPicker. As input-parameter, it can be a Hexadecimal string (#FFFFFF), a RGB-string rgb(255,255,255), a HSV-string hsv(360,100,100), or a CSS-colorname 'red'. As output-parameter it is a RGB-string containing the current color."></property>

  <property

  id="onColorChange"

  title="On Color Change"

  type="ScriptText"/>

  <initialization>

  <defaultValue property="WIDTH">270</defaultValue>

  <defaultValue property="HEIGHT">134</defaultValue>

  <defaultValue property="colorString">red</defaultValue>

  </initialization>

  </component>

In your handler JS you create a new custom control that has the qualified name <extensionLibId>.<ComponentId>. You can use any UI5 control as base class:

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

  initDesignStudio: function() {

  this.attachChange(function() {

  this.fireDesignStudioPropertiesChanged(["colorString"]);

  this.fireDesignStudioEvent("onColorChange");

  });

  },

  renderer: {}

});

If you want to create a composite, use a container control as parent (e.g. Panel) and use the "initiDesignStudio" function to add children.

[MustafaBensan · Accepted solution]

Hi Reiner,

Thanks for the confirmation and example.  I look forward to reviewing the details when the official documentation is published.  Can you provide any guidance as to when it might be available?

Regards,

Mustafa.

[mike_howles4 · Accepted solution]

THANK YOU

Follow up question -- One thing I wish I could do back in the Xcelsius addon days and again now is create Container components.  Are there plans to allow SDK components to contain other components (Like your Panel or Popup components work, for example).

[mike_howles4 · Accepted solution]

Mustafa,

I read your post and code and attempted on my workstation as well.  I observe the same behavior, where sap.ui.Button and sap.m.Button fires the click and press events from a regular HTML page, however sap.m.Button does not fire a press nor a tap event when coming from a Design Studio page.

I did however note that it does successfully fire if you view the Design Studio Page from an iPad/iPhone, the event DOES fire...

This leads me to believe that the sap.ui.core (or in sap.m) is performing some sort of Browser detection which may be suppressing events due to the UI usage -- This is a total guess, but I'll keep digging.  I also think that sap.m itself does do some type of detection because you can get some funny messages back from the library when doing some other stuff:

I just think since sap.m addresses solely mobile usages, whereas UI5 can really do both, that sap.m probably isn't the optimal library for Design Studio, which creates both desktop and mobile applications.  sap.m is more about responsive layouts, etc and so to really leverage the goodness of sap.m anyway, we'd have to create complex layout components like sap.m.Page among others, to make any good use of sap.m and I think that the DS wiring is more about the UI5 traditional layout principles.  Maybe Reiner can set me straight on some of my conjecture, but that's just my cloudy take at it!

[MustafaBensan · Accepted solution]

Hi Michael,

Thanks very much for your insight.  Here are some more comments for thought:

1)  I agree that the sap.m library is more for responsive layouts and in fact this is what interests me about it.  Although it is optimised for mobile, it also works very well on the desktop when using container layout components such as m.Page (as you've mentioned).  For instance, I believe that Fiori apps are based on the sap.m library for this very reason, so that they are effective on both the desktop and mobile.  Interestingly, during one of the SAPUI5 sessions at TechEd Vegas, I recall the presenter mentioning that the sap.m library would eventually merge into the standard/core library in future versions of SAPUI5 for this reason.  I just found it unusual that sap.m works fine on the desktop when deployed as a standalone SAPUI5 application but not within the Design Studio framework.  Although as Reiner has pointed out, perhaps this is a side-effect of my example not using the official approach for including SAPUI5 controls that is due to be published;

2)  Regarding the error that you are observing when you use the sap.m.App component, based on my experience, I suspect it is because the sap.m.App component specifically, is supported only in IE10 and higher (whereas other simpler components such as sap.m.Button work fine in IE9 too).  What version of Internet Explorer are you using in your Design Studio development environment?  I'm guessing it's probably the minimum required version, version 9.  Let me know if you are able to validate this or come up with any other related observations. 

Regards,

Mustafa.

[mike_howles4 · Accepted solution]

1) Yes, you are right, Fiori being a sap.m composition targets any device, that's true...  Perhaps the history and lineage of sap.m hasn't fully caught up with the design principles of Fiori, however.  Otherwise, why are there checks to see if the rendering device is desktop or mobile in the screenshot?  Maybe this is because the version of SAPUI5 and sap.m is dated in Design Studio and this will be caught up in a later release (Crossing my fingers)

2) I am using IE11, and get that message in the DS IDE and at IE11 runtime which I know uses whatever version of IE you have installed.  Maybe it's that IE11 is too new?  I do not get the error at runtime in Chrome.

[mike_howles4 · Accepted solution]

Wanted to thank you again for that code snippet.  I've been able to implement it successfully for one of my components (my Toolbar example).  I worked through the setter and getter changes also, as it appears that the fluent setter/getter method isn't used for the sapui5 handler.

This document has helped me piece the rest of the puzzle together for the most part:

Documentation/AdvancedTopics/OnTheFlyControlDefinition – SAPUI5 Wiki (TIP CORE User Interface)

Just missing some Array/Collection setters/getters but I can work around that for now

Thanks again!

[MustafaBensan · Accepted solution]

Hi Reiner,

I have tried applying your example to a button in the sap.m library but receive the following error message (among others) when the component is used:

"sdkui5" is not a valid entry of the enumeration for property "type" of Element com.infovizi.prototype.mobiletest.MobileButton#MOBILEBUTTON_1_control 
sap-ui-core-all.js, line 192 character 262032 

The "sapui5" handler type in the SDK seems to have a problem with components from the sap.m library, whereas components from the sap.ui.commons library seem to work fine.  Could you please provide a working example of how sap.m components should be applied with the "sapui5" handler type?

For your reference, my contribution.xml and component.js files are listed below:

contribution.xml

<?xml version="1.0" encoding="UTF-8"?>
<sdkExtension xmlns="http://www.sap.com/bi/zen/sdk"
  title="Design Studio SDK Extension UI5 Mobile Component Test"
  version="1.0"
  vendor="Infovizi"
  id="com.infovizi.prototype.mobiletest">
  <component id="MobileButton"
  title="UI5 Mobile Button"
  handlerType="sapui5"
  icon="res/icon.png"
  group="sapui5"
  >


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


  <initialization>
  <defaultValue property="WIDTH">100</defaultValue>
  <defaultValue property="HEIGHT">100</defaultValue>
  </initialization>
  </component>
</sdkExtension>

component.js

sap.ui.getCore().applyTheme("sap_bluecrystal");
jQuery.sap.require("sap.m.Button");


sap.m.Button.extend("com.infovizi.prototype.mobiletest.MobileButton",{



  initDesignStudio:function() {



  // create a mobile button with an alert when clicked

  this.setText("Mobile Button");

  this.attachPress(function() {
  alert( this.getText() + ' clicked.');

  });


  },

  renderer:{}


});

Thank you,

Mustafa.

[reiner_hille-doering · Accepted solution]

Ouch. This sounds our internal "type" property clashes with some builtin "type" property of Mobile button.

You might be able to work arround this by "overriding" the setType and getType functions - thus avoiding the the original methods are called.

[MustafaBensan · Accepted solution]

Hi Reiner,

Thanks for your quick follow-up.  Could you please elaborate a little about the implementation of your suggestion for "overriding" the setType and getType functions, so I can try the approach accordingly?

By the way, from my experience so far, it looks like this issue applies to most, if not all of the sap.m controls and not just the Button control.  That is a big ouch!

Regards,

Mustafa.

[mike_howles4 · Accepted solution]

Mustafa,

Were you even able to get the 'sdkui5' handler to run in any form?  Any attempt I've tried to use outside of the 'div' or 'sapui5' handlers gives me an error such as:

!MESSAGE There was a problem parsing a Design Studio Extension XML at path "contribution.xml" of extension "com.infovizi.p.mobiletest", line 11, column 3: cvc-enumeration-valid: Value 'sdkui5' is not facet-valid with respect to enumeration '[div, sapui5]'. It must be a value from the enumeration.

Would be very curious to know if you were able to even overcome this, as I'd like to play with SAP's Panel Handler...

EDIT: I figured it out, nevermind.... It's the type setter... that's setting 'sdkui5', I get it..

Message was edited by: Michael Howles

[mike_howles4 · Accepted solution]

Looks like the SDK API is trying to do a 'setType' to 'sdkui5', where it should only be one of these values:

JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m.ButtonType

[reiner_hille-doering · Accepted solution]

Try this:

sap.m.Button.extend("com.infovizi.prototype.mobiletest.MobileButton",{ 

  setType: function() { },

  initDesignStudio:function() { 

...

[MustafaBensan · Accepted solution]

Hi Reiner,

Thank you very much for your suggestion.  My component now renders on the canvas and in preview mode without throwing a type error.  However, I am now back to my original issue in that the attached event handler has absolutely no effect.  When the button is clicked, the expected action of an alert box is not invoked.  Can you suggest how this could be corrected?

Regards,

Mustafa.

[mike_howles4 · Accepted solution]

Mustafa,

It's working for me.  Will post code in a moment.

[MustafaBensan · Accepted solution]

Hi Mike,

As per Reiner's suggestion with the type setter, my sample component now renders without throwing any errors but the event handler still doesn't get invoked.  Have you managed to successfully invoke events for any sap.m controls after overriding the type setter?

Thanks,

Mustafa.

[mike_howles4 · Accepted solution]

Note:  You can ignore all my 'mType' attempts and remove it all, I was trying to expose a different way to re-introduce the sap.m.Button 'type' property, but couldn't get it to do what I wanted it to.

contribution.xml

<?xml version="1.0" encoding="UTF-8"?>
<sdkExtension xmlns="http://www.sap.com/bi/zen/sdk"
  title="Mobile Test"
  version="1.0"
  vendor="Infovizi"
  id="com.infovizi.p.mobiletest">
  <component id="MobileTest"
  title="Mobile Test 2"
  handlerType="sapui5"
  icon="res/icon.png"
  >


  <jsInclude>res/js/component.js</jsInclude>
  <cssInclude>res/css/component.css</cssInclude>
  <property type="String" title="Text" id="text"></property>
  <property type="String" title="Icon" id="icon"></property>
  <property type="String" title="Type" id="mType">
  <possibleValue>Default</possibleValue>
  <possibleValue>Back</possibleValue>
  <possibleValue>Accept</possibleValue>
  <possibleValue>Reject</possibleValue>
  <possibleValue>Transparent</possibleValue>
  <possibleValue>Up</possibleValue>
  <possibleValue>Unstyled</possibleValue>
  <possibleValue>Emphasized</possibleValue>
  </property>
  <initialization>
  <defaultValue property="text">sap.m.Button</defaultValue>
  <defaultValue property="WIDTH">100</defaultValue>
  <defaultValue property="HEIGHT">100</defaultValue>
  <defaultValue property="mType">Default</defaultValue>
  </initialization>
  </component>
</sdkExtension>

component.js

jQuery.sap.require("sap.m.Button");
sap.ui.commons.Button.extend("com.infovizi.p.mobiletest.MobileTest",{
  metadata : {
  // setter and getter are created behind the scenes, including data binding and type validation
  properties : {
  "name" : "string",
  "mType" : { type : "string", defaultValue : sap.m.ButtonType.Default}
  }
    },
    renderer : {},
    setMType : function(s){
    this.mProperties["type"] = s; // Dirty workaround
    return this;
    },
    getMType : function(){
    return this.getProperty("type");
    },
    setType : function(s){ // Do nothing, sdkui5 conflicts with sap.m.ButtonType
    return this;
    },
  initDesignStudio : function() {
  var core = sap.ui.getCore();
  // core.applyTheme("sap_bluecrystal"); // Neat trick
  this.attachPress(function() { // Create a mobile button with an alert when clicked
  alert( this.getText() + ' clicked.');
  // this.fireDesignStudioEvent("onclick"); (If you decide to expose a BIAL onclick Event)
  });
  }
});

[MustafaBensan · Accepted solution]

Thanks Mike.  I'll look forward to your solution,

Mustafa.

[MustafaBensan · Accepted solution]

Hi Mike,

I've tried to implement your suggested approach and have removed all of the 'mType' code.  However, I still can't get the event handler to work.  I notice in your component.js code you are extending sap.ui.commons.Button, a standard control, whereas I need to extend sap.m.Button, a mobile control.

My updated component.js now looks like this but the event handler still isn't invoked:

jQuery.sap.require("sap.m.Button");
sap.m.Button.extend("com.infovizi.prototype.mobiletest.MobileButton",{
 
 

 
 initDesignStudio:function() {
    
  var core = sap.ui.getCore(); 
  
  // set mobile button text and invoke an alert when clicked
  
  this.setText("Mobile Button");
  
  this.attachPress(function() {
   alert( this.getText() + ' clicked.');
  
 });
  
   
 },
 
 renderer:{},
 
 setType : function(s){
  return this;
 },
 
});

Do you have any suggestions as to how I can get the event handlers to work with mobile (sap.m) controls?

Thanks,

Mustafa.

[mike_howles4 · Accepted solution]

Yikes, you are right.  I didn't even notice that I was using ui.commons, my mistake!  Will see if I can get it to fire now that it at least renders to the screen (our original issue now being overcome).

[MustafaBensan · Accepted solution]

Yes, that's one hurdle overcome in terms of getting the component to render.  At least now we are using the officially supported handler type for SAPUI5 controls.  It's just very unusual that the sap.m controls don't trigger the event handlers.  Please let me know how you go with your attempts to make this work.

Thanks,

Mustafa.

[MustafaBensan · Accepted solution]

Hi Reiner,

To further clarify the issue, I have prepared an SDK project that contains 2 components: Mobile Button (sap.m.Button) and Standard Button (sap.ui.commons.Button).  Both apply Handler Type "sapui5" and the component.js code is identical (except that the Mobile Button component also includes a setType override to correct the rendering error).  Both components register an event handler for the Press event to display an alert message.  When you drag and drop both components onto the Design Studio canvas and launch a preview, clicking on the Standard Button generates the desired effect of displaying an alert but clicking on the Mobile Button does not trigger the event handler for some reason.

The complete SDK component project can be downloaded from the following link if you'd like to try it out for yourself:

DS_SDK_UI5_MobileTest.zip

I'd very much appreciate it if you could advise if there is some other override that must be invoked to ensure that events for sap.m controls are triggered normally within the Design Studio SDK framework.

Thanks,

Mustafa.

[mike_howles4 · Accepted solution]

Hey Mustafa, I have a similar test bed app where I've been trying to figure out what's getting overwritten perhaps as well (a combo of your sap.m.Button and my HTML/JS injection addon to do some on the fly investigation).

I've even made sure via overriding setProperty that another odd value is not being passed, but I've not had time to override attachPress and attachEvent, and all the other methods that are involved (day job and all )

As I get a little free time, I'd love to try to dig in more out of curiosity if not anything else!

[Karol-K · Accepted solution]

Hi Former Member, ,

the eventing issue is solved, you can see it in my Calender control.

The code to solve it is here:

Basically, the issue is that SAPUI5 loads the mobile events (which are actually not only mobile but also required on desktop in sap.m controls) only once, but reload of the event module fixes it.

you can try it out in your controls, the code is in the community repo under:

community.sdkpackage\src\org.scn.community.basics\os\sapui5\load.sap.m.js

it is just enough to include this file in your contribution.xml:

Karol

[MustafaBensan · Accepted solution]

Hi Karol,

Thanks very much for this.  In the prototypes I've been working on we used a similar approach but it required more code.  It looks like you've come up with a compact approach.  I'll give it a try and let you know the results.

Regards,

Mustafa.

[MustafaBensan · Accepted solution]

Hi Karol,

Thanks for your help with this particular issue.  I will now close this question as your load.sap.m.js library has resolved the desktop eventing problem.  I'll raise a separate question for the sap.m.List mobile scrolling issue.

Regards,

Mustafa.