Add the splitView into fullview Application in SAPUI5

[kiran_padarthi]

Hi,

Now we are going to make a sapui5 application which contains a splitview inside a full screen app using targets in manifest.json.

Basically you need to maintain two basics view's in your application.

For Example :

1. SplitView.view.xml


2. FullVIew.view.xml

Maintain FullView.view.xml as the rootview for your application. For this go to your manifest do the changes as below.

"rootView": {

			"viewName": "hirse.view.FullView",

			"type": "XML"

		},

 

Then go to FullView.view.xml and include app as shown below.

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" displayBlock="true">

    <App id="appControl" />

</mvc:View>

 

Then go to SplitView.view.xml and include splitContainer as shown below.

 

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">

    <SplitContainer id="splitContainerControl" mode="StretchCompressMode" />

</mvc:View>

 

as of now we have created the basics views to launch the application.

Now create three more view's to include the pages into basic views. For Example:

1.Master.view.xml:

<mvc:View controllerName="hirse.controller.Master" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" >

    <Page title="Master Page">

      <subHeader>

        <Toolbar>

          <Button text="Fullscreen" press=".onFullScreenPressed" />

        </Toolbar>

      </subHeader>

        <List>

          <StandardListItem title="List Item" />

        </List>

    </Page>

</mvc:View>

and include below code in the controller to navigate between the pages.

onFullScreenPressed :function() {

    this.getOwnerComponent().getRouter().navTo("fullscreenRoute");

  }

 

2. Detail.view.xml:

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" >

    <Page title="Detail Page">

        <ObjectHeader title="Item Details" />

    </Page>

</mvc:View>

3.FullScreen.view.xml

<mvc:View controllerName="hirse.controller.FullScreen" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" >

    <Page showNavButton="true" title="FullScreen Page" navButtonPress=".onBackPressed">

        <ObjectHeader title="Item Details" />

    </Page>

</mvc:View>

 

till now we have added all the required views to make the application.

Now we will look into manifest.json to include routing.

Follow the below procedure to complete the routing part.

 

"routing": {

			"config": {

				"routerClass": "sap.m.routing.Router",

				"viewType": "XML",

				"viewPath": "hirse.view",

				"controlId": "appControl",

				"controlAggregation": "pages",

				"bypassed": {

					"target": ["detailTarget", "masterTarget"]

				}

			},

			"routes": [{

				"name": "mainRoute",

				"pattern": "",

				"target": ["detailTarget", "masterTarget"]

			}, {

				"name": "detailRoute",

				"pattern": "detail/{id}",

				"target": ["masterTarget", "detailTarget"]

			}, {

				"name": "fullscreenRoute",

				"pattern": "fullscreen",

				"target": "fullscreenTarget"

			}],

			"targets": {

				"splitviewTarget": {

					"viewName": "SplitView"

				},

				"masterTarget": {

					"viewName": "Master",

					"parent": "splitviewTarget",

					"controlId": "splitContainerControl",

					"controlAggregation": "masterPages"

				},

				"detailTarget": {

					"viewName": "Detail",

					"parent": "splitviewTarget",

					"controlId": "splitContainerControl",

					"controlAggregation": "detailPages"

				},

				"fullscreenTarget": {

					"viewName": "FullScreen"

				}

			}

		},

 

Then run your application, and you will master and detail pages as the initial view as below.

 



 

Then Click on the Fullscreen button present on the masterview then you will navigate to fullscreen view as shown below.

 



 

Please add the comments if you have any doubts. Thank you.