SplitApp master view button issue

sapui5

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.

Best Answer

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

Related Solutions

Navigation between Full screen view and Master detail view in sapui5

Create a project in which includes Master Detail Template View files & FullScreen templates files i.e.

App.view.xml & App.Controller.js
Master.view.xml & Master.controller.js
Details.view.xml & Details.controller.js
S1.view.xml & S1.controller.js

S1.view.xml

<Button text="click to splite App" press="onPressSplite"/>

S1.controller.js

 onPressSplite : function(oEvent) {						
  var oRouter = sap.ui.core.UIComponent
  .getRouterFor(this);
  oRouter.navTo("main", {});
 },
 getEventBus : function() {
   return sap.ui.getCore().getEventBus();
 },
 getRouter : function() {
   return sap.ui.core.UIComponent.getRouterFor(this);
 }

After creating these views then just define the routing of pages in Component.js

	routing : {
		config : {
			routerClass : Application_Name.MyRouter,
			viewType : "XML",
			viewPath : "Application_Name.view",
			targetAggregation : "pages",
			clearTarget : false
		},
		routes : [{
			pattern : "",
			name : "S1",
			view : "S1",
			targetControl : "masterView",
		},{
			pattern : "App",
			name : "app",
			view : "App",
			targetControl : "masterView",
			subroutes : [{
				pattern : "master",
				name : "main",
				view : "Master",
				targetAggregation : "masterPages",
				targetControl : "idAppControl",
				subroutes : [{
					pattern : "detail/{key}",
					name : "Detail",
					view : "Detail",
					targetAggregation : "detailPages",
				}]
			}]
		}]
	}

Don't forget add MyRouter.js file

Default Selected list item in Master view of the SplitApp

It seems like there is (hidden) API to make the select event fire when setting the selected item:

ListBase.prototype.setSelectedItem = function(oListItem, bSelect, bFireEvent) {
    if (this.indexOfItem(oListItem) < 0) {
        jQuery.sap.log.warning("setSelectedItem is called without valid ListItem parameter on " + this);
        return;
    }
    if (this._bSelectionMode) {
        oListItem.setSelected((bSelect === undefined) ? true : !!bSelect);
        bFireEvent && this._fireSelectionChangeEvent([oListItem]);
    }
};

You could use setSelectedItem once your lists data is loaded (e.g. change event of aggregation binding items) like this:

var oList = this.getView().byId("MyListID"),
    oFirstItem = oList.getItems()[0];
oList.setSelectedItem(oFirstItem, true, true);

This will trigger the selectionChange resp. select event and your already existing event listener will be triggered.

EDIT:

Best Answer

Related Solutions

Navigation between Full screen view and Master detail view in sapui5

Default Selected list item in Master view of the SplitApp

Related Topic