Skip to Content
0

How to improve my SplitApp in mobile?

Nov 09, 2016 at 03:19 PM

133

avatar image
Former Member

Hi!

Could you tell me how can I improve communication between pages in SplitApp in Smartphone?

I want that in Phone View I could see only list in Master Page. If someone choose item, he gets for example only this "Zusammenfassung".

How can I do it?

Right now I have something like this.

I wan to get this

Thank you in advance!

Regards,

Khristina

app.png (33.6 kB)
app1.png (61.1 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Nils Lutz Nov 09, 2016 at 04:14 PM
0

Hi Khristina,

could you provide some more technical informations like controller source code of master view and/or the manifest.json to get a deeper look how you implemented the routes, targets and navigation between master and detail views.

Show 2 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hi!

Ok! This my files Component.json and Mater.control

jQuery.sap.declare("Statusverwaltung3.Component");
 jQuery.sap.require("sap.m.routing.RouteMatchedHandler");


 sap.ui.core.UIComponent.extend("Statusverwaltung3.Component", {
 	metadata: {
 		"name": "Master Detail Sample",
 		"version": "1.0",
 		"includes": [],
 		"dependencies": {
 			"libs": ["sap.m", "sap.me", "sap.ushell",
 				"sap.suite.ui.microchart"
 			],
 			"components": []
 		},


 		"config": {
 			"resourceBundle": "i18n/i18n.properties",
 			"titleResource": "SHELL_TITLE",


 			"serviceConfig": {
 				name: "UI5STAT1_SRV",
 				serviceUrl: "/sap/opu/odata/kernc/UI5STAT1_SRV/"
 			}
 		},


 		routing: {
 			config: {
 				viewType: "XML",
 				viewPath: "Statusverwaltung3.view", // common prefix
 				targetAggregation: "detailPages",


 				clearTarget: false
 			},
 			routes: [{


 					pattern: "",
 					name: "master",
 					view: "Master",
 					targetAggregation: "masterPages",


 					preservePageInSplitContainer: true,
 					targetControl: "fioriContent",
 					subroutes: [{
 						pattern: "Detail/{contextPath}", // will be the url and from has to be provided in the data
 						view: "Detail",
 						name: "Detail" // name used for listening or navigating to this route


 					}, {
 						pattern: ":all*:", // catchall


 						view: "Detail",


 						name: "catchall"
 					}]
 				}


 			]


 		}
 	},


 	init: function() {
 		sap.ui.core.UIComponent.prototype.init.apply(this, arguments);


 		this._oRouteMatchedHandler = new sap.m.routing.RouteMatchedHandler(this.getRouter());
 		// this component should automatically initialize the router
 		this.getRouter().initialize();


 		var oServiceConfig = this.getMetadata().getConfig()["serviceConfig"];
 		var sServiceUrl = oServiceConfig.serviceUrl;


 		// always use absolute paths relative to our own component
 		// (relative paths will fail if running in the Fiori Launchpad)
 		var rootPath = jQuery.sap.getModulePath("Statusverwaltung3");


 		// if proxy needs to be used for local testing...
 		var sProxyOn = jQuery.sap.getUriParameters().get("proxyOn");
 		var bUseProxy = ("true" === sProxyOn);
 		if (bUseProxy) {
 			sServiceUrl = rootPath + "/proxy" + sServiceUrl;
 		}


 		// start mock server if required
 		var responderOn = jQuery.sap.getUriParameters().get("responderOn");
 		var bUseMockData = ("true" === responderOn);
 		// var bUseMockData = true;
 		if (bUseMockData) {
 			jQuery.sap.require("sap.ui.app.MockServer");
 			var oMockServer = new sap.ui.app.MockServer({
 				rootUri: sServiceUrl
 			});
 			oMockServer.simulate(rootPath + "/model/metadata.xml", rootPath + "/model/");
 			oMockServer.start();


 			var msg = "Running in demo mode with mock data."; // not translated because only for development scenario
 			jQuery.sap.require("sap.m.MessageToast");
 			sap.m.MessageToast.show(msg, {
 				duration: 4000
 			});
 		}


 		// set i18n model
 		var i18nModel = new sap.ui.model.resource.ResourceModel({
 			bundleUrl: rootPath + "/i18n/i18n.properties"
 		});
 		this.setModel(i18nModel, "i18n");


 		// set data model
 		var m = new sap.ui.model.odata.ODataModel(sServiceUrl, {
 			json: true,
 			loadMetadataAsync: true
 		});
 		this.setModel(m);


 		// set device model
 		var deviceModel = new sap.ui.model.json.JSONModel({
 			isTouch: sap.ui.Device.support.touch,
 			isNoTouch: !sap.ui.Device.support.touch,
 			isPhone: jQuery.device.is.phone,
 			isNoPhone: !jQuery.device.is.phone,
 			listMode: (jQuery.device.is.phone) ? "None" : "SingleSelectMaster",
 			listItemType: (jQuery.device.is.phone) ? "Active" : "Inactive"
 		});
 		deviceModel.setDefaultBindingMode("OneWay");
 		this.setModel(deviceModel, "device");
 	},


 	/**
 	 * Initialize the application
 	 * 
 	 * @returns {sap.ui.core.Control} the content
 	 */
 	createContent: function() {


 		var oViewData = {
 			component: this
 		};
 		return sap.ui.view({
 			viewName: "Statusverwaltung3.view.App",
 			type: sap.ui.core.mvc.ViewType.XML,
 			viewData: oViewData
 		});
 	}
 });

sap.ui.core.mvc.Controller.extend("Statusverwaltung3.view.Master", {


	handleSearch: function() {
		// add filter for search
		var filters = [];
		var searchString = this.getView().byId("searchField").getValue();
		if (searchString && searchString.length > 0) {
			filters = [new sap.ui.model.Filter("", sap.ui.model.FilterOperator.Contains, searchString)];
		}


		// update list binding
		var list = this.getView().byId("list");
		var binding = list.getBinding("items");
		binding.filter(filters);
	},
	onBack: function() {
		//this.getOwnerComponent().getTargets().display("Detail");
		


	},
	onPress: function() {
		//var app = this.getView().byId("fioriContent");
		//app.setMode("HideMode");


	},


	handleSelect: function(oEvent) {
		var oListItem = oEvent.getParameter("listItem") || oEvent.getSource();


		// trigger routing to BindingPath of this ListItem - this will update the data on the detail page
		sap.ui.core.UIComponent.getRouterFor(this).navTo("Detail", {
			from: "master",
			contextPath: oListItem.getBindingContext().getPath().substr(1)
		});
	}
});


0

We use the split app template from webide for this use case. It attaches a PatternMatched callback function to the master route in the onInit lifecycle function of master controller. When this event got fired the callback function looks if there are objects loaded into the masterlist and decides upon this to load the detail view with first loaded object bound to it. If there was no objects loaded into masterlist at onInit the callback function load the noObjectsAvailable view and displays it.

sap.ui.define([...]) {
  ...

  onInit: function() {
  ...
  this.getRouter().getRoute("master").attachPatternMatched(this._onMasterMatched, this);
  ...

  },

  _onMasterMatched: function() {
    this._oListSelector.oWhenListLoadingIsDone.then(
      function(mParams) {
        if (mParams.list.getMode() === "None") {
          return;
	}
	this.getModel("appView").setProperty("/addEnabled", true);
	if (!mParams.list.getSelectedItem()) {
	  this.getRouter().navTo("object", {
	    ObjectId: encodeURIComponent(mParams.firstListitem.getBindingContext().getProperty("ObjectId"))
	  }, true);
	}
      }.bind(this),
      function(mParams) {
	if (mParams.error) {
	  return;
	}
	this.getRouter().getTargets().display("detailNoObjectsAvailable");
      }.bind(this)
	);
  },

}
0
Akhilesh Upadhyay Nov 09, 2016 at 05:44 PM
0

try to set mode of splitapp as:

ShowHideMode or StretchCompressMode

and if in mobile device- you want third IconTabFilter get selected by default, Then-

define key property for each IconTabFilter in xml, and then initially just check the device using sap.ui.Device.system and set the key of that particular IconTabFilter using setSelectedKey

Regards,

Akhilesh

Share
10 |10000 characters needed characters left characters exceeded