Skip to Content
0

Routing in Split App

Oct 07, 2017 at 11:57 AM

165

avatar image

Hello Colleagues,

I just started at SAP and had my first UI5 training.
Next week our task is to build a Shopping App in UI5.
I know how to root from one page to another page. But how do you this in a Split App so the URL also change?
In this project I manages to root from the App page to the Main page (Split App), so that the url changed. But I can not make the same happen in the Split App.

I really hope you can help me. I am facing the problem for 2 hours and dont have a clue.

Best regards
Christian

PS: I know that it looks like really much code but 90% was generated automaticly.

Index:

<!DOCTYPE HTML>
<html>


	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta charset="UTF-8">


		<title>Split_App</title>


		<script id="sap-ui-bootstrap"
			src="../../resources/sap-ui-core.js"
			data-sap-ui-libs="sap.m"
			data-sap-ui-theme="sap_belize"
			data-sap-ui-compatVersion="edge"
			data-sap-ui-resourceroots='{"sap.training": ""}'>
		</script>


		<link rel="stylesheet" type="text/css" href="css/style.css">


		<script>
			sap.ui.getCore().attachInit(function () {


			new sap.ui.core.ComponentContainer({
				name: "sap.training",
				height: "100%"
				}).placeAt("content");


			});


		</script>
	</head>


	<body class="sapUiBody" id="content">
	</body>


</html>

Component:

ap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/Device",
	"sap/training/model/models"
], function(UIComponent, Device, models) {
	"use strict";


	return UIComponent.extend("sap.training.Component", {


		metadata: {
			manifest: "json"
		},


		/**
		 * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
		 * @public
		 * @override
		 */
		init: function() {
			// call the base component's init function
			UIComponent.prototype.init.apply(this, arguments);
			this.getRouter().initialize();


			// set the device model
			this.setModel(models.createDeviceModel(), "device");
		}
	});
});

Manifest:

{
	"_version": "1.7.0",
	"sap.app": {
		"id": "sap.training.Split_App",
		"type": "application",
		"i18n": "i18n/i18n.properties",
		"applicationVersion": {
			"version": "1.0.0"
		},
		"title": "{{appTitle}}",
		"description": "{{appDescription}}",
		"sourceTemplate": {
			"id": "ui5template.basicSAPUI5ApplicationProject",
			"version": "1.40.12"
		}
	},


	"sap.ui": {
		"technology": "UI5",
		"icons": {
			"icon": "",
			"favIcon": "",
			"phone": "",
			"phone@2": "",
			"tablet": "",
			"tablet@2": ""
		},
		"deviceTypes": {
			"desktop": true,
			"tablet": true,
			"phone": true
		},
		"supportedThemes": [
			"sap_hcb",
			"sap_belize"


		]
	},


	"sap.ui5": {
		"rootView": {
			"viewName": "sap.training.view.Rout",
			"type": "XML"
		},
		"dependencies": {
			"minUI5Version": "1.30.0",
			"libs": {
				"sap.ui.core": {},
				"sap.m": {},
				"sap.ui.layout": {},
				"sap.ushell": {},
				"sap.collaboration": {},
				"sap.ui.comp": {},
				"sap.uxap": {}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.trainingSplit_App.i18n.i18n"
				}
			}
		},
		
	"routing": {
         "config": {
            "routerClass": "sap.m.routing.Router",
            "viewType": "XML",
            "viewPath": "sap.training.view",
            "controlId": "test",
            "controlAggregation": "pages",
            "transition": "slide"
         },
         "routes": [
         	{
            "pattern": "",
            "name": "App",
            "target":"home"
         },
         
        	{
            "pattern": "Main",
            "name": "Main",
            "target":"Page2"
        	}],
        	
        	
        	"targets": {
            "home": {
               "viewName": "App",
               "viewLevel" : 1
               },
             "Page2": {
              "viewName": "Main",
              "viewLevel" : 1
              }
        	},
             
        	
     


	
      
		"resources": {
			"css": [{
				"uri": "css/style.css"
			}]
		}
	}
}

Rout View:

<mvc:View controllerName="sap.training.controller.Rout"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
 xmlns="sap.m">
	


	<App id="test">
	
	</App>
</mvc:View>

Main View:

<mvc:View
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:core="sap.ui.core"
	xmlns:f="sap.ui.layout.form"
	xmlns:l="sap.ui.layout"
	xmlns:custom="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
	controllerName="sap.training.controller.Main"
	xmlns="sap.m">
	
	
	<SplitApp id="SplitAppDemo" initialDetail="detail" initialMaster="master" orientationChange="onOrientationChange">
		<detailPages>
			<Page id="detail" title="Detail 1" class="sapUiStdPage">
				<content>
					<Image src="https://www.luxprivat.lu/uploads/tx_luxprivat/tx_news/Shopping.jpg"/>
					<Text text= "Mal gucken ob das klappt"/>
					<Button text="Settings" press="onPressNavToDetail" />
				</content>
			
			</Page>
			<Page id="detailDetail" title="Detail Detail" class="sapUiStdPage" showNavButton="true"
					navButtonText="Back" navButtonPress="onPressDetailBack">
				<content>
					
					<VBox class="sapUiSmallMargin">
						<Label text="Settings" />
						<Text text="Here you could change the Split Application mode." />
						<RadioButtonGroup columns="1" width="500px" class="sapUiMediumMarginBottom" select="onPressModeBtn">
							<buttons>
								<RadioButton id="RB1-1" text="show/hide" selected="true" custom:splitAppMode="ShowHideMode" />
								<RadioButton id="RB1-2" text="stretch/compress" custom:splitAppMode="StretchCompressMode" />
								<RadioButton id="RB1-3" text="hide" custom:splitAppMode="HideMode" />
								<RadioButton id="RB1-4" text="popover" custom:splitAppMode="PopoverMode" />
							</buttons>
						</RadioButtonGroup>
					</VBox>
					
				</content>
			</Page>
			<Page id="detail2" title="Detail 3 Page" class="sapUiStdPage" showNavButton="true"
					navButtonText="Back" navButtonPress="onPressDetailBack">


				<content>
					<Label text="This is Detail Page3" />
					<Input/>
					<Label text="Label 2" />
					<Input/>
					<Label text="Label 3" />
					<Input/>
					<Label text="Label 4" />
					<Input/>
					<Label text="Label 5" />
					<Input/>
				</content>
			</Page>
		</detailPages>
		<masterPages>
			<Page id="master" title="Kategorien" icon="sap-icon://action" class="sapUiStdPage">
				<content>
					<List>
						<items>
							<StandardListItem title="Männer Kleidung" type="Navigation" press="onPressGoToMaster2"/>
							<StandardListItem title="Frauen Kleidung" type="Navigation" press="onPressGoToMaster"/>
						</items>
					</List>
				</content>
			</Page>
			<Page id="master2" title="Subkategorien" icon="sap-icon://action" class="sapUiStdPage" showNavButton="true"
					navButtonPress="onPressMasterBack">
				<content>
					<List itemPress="onListItemPress">
						<items>
							<StandardListItem title="Anzug" type="Active" custom:to="detail"/>
							<StandardListItem title="Hosen" type="Active" custom:to="detailDetail"/>
							<StandardListItem title="T-Shirts" type="Active" custom:to="detail2"/>
						</items>
					</List>
				</content>
			</Page>
			<Page id="master4" title="Subkategorien" icon="sap-icon://action" class="sapUiStdPage" showNavButton="true"
					navButtonPress="onPressMasterBack">
				<content>
					<List itemPress="onListItemPress">
						<items>
							<StandardListItem title="Bluse" type="Active" custom:to="detail"/>
							<StandardListItem title="Blazer" type="Active" custom:to="detailDetail"/>
							<StandardListItem title="Rock" type="Active" custom:to="detail2"/>
							<StandardListItem title="Schuhe" type="Active" custom:to="detailDetail"/>
						</items>
					</List>
				</content>
			</Page>
		</masterPages>
	</SplitApp>
</mvc:View>

Main controller:

sap.ui.define([
		'jquery.sap.global',
		'sap/m/MessageToast',
		'sap/ui/core/Fragment',
		'sap/ui/core/mvc/Controller',
		'sap/ui/model/Filter',
		'sap/ui/model/json/JSONModel'
	], function(jQuery, MessageToast, Fragment, Controller, Filter, JSONModel) {
	"use strict";


	var CController = Controller.extend("sap.training.controller.Main", {


		onInit: function(){
			this.getSplitAppObj().setHomeIcon({
				'phone':'phone-icon.png',
				'tablet':'tablet-icon.png',
				'icon':'desktop.ico'
			});
		},


		onOrientationChange: function(oEvent) {
			var bLandscapeOrientation = oEvent.getParameter("landscape"),
				sMsg = "Orientation now is: " + (bLandscapeOrientation ? "Landscape" : "Portrait");
			MessageToast.show(sMsg, {duration: 5000});
		},


		onPressNavToDetail : function(oEvent) {
			this.getSplitAppObj().to(this.createId("detailDetail"));
		},
		


		onPressDetailBack : function() {
			this.getSplitAppObj().backDetail();
		},


		onPressMasterBack : function() {
			this.getSplitAppObj().backMaster();
			
		},
		
		onPressGoToMaster2 : function() {
			this.getSplitAppObj().toMaster(this.createId("master2"));
		},


		onPressGoToMaster : function() {
			this.getSplitAppObj().toMaster(this.createId("master4"));
		},


		onListItemPress : function(oEvent) {
			var sToPageId = oEvent.getParameter("listItem").getCustomData()[0].getValue();


			this.getSplitAppObj().toDetail(this.createId(sToPageId));
		},


		onPressModeBtn : function(oEvent) {
			var sSplitAppMode = oEvent.getSource().getSelectedButton().getCustomData()[0].getValue();


			this.getSplitAppObj().setMode(sSplitAppMode);
			MessageToast.show("Split Container mode is changed to: " + sSplitAppMode, {duration: 5000});
		},


		getSplitAppObj : function() {
			var result = this.byId("SplitAppDemo");
			if (!result) {
				jQuery.sap.log.info("SplitApp object can't be found");
			}
			return result;
		}


	});




	return CController;


});

App View:

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="sap.training.controller.App"
	xmlns:html="http://www.w3.org/1999/xhtml">
	<App>
		<pages>
			<Page title="Ab zur nächsten Seite">
				<content>
        	<Button text="Go To View 2" press="onGo" />
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

App Controler:

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";


	return Controller.extend("sap.training.controller.App", {


		onGo:function(){
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			oRouter.navTo("S2");
		}


	});


});
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Arjun Biswas Oct 10, 2017 at 07:48 AM
0

You can use sub routes or targets. For the shopping cart app, go through the following app :

https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/cart/webapp/index.html

Regards.

Share
10 |10000 characters needed characters left characters exceeded