I have Master Detail SplitApp. In master I have a list, when list is selected in the Detail screen I want to show different Views.
Here is my code:
I am not using component.js or routing or app view or controller
Index.html
<script> sap.ui.localResources("myaptpoc"); var app = new sap.m.App({initialPage:"idMain1"}); var page = sap.ui.view({id:"idMain1", viewName:"myaptpoc.Main", type:sap.ui.core.mvc.ViewType.XML}); app.addPage(page); app.placeAt("content"); </script>
Page1.view.xml
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:html="http://www.w3.org/1999/xhtml"> <Page id="page2" title="Details Page" showNavButton="" showFooter=""> <content> <Panel> <l:VerticalLayout class="sapUiContentPadding" width="100%"> <l:content> <core:HTML content='page1'> </core:HTML> </l:content> </l:VerticalLayout> </Panel> </content> <footer> </footer> </Page></core:View>
Main.controller.js -> myListSelected Event
myListSelected: function(oEvent){ // alert("**Event happened for itempress ", oEvent.getParameters()); var source =oEvent.getSource(); var allTaskModel =source.getModel("CategoryModel"); var getSelectedContext=source.getBindingContext('CategoryModel'); var selectedNode = allTaskModel.getProperty(getSelectedContext.getPath()); console.log("selected node: "+selectedNode.id); //alert(selectedNode.text + " " +selectedNode.id ); if(selectedNode.id=='buysell'){ } },
Main.view.xml
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" controllerName="myaptpoc.Main" xmlns:html="http://www.w3.org/1999/xhtml"> <SplitApp> <masterPages> <Page id="page1" title="myCommunity"> <content> <Panel> <VBox> <List id="listId" items="{CategoryModel>/categories}"> <StandardListItem type="Active" tap="myListSelected" title="{CategoryModel>text}" /> </List> </VBox> </Panel> </content> <footer> </footer> </Page> </masterPages> <detailPages> <Page id="page2" title="Details Page" showNavButton="" showFooter=""> <content> <Panel> <l:VerticalLayout class="sapUiContentPadding" width="100%"> <l:content> <core:HTML content='<div class="content"><h4>Lorem ipsum</h4><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div><a target="_blank" href="http://en.wikipedia.org/wiki/Lorem_ipsum">Learn more about Lorem Ipsum ...</a></div>'> </core:HTML> </l:content> </l:VerticalLayout> </Panel> </content> <footer> </footer> </Page> </detailPages> </SplitApp></core:View>