SplitApp master view button issue

2
votes

I have a problem with the master view icon of SplitApp - on my PC and on tablet (android) I can see navigation button that is placed automatically above detail view when the master view is hidden.

enter image description here

But on my smartphone this icon is not displayed , so when I navigate to one of the views, master view disappears, and I can't navigate to other detail views.

enter image description here

I've tried to place navigation button to create force navigation, and again, on PC and tablet this button works fine, but not on the smartphone (the button is rendered, but when I press it nothing heppens).

How do I solve this issue?

EDIT:

Here is my SplitApp main view.

And here is this view's controller.

Also, here is how I return sap.m.Page from the view.

3
sapui5
Please provide your code (e.g. on jsbin.com). Otherwise it's hard to solve this. - matz3
Why you hide master after navigating to detail: afterDetailNavigate: function() { this.hideMaster(); }, - Haojie
@Allen Somehow on smartphone the master view didn't go away when I navigated to detail view. - keshet
You haven't shown your view definitions, so it will be difficult to help you. Can you cut down your problem to a runnable JSBin snippet? Failing that, can you tell us at least whether your handler is being called for the nav button press event? - qmacro

3 Answers

1
votes

SplitApp maintains two NavContainers if runs in tablet and one NavContainer in phone. This means you cannot see navigation button for mobile device (especially in portrait mode). You can use showMaster/hideMaster/backMaster methods to achieve this for now. You can use sap.ui.unified to achieve this upto some extent. I think UI5 team is working on this issue and may fix in the future updates.

Thanks, prodeveloper

1
votes

The SplitApp behaves differently in Desktop/Tablet and Phone. This is intended by design and mentioned in the first section of the API https://openui5.hana.ondemand.com/#docs/api/symbols/sap.m.SplitApp.html You can use the Routing Framework to get your app behave the way you like: https://openui5.hana.ondemand.com/#docs/guide/688f36bd758e4ce2b4e682eef4dc794e.html https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.core.routing.Router.html

0
votes

I have solved the issue. The key to this issue is to use DeviceModel approach. Next, when building a view, it is required to return a page as follows:

return new sap.m.Page({
    title: "<page title>",
    showNavButton: "{device>/isPhone}",
    navButtonPress: [oController.doNavBack, oController],
    content: [ <your content here> ],
});

this way you show the navigation button on your Detail view and by pressing it, you execute doNavBack function in this view's controller.

This doNavBack function may look, for example, like this:

doNavBack: function(event) {
    this.bus.publish("nav", "back");
},

The rest is connected to the navigation stuff.