Root view
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="partydatamanagement.Root" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:tnt="sap.tnt" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" height="100%" ><SplitApp id="partySplitApp" initialDetail="PartyDataDetail" initialMaster="PartyDataMaster" orientationChange="onOrientationChange"> <detailPages> <Page id="PartyDataDetail" title="Party Master Data Management" class="sapUiStdPage"> <headerContent> <Button text="User" type="Transparent" press="handleUserNamePress"/> </headerContent> <Panel width="auto" class="sapUiResponsiveMargin"> <VBox class="sapUiSmallMargin"> <f:SimpleForm id="idPartyAddress" layout="ResponsiveGridLayout" labelSpanXL="4" labelSpanL="4" labelSpanM="4" emptySpanXL="0" emptySpanL="0" emptySpanM="0" columnsXL="3" columnsL="2" columnsM="2"> <f:content> <core:Title text="{partyJson>Name}" /> <Label text="Name" /> <Text text="{Name}" /> <Label text="Address" /> <Text text="{partyJson>Address}" /> <Label text="ZIP Code/City" /> <Text text="{ZIPCode} {City}" /> <Label text="Country" /> <Text text="{Country}" /> <core:Title text="" /> <Label text="Email" /> <Text text="{EMail}" /> <Label text="Phone" /> <Text text="{Tel}" /> <Label text="Mobile" /> <Text text="{partyJson>Mobile}" /> </f:content> </f:SimpleForm> </VBox> </Panel> <content> <IconTabBar id="idIconTabBarMulti" expanded="{device>/isNoPhone}" class="sapUiResponsiveContentPadding"> <items> <IconTabFilter icon="sap-icon://home"> <VBox class="sapUiSmallMargin"> <f:SimpleForm id="generalForm" maxContainerCols="3" editable="false" layout="ResponsiveGridLayout" title="Address" labelSpanXL="4" labelSpanL="4" labelSpanM="4" emptySpanXL="0" emptySpanL="0" emptySpanM="0" columnsXL="3" columnsL="2" columnsM="2"> <f:content> <core:Title text="General" /> <Label text="Title" /> <Text text="{partyTitle}" /> <Label text="First Name" /> <Text text="{partyJson>Name}" /> <Label text="Middle Name" /> <Text text="{partyMiddleName}" /> <Label text="Last Name" /> <Text text="{partyLastName}" /> <core:Title text=" " /> <Label text="Id. Number" /> <Text text="{partyJson>Id}" /> <Label text="ALternate Id. Number" /> <Text text="{partyAltId}" /> <Label text="Tax Reg. Number" /> <Text text="{partyTaxRegNumber}" /> <core:Title text="Commnunication" /> <Label text="Address Line 1" /> <Text text="{partyJson>Address}" /> <Label text="Address Line 2" /> <Text text="{partyAddressLine2}" /> <Label text="City" /> <Text text="{partyCity}" /> <Label text="State" /> <Text text="{partyState}" /> <Label text="Counttry" /> <Text text="{partyCountry}" /> <Label text="PIN Code" /> <Text text="{partyPinCode}" /> <core:Title text=" " /> <Label text="Phone" /> <Text text="{partyPhone}" /> <Label text="Mobile Phone" /> <Text text="{partyJson>Mobile}" /> <Label text="Email" /> <Text text="{partyEmail}" /> </f:content> </f:SimpleForm> </VBox> </IconTabFilter> <IconTabFilter icon="sap-icon://official-service" > <Table id="idBankDetailsTable" inset="false" items="{ path: '/ProductCollection', sorter: { path: 'Name' } }"> <headerToolbar> <Toolbar> <Title text="Bank Accounts" level="H2"/> </Toolbar> </headerToolbar> <columns> <Column width="12em"> <Text text="S.No" /> </Column> <Column minScreenWidth="Tablet" demandPopin="true"> <Text text="Account Type" /> </Column> <Column minScreenWidth="Tablet" demandPopin="true" hAlign="Right"> <Text text="Account Number" /> </Column> <Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center"> <Text text="Bank Name" /> </Column> <Column hAlign="Right"> <Text text="Branch" /> </Column> <Column hAlign="Right"> <Text text="Country" /> </Column> <Column hAlign="Right"> <Text text="Bank Key" /> </Column> </columns> <items> <ColumnListItem> <cells> <!-- contents of table go here --> </cells> </ColumnListItem> </items> </Table> </IconTabFilter> <IconTabFilter icon="sap-icon://history" > <Table id="orderDetails" inset="false" items="{ path: '/ProductCollection', sorter: { path: 'Name' } }"> <headerToolbar> <Toolbar> <Title text="Bank Accounts" level="H2"/> </Toolbar> </headerToolbar> <columns> <Column width="12em"> <Text text="S.No" /> </Column> <Column minScreenWidth="Tablet" demandPopin="true"> <Text text="Org. Unit" /> </Column> <Column minScreenWidth="Tablet" demandPopin="true" hAlign="Right"> <Text text="Txn. Type" /> </Column> <Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center"> <Text text="Order ID" /> </Column> <Column hAlign="Right"> <Text text="Order Status" /> </Column> <Column hAlign="Right"> <Text text="Out Standing Amt." /> </Column> <Column hAlign="Right"> <Text text="Due Date" /> </Column> </columns> <items> <ColumnListItem> <cells> <!-- contents of table goes here --> </cells> </ColumnListItem> </items> </Table> </IconTabFilter> </items> </IconTabBar> </content> <footer> <Toolbar> <ToolbarSpacer/> <Button text="New" /> <Button text="Edit" /> <Button text="Fav" /> </Toolbar> </footer> </Page> </detailPages> <masterPages> <Page id="PartyDataMaster" title="Parties" icon="sap-icon://action" class="sapUiStdPage"> <subHeader> <Toolbar> <SearchField liveChange="onSearch" width="100%" /> </Toolbar> </subHeader> <Button text="All" press="onPressAll" width="50%"/> <Button text="Favourites" press="onPressFav" width="50%"/> <content> <List id="partyList" items="{partyJson>/rootNode}" selectionChange="onSelectionChange" includeItemInSelection="true"> <items> <ObjectListItem title="{partyJson>Name}" intro="{partyJson>Address}" number="{partyJson>Mobile}" type="Navigation" press="onItemPress"/> </items> </List> </content> <footer> <Toolbar> <ToolbarSpacer/> <Button icon="sap-icon://filter" press="onFilter" /> <Button icon="sap-icon://sort" press="onSort" /> <Button icon="sap-icon://group-2" press="onGroup"/> </Toolbar> </footer> </Page> </masterPages> </SplitApp></core:View>Root Controller
sap.ui.controller("partydatamanagement.Root",{ onInit: function() { //debugger; var evtBus= sap.ui.getCore().getEventBus(); evtBus.subscribe("channel","event1",this.handler1); }, handler1: function(channel,event,data) { debugger; //alert ("inside handler function"); sap.ui.getCore().byId("PartyDataDetail").setBindingContext(data.bindData,"partyJson"); //PartyDataDetail is the id of detail page. console.log(data); }, onItemPress: function(oEvt){ //debugger; var evtBus= sap.ui.getCore().getEventBus(); evtBus.publish("channel","event1",{bindData:oEvt.getSource().getBindingContext("partyJson")}); }, onSort: function(oEvt){ var list = this.getView().byId("partyList"); var binding = list.getBinding("items"); var oSorter = new sap.ui.model.Sorter("Name", true); binding.sort([oSorter]); }, onSearch : function (oEvt) { var aFilters = []; var sQuery = oEvt.getSource().getValue(); if (sQuery && sQuery.length > 0) { var filter = new sap.ui.model.Filter("Name", sap.ui.model.FilterOperator.Contains, sQuery); aFilters.push(filter); } // update list binding var list = this.getView().byId("partyList"); var binding = list.getBinding("items"); binding.filter(aFilters, "Application"); }, onBeforeRendering: function() { $.ajax({ type: "GET", url : "http://localhost:8080/rest/customers", error: function (jqXHR, textStatus, errorThrown) { }, success: function (data, textStatus, jqXHR){ ajaxDetails = {rootNode : []}; for(var i=0; i < data.length; i++){ ajaxDetails.rootNode.push({ Id : data[i].id, Name: data[i].name, Address: data[i].address1, Mobile: data[i].mobile, // length: data[i].length, }); } var partyJsonModel = new sap.ui.model.json.JSONModel(); partyJsonModel.setData(ajaxDetails); sap.ui.getCore().setModel(partyJsonModel,"partyJson"); //setting json model in core so that it can be used in other views } }); },
});