Hi Deepak,
I was able to achieve the same using router based application and with common header for sap.m.SplitApp page and separate header & footer for master and detail pages as per the snapshot below:
Reference Code Snippet:
Component.js
jQuery.sap.declare("sap.ui.demo.tdg.Component");
jQuery.sap.require("sap.ui.demo.tdg.MyRouter");
sap.ui.core.UIComponent.extend("sap.ui.demo.tdg.Component", { metadata : { name : "TDG Demo App", version : "1.0", includes : [], dependencies : { libs : ["sap.m", "sap.ui.layout"], components : [] }, rootView : "sap.ui.demo.tdg.view.App", config : { resourceBundle : "i18n/messageBundle.properties", serviceConfig : { name : "Northwind", serviceUrl : "proxy/http/services.odata.org/V3/Northwind/Northwind.svc/" } }, routing : { config : { routerClass : sap.ui.demo.tdg.MyRouter, viewType : "XML", viewPath : "sap.ui.demo.tdg.view", targetAggregation : "detailPages", clearTarget : false }, routes : [ { pattern : "", name : "main", view : "Master", targetAggregation : "masterPages", targetControl : "idAppControl", subroutes : [ { pattern : "", name : "product", view : "Detail" } ] } ] } }, init : function() { sap.ui.core.UIComponent.prototype.init.apply(this, arguments); var mConfig = this.getMetadata().getConfig(); // always use absolute paths relative to our own component // (relative paths will fail if running in the Fiori Launchpad) var rootPath = jQuery.sap.getModulePath("sap.ui.demo.tdg"); // set i18n model var i18nModel = new sap.ui.model.resource.ResourceModel({ bundleUrl : [rootPath, mConfig.resourceBundle].join("/") }); this.setModel(i18nModel, "i18n"); this.getRouter().initialize(); }
});App.view.xml
<mvc:View xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"> <Page title="Split App Header"> <content> <SplitApp id="idAppControl" /> </content> </Page></mvc:View>
Master.view.xml
<mvc:View controllerName="sap.ui.demo.tdg.view.Master" displayBlock="true" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"> <Page id="page" title="{i18n>masterTitle}"> <content> </content> <footer> <Toolbar> <ToolbarSpacer/> <Button text="Master Footer Button" tooltip="{i18n>masterFooterAddButtonTooltip}" press="onAddProduct" /> </Toolbar> </footer> </Page></mvc:View>Detail.view.xml
<mvc:View controllerName="sap.ui.demo.tdg.view.Detail" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m"> <Page showNavButton="{device>/isPhone}" navButtonPress="onNavBack" class="sapUiFioriObjectPage" title="{i18n>detailTitle}"> <content> </content> <footer> <Toolbar> <Button text="Detail Footer Button"></Button> </Toolbar> </footer> </Page></mvc:View>Hope this answers your query.
Happy UI5 coding!!!
Regards,
Parag
