sap.m.List problems with Design Studio 1.3

[Former Member]

Hey guys,

     We are facing this problem with the sap.m.List in Design Studio. We are developing a custom component based on the sap.m.List from SAPUI5. We need a click event on the list Items however it does not work as Design Studio is using version 1.18.8 of the SAPUI5 library and the itemPress  event is available from 1.20 on-wards. The selectionChange events on the other hand can be used, but on runtime the checkboxes dont seem to work at all.

If anyone has tried this, can you please help with this ?

(P.S My first post here on SCN, hate that it had to be a question though )

[Former Member · Accepted solution]

Hi Stephen,

First of all, welcome to SDN!

I wouldn't use the sap.m library in Design Studio, because there are some very important things that are only done if the library is loaded in SAPUI5 bootstrap, which is not the case in Design Studio.

One of these important things is the mapping of touch-related events to click-equivalents. I bet this is why the checkboxes are not working. I think it would work with a touch-enabled device.

That being said, you could still try to bind the click event to your list items. Maybe something like:

item=new sap.ui.core.Item({...});
item.attachBrowserEvent("click",function(){/*whatever is needed when a list item is clicked*/});
list.addItem(item);

You might need to use the jQuery bind method for both touch and click events:

item.$().bind("touch click",function(){/*click and touch handler*/});

Be careful though, with jQuery you need to make sure that the item is already rendered before binding an event, AND that the above code is executed after each rendering (maybe using the onAfterRendering function of the sap.m.List).

Best of luck

Regards,

Tanguy

[MustafaBensan · Accepted solution]

Hi Tanguy,

You've pinpointed the fundamental cause of the issue exactly in terms of the missing UI5 bootstrap steps, which is why the workaround of manually attaching browser events is necessary as you've indicated.

To your suggestion of not using the sap.m library in Design Studio however, I would rather see SAP fix the issue so that the library can be used.  Given SAP's UX Strategy direction with the Fiori style, I think it makes a lot of sense to take advantage of the sap.m library for Design Studio components.

Regards,

Mustafa.

[Former Member · Accepted solution]

Hi Mustafa,

You're absolutely right, and I would gladly use the sap.m library when it's fully operational in Design Studio.

Hopefully, with DS 1.4 apps integrated in Fiori sFin apps, we will have the sap.m library working for our extensions next month.

Until then, I'd rather not use it than implementing the click events myself. Just my humble opinion though!

Regards,

Tanguy

[MustafaBensan · Accepted solution]

Hi Tanguy,

It would certainly be great if this issue is fixed in DS 1.4 although sadly I don't expect it to be.  Based on my understanding from the sessions at the recent Las Vegas d-code, the DS 1.4 Fiori integration will simply allow sFin customers to add tiles for launching Design Studio apps from their Fiori Launchpad.  This feature doesn't directly relate to sap.m integration so I'd be surprised if the issue is resolved.

Let's wait and see,

Mustafa.

[Karol-K]

Hi Stephen,

after some debugging I could activate the touch events after dynamic load of sap.m library:

Here the code for it.

My use is in Calendar control which requires sap.me and sap.m.

Karol

[MustafaBensan]

Hi Karol,

I tried your solution for dynamically loading the sap.m library based on your response to my original question.  The load.sap.m.js library definitely solves the problem of activation of touch events on mobile and desktop.  However, as of Design Studio 1.4, I have noticed that vertical scrolling on the sap.m.List control no longer works on mobile devices.  It seems like the scroll bar does not get activated anymore as of Design Studio 1.4 for some reason.  It used to work fine with DS 1.2 and 1.3 but as of 1.4 this no longer seems to be the case.  Are you able to verify/replicate this behaviour with the sap.m.List control on a mobile device?  I have tried it on both an iPhone and iPad and same result: no vertical scroll bar.

Thanks,

Mustafa.

[Karol-K]

Hi Mustafa,

I have made some tests.

indeed, the workaround works ok on desktop, on mobile it is actually not necessary, as the check which is overruled would be responded with needsMobileEvents?true as probably this value is true: sap.ui.Device.support.touch.

so, the code should be more like this:

// mark forced re-load of sap.m events bundle
oCfgData = window["sap-ui-config"]

// check of the library sap.m is already in declared libs (to avoid second execution)
if(oCfgData.libs.indexOf("sap.m") == -1) {
  // append the information that sap.m is loaded
  oCfgData.libs = oCfgData.libs + ",sap.m";

  // load sap.m and sap.me
  var oCore = sap.ui.getCore();
  oCore.loadLibrary("sap.m");

  if(!sap.ui.Device.support.touch) {
    // unload events bundle
    jQuery.sap.unloadResources("jquery.sap.events.js", false, true, true);
    // reload events bundle to assure that sap.m events are active
    jQuery.sap.require("jquery.sap.events");
  }
}

I have also issues with the list and scrolls, but not because the code, as it works when I check it standalone. can you check the links:

this works well (iPhone4S):

sap.m.List Test - newest code, reloading events only if not-mobile

this works also with scrolling, BUT the scroll bar is not visible:

sap.m.List Test - code reloading events always 

and I made tests in DS 1.4 & 1.5 (different SAP UI5 version) and none of those above are working.

So, there is other reason for debugging.

Question:

* if you state - worked in 1.3, with this workaround or with which code, your own workarond? can you make some snippet?

Karol

[MustafaBensan]

Hi Karol,

Thanks very much for taking the time to look into this.  Yes, the mobile scrolling issue definitely has nothing to do with the code in the load.sap.m.js library.  The previous sap.m event issues related to the desktop only, which is exactly what the load.sap.m.js library has now resolved.  Previously there was no need for any sap.m workaround for mobile devices, both the tap events and scrolling worked without any special code.  The workaround was required only for desktop.

So if you have access to a Design Studio 1.3 installation and you test sap.m.List with this, you should find that the mobile scrolling works.  It is only in DS 1.4 that this has stopped working for some reason.

I can't access your test links at the moment because JS Bin seems to be down so I'll try again later.  However, in my own testing, I also tried using a sap.m.List control in a standalone UI5 application with the same UI5 version as DS 1.4 and the scrolling works fine.  It is only once the sap.m.List is wrapped inside a DS 1.4 SDK component that the mobile scrolling breaks.  As mentioned, this was not the case with DS 1.3 where it worked fine on mobile without any special code.

Also, in case it helps, our testing and debugging seems to suggest that UI5 activates the iScroll.js third-party library for mobile scrolling for iOS Versions <=6.  However, for iOS >6 the native browser scrolling is invoked.  It looks like in DS 1.4 though, the native scrolling for mobile is not being activated.

Please let me know if you are able to come up with any further insights about this issue and any resolution.

Thanks again,

Mustafa.

[MustafaBensan]

Hi Karol,

As a followup to the issue related to mobile scrolling of the sap.m.List control, I will raise a new SCN question soon and post some workaround code that you can review to for understanding the problem better.

Thanks for your help,

Mustafa.

[Karol-K]

Mustafa,

I have included the complete test application from sap.m list into design studio prototypes, but I had no chance yet to deep into the issue. you can install the community package in latest "preview" version.

it works as expected on desktop, but not on mobile with the known issues.

Karol

[MustafaBensan]

Thanks very much Karol, I'll take a look.

Regards,

Mustafa.

[MustafaBensan]

Hi Karol,

Your SapMList component is very comprehensive.  Thank you!  I have posted a new discussion on the issue since this thread is already marked answered.  Please let me know if you have any suggestions for a solution.

Regards,

Mustafa.

[Former Member]

Hey guys,

Really great to see such a good response from this community. Thanks a lot !!

Hi Tanguy,

  I agree on your part of avoiding the sap.m library. I would have done the same, but we liked a certain feature in the sap.m.list which we wanted to have in Design Studio. The feature was the responsive handling of the list on Mobile devices(using the minScreenWidth & demandPopin properties of sap.m.Column). Otherwise the existing components within Design Studio would have sufficed.

As in this screenshot, columns can be assigned a certain behavior on different display sizes.

Hi Mustafa,

  I have seen the workaround used on the Popover Button by Micheal, but I haven't tried it yet. Certainly would try with that & I believe it should work. Would keep you posted on how it goes.

Thanks,

Stephen

[MustafaBensan]

Hi Stephen,

The issue is not with the version of UI5 in Design Studio but a general SDK integration problem related to the sap.m library whereby the standard UI5 press event is suppressed from being fired on the desktop.  You can read about the background when I originally came across this in this post.

One workaround is to manually attach a browser click event to the list item.  If you look at the code for Mike Howles' sap.m Popover Button example you will see how this technique is applied to a sap.m list item.

Specifically you can look at the coding of dsClick function in the source code where the click event is attached as follows:

listItem.attachBrowserEvent("click",function(t){return function(oControlEvent){this.listSelect(t,oControlEvent);};}(title),this);

Hopefully in future the SAP Design Studio Team will fix this SDK integration issue so that sap.m press event works as intended on the desktop.  In the meantime, the above workaround should be of help.

Let me know how you go,

Mustafa.

[mike_howles4]

I couldn't say it any better, Mustafa.  I would love to not have to patch workaround code in.  Has anyone submitted an OSS Incident on this yet?  I know that's an undertaking, but it now sounds like at least 3 of us in the world would enjoy a correction.

[MustafaBensan]

Hi Mike,

I actually did raise an OSS Incident shortly after my original SCN post on the problem and was told that all variations of SAPUI5 quirks could not be supported.  The root cause of the problem is actually very clear, as Tanguy has pointed out in terms of the bootstrap loading steps.  Given the emerging emphasis on the Fiori style, hopefully the Design Studio Team will reconsider this issue and correct it in a future version or patch.

[Former Member]

Hi Mustafa,

     I tried a fallback approach in which I used a jquery approach to check for a click on a listItem on non-touch devices and a selectionChange event for touch devices. On a selectionChange event I can get the values selected in the list from the bindingContext & when I use the jquery approach I just use the jquery each function to get the td values. It might not be the best way to do it, but it just works. Now the only issue I am left with is the scrolling problem. The sap.m.list component flows out to the full extent of it list elements, i.e the maximum height. So I use a sap.m.ScrollContainer to avoid it. However on iOS touch devices, scroll for some reason does not work. I've tried it with a panel too but it doesn't work, seems some meta tags and/or some script level suppression must be causing it.

[MustafaBensan]

Hi Stephen,

I am aware of the sap.m.ScrollContainer issue you have described.  This appears to be a bug introduced in UI5 1.18 whereby vertical scrolling does not work but horizontal does.  Design Studio 1.3 is based on UI5 1.18.  I can think of two possible options to resolve this:

(a)  Wait for the release of DS 1.4, where the version of UI5 is likely to be upgraded to a version where the bug is fixed or;

(b)  In the interim, instead of wrapping the sap.m.List inside a sap.mScrollContainer, try using the sap.m.Page container with the scroll property activated.

Regards,

Mustafa.

[Former Member]

Hi Mustafa,

     The issue only appears for touch scrolling events. The scrollContainer's vertical scrolling does work on desktops & android devices but fails on ios devices.On desktop & android scrollbars appear & scrolling is possible, but  ios does not have scollbars & touch-drag scrolling doesn't work. It is the same with sap.m.Page. It does not seem to be a UI5 issue rather I perceive it to be a Design Studio issue which seems to suppress touch-drag events, as touch scrolling does not work even for scrollable content inside a Panel component.

Regards,

Stephen

[MustafaBensan]

Hi Stephen,

In my experience, the UI5 touch scrolling events work fine on iOS even within the DS SDK.  However, you could have encountered an exception case or it may be related to the version of iOS you're testing on.

The only issues I've encountered so far are related to click events not being supported on the desktop, as discussed in the other comments in this thread.

On a side note, after checking again, the UI5 bug I was referring to with the sap.m.ScrollContainer actually relates to horizontal scrolling, as can be replicated from the following standard demokit samples:

UI5 1.18.12 Scroll Container (Horizontal scrollbar missing)

UI5 1.20.6 (Horizontal scrollbar works correctly)

Regards,

Mustafa.