Navigate from Split View to Full view in SAPUI5

[former_member188396]

Hello,

I am trying to create one Fiori application in which initial view will be Split View which shows the Master & details of the request.

On the footer of the Master View, I have one button for "Create Reqeust" and when user clicks on this button, it should navigate to the Full view screen.

I have checked many forums and blogs but could not find the right answer to this.

Below is the code I have in the Manifest.json file.

	"sap.ui5": {
		"_version": "1.2.0",
		"rootView": {
			"viewName": "cona.fiori.otc.custreq.view.App",
			"type": "XML",
			"id": "app"
		},	
	"routing": {
			"config": {
				"routerClass": "sap.m.routing.Router",
				"viewType": "XML",
				"viewPath": "custreq.view",
				"targetAggregation": "pages",
				"clearTarget": false,
				"async": true,
				"bypassed": {
					"target": ["notFound"]
				}
			},
			"routes": [{
				"pattern": "createRequest",
				"name": "createRequest",
				"view": "CreateRequest",
				"targetControl": "idAppControl"
			}, {
				"pattern": "splitview",
				"name": "SplitApp",
				"view": "SplitApp",
				"viewPath": "custreq.view",
				"targetControl": "idAppControl",
				"subroutes": [{
					"pattern": "",
					"name": "master",
					"view": "Master",
					"preservePageInSplitContainer": true,
					"targetAggregation": "masterPages",
					"targetControl": "splitAppId",
					"bypassed": {
						"target": ["master", "notFound"]
					},
					"subroutes": [{
						"pattern": "CustomerRequestSet/{objectId}",
						"name": "object",
						"view": "Detail",
						"targetControl": "splitAppId",
						"controlAggregation": "detailPages"
					}]
				}]
			}],
			"targets": {
				"master": {
					"viewName": "Master",
					"viewLevel": 1,
					"viewId": "master",
					"controlAggregation": "masterPages"
				},
				"object": {
					"viewName": "Detail",
					"viewId": "detail",
					"viewLevel": 2,
					"controlAggregation": "detailPages"
				},
				"detailObjectNotFound": {
					"viewName": "DetailObjectNotFound",
					"viewId": "detailObjectNotFound"
				},
				"detailNoObjectsAvailable": {
					"viewName": "DetailNoObjectsAvailable",
					"viewId": "detailNoObjectsAvailable"
				},
				"createRequest": {
					"viewName": "CreateRequest",
					"viewId": "createRequest",
					"viewLevel": 2
				},
				"SplitApp": {
					"viewName": "SplitApp",
					"viewId": "splitApp"
				},
				"notFound": {
					"viewName": "NotFound",
					"viewId": "notFound"
				}
			}
		}

In above, I have App.View which contains sap.m.app and SplitApp.View contains the SplitApp in it.

<mvc:View
		controllerName="custreq.controller.App"
		xmlns:mvc="sap.ui.core.mvc"
		displayBlock="true"
		busy="{appView>/busy}"
		busyIndicatorDelay="{appView>/delay}"
		xmlns="sap.m">
<!--	<SplitApp id="idAppControl" />
-->
	<App id="idAppControl" />
</mvc:View>

SplitApp.View......

<mvc:View 
	xmlns:mvc="sap.ui.core.mvc" 
	xmlns="sap.m" 
	controllerName="custreq.controller.SplitApp"
	xmlns:html="http://www.w3.org/1999/xhtml">
	<SplitApp id="splitAppId" />
</mvc:View>
<br>

With this, when I run the application, master page shows fine but nothing on the Details side. When I check the Console, I see below error.

2017-03-21 12:07:05.319915 Control with ID splitAppId could not be found - EventProvider sap.ui.core.routing.Target

Below is the screenshot of the application.

Let me know what could be wrong here.

Thanks,

Bhavik