Hi
We have created a SplitApp using a JS view . The createContent extract is below
createContent : function(oController) { // to avoid scrollbars on desktop the root view must be set to block display this.setDisplayBlock(true); this.app = new sap.m.SplitApp("SplitApp"); this.app.addMasterPage(sap.ui.htmlview("Master", "xxx.Master")); this.app.addDetailPage(sap.ui.htmlview("Detail", "xxx.Detail")); var oShell = new sap.m.Shell({ showLogout : false, headerRightText : "XXX", }); oShell.addStyleClass("shell"); // oShell.addStyleClass("pageStyle"); oShell.setApp(this.app); return oShell; }
The Master Page is a HTMLView as below
<template data-controller-name="xxx.controllers.Master"><div data-sap-ui-type="sap.m.Page" id="Master" data-show-header="true" class="pageStyle"> <div data-sap-ui-type="sap.m.PullToRefresh" data-refresh="onPullToRefresh"></div> <div data-sap-ui-aggregation="customHeader"> <div data-sap-ui-type="sap.m.Bar" data-width="100%"> <div data-sap-ui-aggregation="contentLeft"> <div data-sap-ui-type="sap.m.Button" data-press="navBack" data-icon="sap-icon://home"></div> </div> <div data-sap-ui-aggregation="contentMiddle"> <div data-sap-ui-type="sap.m.Label" data-text="Master List"></div> </div> </div> </div> <div data-sap-ui-aggregation="content"> <div data-sap-ui-type="sap.m.Bar" data-enable-flex-box="true"> <div data-sap-ui-aggregation="contentMiddle"> <div data-sap-ui-type="sap.m.SearchField" data-width="100%" data-live-change="onSearch" data-placeholder="Search" class="searchField"> <div data-sap-ui-aggregation="layoutData"> <div data-sap-ui-type="sap.m.FlexItemData" data-grow-factor="1"></div> </div> </div> </div> </div> <div id="LIST" data-sap-ui-type="sap.m.List" data-no-data-text="NO DATA" data-show-no-data="true" data-select="handleInboxListSelect" data-mode="SingleSelectMaster" data-show-seperators="sap.m.ListSeparators.Inner" data-items="{sampleModel>/results}"> <!-- <div id="LIST" data-sap-ui-type="sap.m.List" data-no-data-text="NO DATA" data-show-no-data="true" data-select="handleInboxListSelect" data-mode="SingleSelectMaster" data-show-seperators="sap.m.ListSeparators.Inner" data-items="{sampleModel>/results}"> --> <div data-sap-ui-aggregation="items"> <div data-sap-ui-type="sap.m.ObjectListItem" data-title="{sampleModel>comp_name}" data-type="{sampleModel>/inboxListItemType}" data-number="{sampleModel>amt}" data-number-unit="{sampleModel>amt_unit}"> <div data-sap-ui-aggregation="attributes"> <div data-sap-ui-type="sap.m.ObjectAttribute" data-text="{sampleModel>inv_no}" data-index="1"></div> <div data-sap-ui-type="sap.m.ObjectAttribute" data-text="{sampleModel>acc_asgmt}" data-index="2"></div> </div> <div data-sap-ui-aggregation="firstStatus"> <div data-sap-ui-type="sap.m.ObjectStatus" data-text="{sampleModel>comp_code}"></div> </div> </div> </div> </div> <div data-sap-ui-type="sap.m.HBox" data-height="3em" data-justify-content="Center" data-align-items="Center"> <div data-sap-ui-type="sap.m.BusyIndicator" id="busyIndicator" data-visible="false" data-text="Items loading"></div> </div> </div> <div data-sap-ui-aggregation="footer"> <div data-sap-ui-type="sap.m.Bar" data-translucent="true" data-enable-flex-box="true"> <div data-sap-ui-aggregation="contentLeft"> <div data-sap-ui-type="sap.m.Button" data-icon="sap-icon://action-settings"></div> </div> </div> </div></div></template>
The Detail Page is as below
<template data-controller-name="xxx.controllers.InvoiceDetail"><div data-sap-ui-type="sap.m.Page" id="Detail" data-show-header="true" class="pageStyle"> <div data-sap-ui-aggregation="customHeader"> <div data-sap-ui-type="sap.m.Bar" data-width="100%"> <div data-sap-ui-aggregation="contentMiddle"> <div data-sap-ui-type="sap.m.Label" data-text="Details"></div> </div> </div> </div> <div data-sap-ui-type="sap.m.ObjectHeader" data-title="Pradeep" data-number="{sampleModel>/results/1/amt}" data-number-unit="{sampleModel>/results/1/amt_unit}"> <div data-sap-ui-aggregation="attributes"> <div data-sap-ui-type="sap.m.ObjectAttribute" data-text="{sampleModel>/results/1/inv_no}"></div> </div> </div> <div data-sap-ui-type="sap.me.TabContainer" class="tabContainer"> <div data-sap-ui-aggregation="contentInfo"> <div data-sap-ui-type="sap.m.HBox" class="tabStyle"> <div data-sap-ui-type="sap.m.VBox" class="tabStyle"> <div data-sap-ui-type="sap.m.Label" data-text="Test Item 2 Code :"></div> <div data-sap-ui-type="sap.m.Label" data-text="Test Item 2 Name :"></div> <div data-sap-ui-type="sap.m.Label" data-text="Test Item 3 :"></div> </div> <div data-sap-ui-type="sap.m.VBox"> <div data-sap-ui-type="sap.m.Label" data-text="{sampleModel>/results/1/comp_code}"></div> <div data-sap-ui-type="sap.m.Label" data-text="{sampleModel>/results/1/comp_name}"></div> <div data-sap-ui-type="sap.m.Label" data-text="Pradeep"></div> </div> </div> </div> <div data-sap-ui-aggregation="contentAttachments" class="tabStyle"> <div data-sap-ui-type="sap.m.VBox" class="tabStyle"> <div data-sap-ui-type="sap.m.Label" data-text="Attachment detail"></div> </div> </div> </div> <div data-sap-ui-type="sap.m.List" id="TableItems" data-inset="true" data-show-unread="false" data-header-text="Invoice Details" data-footer-text="End of Invoice Details" data-items="{sampleModel>/results/1/info}"> <div data-sap-ui-aggregation="columns"> <div data-sap-ui-type="sap.m.Column"> <div data-sap-ui-aggregation="header"> <div data-sap-ui-type="sap.m.Label" data-text="Test Column 1"></div> </div> </div> <div data-sap-ui-type="sap.m.Column"> <div data-sap-ui-aggregation="header"> <div data-sap-ui-type="sap.m.Label" data-text="Test Column 2"></div> </div> </div> <div data-sap-ui-type="sap.m.Column"> <div data-sap-ui-aggregation="header"> <div data-sap-ui-type="sap.m.Label" data-text="Test Column 3"></div> </div> </div> <div data-sap-ui-type="sap.m.Column"> <div data-sap-ui-aggregation="header"> <div data-sap-ui-type="sap.m.Label" data-text="Test Column 4"></div> </div> </div> </div> <div data-sap-ui-type="sap.m.ColumnListItem"> <div data-sap-ui-type="sap.m.Label" data-text="{sampleModel>test_item1}"></div> <div data-sap-ui-type="sap.m.Label" data-text="{sampleModel>test_item2}"></div> <div data-sap-ui-type="sap.m.Label" data-text="{sampleModel>test_item3}"></div> <div data-sap-ui-type="sap.m.Label" data-text="{path:'sampleModel>amt', formatter:'xxx.Formatter.formatColorOfAmt'}"></div> </div> </div> <div data-sap-ui-aggregation="footer"> <div data-sap-ui-type="sap.m.Bar" data-translucent="true" data-enable-flex-box="true"> <div data-sap-ui-aggregation="contentRight"> <div data-sap-ui-type="sap.m.Button" data-type="Accept" data-text="Approve" data-tap="openAcceptDialog"></div> <div data-sap-ui-type="sap.m.Button" data-type="Reject" data-text="Reject" data-tap="openRejectDialog"></div> </div> </div> </div></div></template>
The main issue i am facing is on List Select in the Master Controller
handleInboxListSelect : function(evt) { var item = evt.getParameter("listItem"); var oPath = item.oBindingContexts.inv_ent.sPath; // InvoiceDetail // this.getView().oParent.oParent.byId("SplitApp").toDetail(sap.ui.htmlview("", "xxx.Detail")); var bus = sap.ui.getCore().getEventBus(); bus.publish("nav", "toDetail", { id : "xxx.Detail", }); var bus = sap.ui.getCore().getEventBus(); bus.publish("app", "RefreshDetails", { data : { path : oPath } }); },The issue i am facing is how to send the bindingContexts to the Detail page ..
Below is the method that is called for "RefreshDetails" Nav function in Detail.controller.js
_refresh : function(channelId, eventId, data) { if (data && data.path) { this.getView().setBindingContext(data.path); this.getView().byId("P2C-InvoiceDetail").scrollTo(0); } },
IF i do item.getBindingContexts() .. it returns undefined.
Please help