Hi Deepak,
You have placed sap.m.SplitApp control as content of sap.m.Page. This should not be the case. You have to create a view having only sap.m.SplitApp and its aggregation masterPages & detailPages should contain respective views which should return sap.m.Page having header and footer. Please see the project structure and code snippet below:
Project Structure:
SplitApp.view.xml
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="splitapp.SplitApp" xmlns:html="http://www.w3.org/1999/xhtml"> <SplitApp> <masterPages> <mvc:XMLView viewName="splitapp.Master" id="idMaster" /> </masterPages> <detailPages> <mvc:XMLView viewName="splitapp.Detail" id="idDetail" /> </detailPages> </SplitApp></core:View>
Master.view.xml
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="splitapp.Master" xmlns:html="http://www.w3.org/1999/xhtml"> <Page title="Master Page"> <content> </content> <footer> <Bar> </Bar> </footer> </Page></core:View>
Detail.view.xml
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="splitapp.Detail" xmlns:html="http://www.w3.org/1999/xhtml"> <Page title="Detail Page"> <content> </content> <footer> <Bar> </Bar> </footer> </Page></core:View>
index.html
<!DOCTYPE HTML><html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"> </script> <script> sap.ui.localResources("splitapp"); var app = new sap.m.App({initialPage:"idSplitApp1"}); var page = sap.ui.view({id:"idSplitApp1", viewName:"splitapp.SplitApp", type:sap.ui.core.mvc.ViewType.XML}); app.addPage(page); app.placeAt("content"); </script> </head> <body class="sapUiBody" role="application"> <div id="content"></div> </body></html>
Hope this solves your problem. Happy UI5 Coding!!!
Regards,
Parag