cancel
Showing results for 
Search instead for 
Did you mean: 

Design Studio 1.4 SDK - How can native mobile scrolling be enabled for components based on UI5 sap.m controls?

MustafaBensan
Active Contributor
0 Kudos
97

Hi All,

When prototyping sap.m based components using handler type "sapui5", up until Design Studio 1.3, I'm sure that scrolling on a mobile device for controls such as sap.m.List worked as expected.  However, as of Design Studio 1.4 I've noticed that scrolling no longer works on a mobile device and would like to request your assistance in trying to resolve this.

By way of background, my understanding is that the mobile scrolling in standard UI5 is implemented as follows:

1)  For iOS Version < 6, the iScroll4 3rd-party library (included with UI5) is invoked for mobile scrolling;

2)  For iOS Version >=6 native browser scrolling is invoked.

As of Design Studio 1.4, for some reason it appears that native scrolling is being suppressed.  Karol Kalisz has been good enough to prepare a SapMList prototype component that has replicated the issue (available in the "preview" version of the Design Studio SDK Development Community Prototype components.  The source code is available here: sdkpackage/src/org.scn.community.prototypes at master · org-scn-design-studio-community/sdkpackage ·...

Interestingly, if the SapMList component is created as a standalone UI5 application, the mobile scrolling works as expected, so it appears as though there is an issue in Design Studio 1.4 that is suppressing mobile scrolling.

An updated version of the the SapMList.js library, SapMList-iScroll.js is attached. This includes additional code to force the iScroll functionality to be invoked regardless of iOS version, based on the delegation approach described in the UI5 documentation Scrolling: Implementation Details.

Although the iScroll workaround above resolves the issue, with the later versions of iOS it's preferable to use the native mobile scrolling as implemented in the standard UI5 functionality.  Any ideas about why the native mobile scrolling for sap.m controls is being suppressed in Design Studio 1.4 as well as suggested solutions for activating the standard native scrolling would be greatly appreciated.

Thanks,

Mustafa.

View Entire Topic
Karol-K
Product and Topic Expert
Product and Topic Expert
0 Kudos

Hi Mustafa,

this component is a copy of some UI5 test resource, I have not coded it - so it is quite complex, true.

If I understand you correctly, with the explicit activation of iScroll you could make it again working?

Karol

MustafaBensan
Active Contributor
0 Kudos

Hi Karol,

Yes, with the explicit activation of iScroll, mobile scrolling is working again on mobile devices and also desktop.  The only side-effect with this workaround at the moment is that the scrollbar does not appear when the application runs on desktop.

You will see the code for activation of iScroll in the text file SapMList-iScroll.js that I have attached.

Although forcing iScroll now allows scrolling on mobile, the preferred option is to try to get the native scrolling to work instead.

What do you think?

Mustafa.

MustafaBensan
Active Contributor
0 Kudos

Hi Karol,

As a further update, the SapMList-iScroll.js code now only invokes iScroll on mobile devices since the native scrolling is working correctly on desktop.  This way we see the native scrollbar on desktop.  You can download from this link.

Overall, this workaround seems to resolve the mobile scrolling issue.  However, if possible I'd like to determine the reason why native mobile scrolling is suppressed by Design Studio, considering that it works correctly in standalone UI5 applications.

Thanks,

Mustafa.

Former Member
0 Kudos

Hi mustafa,

I have used a Checkboxgroup component inside a panel container component in SAP BO Design Studio 1.5 and added the below css class for the container. When checkboxgroup list overflows, the panel container adds a scroll to the panel. It is working fine in desktop, when i try to use it in SAP BI mobile app, the scroll bar is not showing up. I read which mentions about iscroll. Any idea how to modify the below css class to include iscroll?

Appreciate any help on this.

div.zenborder div.scroll-y {

  /* do not allow X scroll */

  overflow-x: hidden !important;

  /* allow Y scroll */

  overflow-y: auto !important;

}

Thanks,

Nithin

MustafaBensan
Active Contributor
0 Kudos

Hi Nithin,

I have responded to this question in your Panel Scroll Issue in Mobile BI App on iPad post.

Regards,

Mustafa.

0 Kudos

Hi,

How does this iScroll exactly work? Does it only work on SAPUI5 components or can it be used to activate scroll on a complete Design Studio 1.4/1.5 document?

I have the feeling that scroll is disabled by checking UserAgent and then set touchmove EventListeners to non-functioning (PreventDefault). When I execute a Design Studio report on an Android Device in the Chrome browser, scrolling does not work. However when I select 'show Desktop mode' in the browser menu then scrolling is working fine.... So if a mobile device is given in UserAgent then it get's disabled.

Really need a hack for this but did not yet succeed. Modifing the event listeners set is hard to do because they are anonymous. Anyone ideas?

ps also a meta tag viewport scalable=no is set in DS, but this can be modified by a SDK component with jquery/d3 and set to scalable=yes, but this makes no difference. So I suspect the eventlistener touchmove and probably more.

Also I had a look to see if the User Agent value can be manipulated by Javascript but that seems to be a read only variable...

Furthermore: when I execute Chrome on my Windows 7 laptop using the statement below it emulates iPad. Then scroll in DS is also not working anymore. Probably using the F12 function then some debugging can be done to see how it's disabled, but I did not manage yet.

chrome.exe -user-agent="Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10"

Any help appreciated!

MustafaBensan
Active Contributor
0 Kudos

Hi Gerben,

The use of the iScroll library was intended as a workaround for implementing scrolling on UI5-based SDK components when viewed on a mobile device.  While I agree that scrolling on mobile devices at the moment seems to be problematic, unfortunately I don't think there's a way to apply iScroll to a complete Design Studio document.  I supposed you could develop an SDK component that assigns iScroll to the bounding div of the page but this type of manipulation would probably not be supported or encouraged by SAP.

The iScroll 5 website will give you a better understanding of how iScroll works and may provide you with further ideas.

Also, you may find the discussion following the post Scrollable Panel in Design Studio.

Regards,

Mustafa.