Swipe Navigation In Ui5
After digging around in the UI5 examples and code, I was unable to find a mobile application that supported swipe-to-navigate pages, and I needed some for a project. Swipe to navigate means, you use your finger to navigate between pages by swiping left or right: left will take you back, right will take you forward. Turns out, it wasn’t very hard to build. Here’s what I did.
Have a peek at the GitHub repository, it contains all the code here so you can try it for yourself. It’s not a bad base to start with either.
To wet your appetite, this is what we’re making:
We need four things:
- Swipe events, so the app can detect when someone is putting their fingers on the screen and moving them in a particular direction
- Slide animations. The slide animation that comes with UI5 out-of-the-box is only right-to-left, so we need one going in the other direction.
- A way to identify the next or previous page
- Combining everything by attaching the swipe event and animation to an
The code that matters for this is all in
For full code, please refer to the Git repository.
Conveniently, UI5 provides those for us, so: score. The events
swipe-right are perfect for this. On non-mobile devices they’re also triggered by holding down the mouse button and swiping so that’s a bonus.
The page animations in UI5 are declared in
sap.m.NavContainer3.We could create a fully custom one, but we can also realize that swiping from left-to-right is identical to right-to-left — only in reverse!
This means, lucky us, that we can use the default
slide animation and flip it. Here’s a link to the code. You’ll notice it has a
to and a
This lives in
Component.js. The code takes the default slide animation, and re-attaches it to the
NavContainer, renamed as
slide-left. It is then added again as
slide-right, only the
back parts are switched. That is all!
By adding this code in the
init portion of the Component, and before the call the parent
init method, it’s ready for action by the time the app itself is boostrapped.
I like to keep things dynamic. Thankfully, by keeping the pages` class name and ID similar, this can be achieved with relatively little code:
By adding the same classname to all pages, an the event can be attached to just the HTML bits that we like. In this case, all my pages have the class
swipe-page attached to them.
The last thing is adding the pages to the app in the right order in App view:
Observe the multitude of ID’s here: the main view is called
swipedemo-view, the app is called
swipedemo-app and all the pages have numbered ID’s:
swipe-page1 to .. however many pages you have.
This way we can determine the next page and the previous page.
Putting it together
The best place to link everything together is in the initialization phase of the App controller. This way the animations are ready to be used, and the code belonging to swiping the app is actually inside the correct controller.
Let’s break that down. The first interesting block of code is this one:
This attached a handler to the body of the page for the
swipeleft event, limited to class
swipe-page. Without the class addition, this triggers on elements overlaying the page itself as well like header elements, lists, tables, forms and anything else you might have on there. By filtering on this class, the event’s
currentTarget always contains a page.
The same code is attached to the
Second code block is the function that does the navigating:
This takes the current target’s ID, which is something like
__xmlview0--swipe-page1. To get the right page number, all we need is to get the number at the end of the string, here collected in regex array
match, and either add 1 or subtract 1, depending on the direction of the swipe.
Thanksfully, it doesn’t matter if the page you’re trying to navigate to doesn’t exist. UI5 will not throw an error, although you might see a warning in the console.
Jorg is a SAP and UI5 developer.