APEX

@"joelkallman-Oracle" Any thoughts on this? It is preventing deployment of one our apps into Production.

Hi,

it is a bug.

To finger works for me

http://www.oracle.com/technetwork/developer-tools/apex/downloads/apex181-known-issues-4478237.html

I tried using two fingers to scroll the sidebar but that scrolls the main content page instead! Strange that it works for you. I am using iPhone 8 Plus with iOS 11.4

Also, what does it mean by "when touch is enabled"?

i use iphone 8 ios version 11.3.1

you can download the mp4 video and show how it works for me

https://github.com/allipierre/UT---Mobile-scrolling

Interesting. Turns out that I can also use two finger scrolling but only if I do it really rapidly! In other words, I need to get 2 fingers ready, on your marks,  get set and go, as if I am scrolling through a very very long page. If I slowly touch 2 fingers on the sidebar and start scrolling, the main page body scrolls instead. It is hit-or-miss, literally, so I'm afraid I can't really offer using two finger scrolling as a workaround.

https://hammerjs.github.io/

My guess is that the APEX team rushed this integration with the Hammer JS library and somehow the swipe and pan recognizers are getting mixed up.

Looking forward to the PSE that fixes this.

Shakeeb - Thanks for chiming in. Not sure I understand. If you look at my original post, I am unable to scroll the sidebar navigation menu on the UT Sample App on apex.oracle.com. This doesn't use a jQuery UI widget, does it? So why is this affected?

Hi,

The workaround Shakeeb gave should work.

> "My guess is that the APEX team rushed this integration with the Hammer JS library..."

This is not an issue with Hammer integration. It is an issue with the integration of a jQuery UI touch punch equivalent we can call TouchProxy. As for rushed; that is arguably true. Would have been great if we found this problem before release.

Many APEX components are implemented as jQuery UI widgets. This includes the Tree region, the side tree navigation, Interactive Grid, Interactive Report, menus, top navigation menu, most of page designer etc.

jQuery UI does not have native support for touch events. Simple things like click are not a problem. But various common jQuery UI mouse interactions like drag, drag and drop, sortable, and sliders do not work with touch.APEX components do use the common mouse interactions.  Along came the touch punch library that simulates mouse events that jQuery UI can handle from touch events. If you add touch punch to APEX you would find the same problems. TouchProxy is basically equivalent to touch punch. We added TouchProxy so that all the jQuery UI mouse interactions used by APEX widgets and jQuery UI widgets work with touch.

Here is where the problem comes from. Consider the treeView widget used in Page Designer. It is in a container that may need to scroll and it supports drag and drop. These two things are in conflict. Preventing default (as touch punch/TouchProxy does) on the touch events breaks scrolling but d&d works fine (you can still scroll with two fingers or one finger on the scrollbar if there is one and you have tiny fingers). Not loading TouchProxy lets scrolling work but now d&d is not possible with touch.

The fix for this will be to back out use of TouchProxy. This means there will be no touch support for mouse interactions in APEX components. The real solution is to implement specific touch support in each widget and this is a big effort.

The code above essentially disables TouchProxy.

Regards,
-John

John - Thanks for chiming in, appreciate the background context.

Not loading TouchProxy lets scrolling work but now d&d is not possible with touch.

Not sure I understand. This bug notwithstanding, I wasn't even aware that d&d was supported or even possible on a mobile device! Are there any packaged or sample apps that showcase this UX pattern or does this TouchProxy issue effectively cripple this functionality?

The code above essentially disables TouchProxy.

Shakeeb suggested adding the code to the Function and Global Variable Declaration page attribute but global/shared components like the navigation menu are rendered on all pages so the Global Page comes to mind but that does not have this page attribute.

So where exactly should we put Shakeeb's JS code snippet so it kicks in for all pages? Application XXX > User Interfaces > User Interface Details > Javascript > File URLs perhaps? What do you recommend?

Thanks

One place to see drag and drop work in the treeView widget is the page designer. For example in the rendering tree you can drag and drop items or regions. It works on desktop and in 18.1 does work on a tablet (if your fingers are small). Once fixed (likely in 18.2) drag and drop will not work with touch in page designer trees but scrolling with 1 finger will work again.

To have the code run on all pages. It should go in a JavaScript file (e.g. app.js) added to the app (or workspace). Create a file and put those lines of code in them. Then upload to shared components application files. The add reference to the file in UI Details for desktop JavaScript: File URLs attribute. Example:

#APP_IMAGES#app.js?version=#APP_VERSION#

Regards,
-John