Page content not displayed

Question

I am trying to make a simple SAPUI5 page that has text in its content. But only the header and footer is displayed and not the content. Not able to understand why. Also when i try to emulate it as a phone in Google Chrome even the buttons in footer is not displayed.

Code(index.html):

<!DOCTYPE html>
<html>
<head>
<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" 
    data-sap-ui-libs="sap.m"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8">
<title></title>
</head>

<!-- define an XMLView - normally done in a separate file -->
<script id="view1" type="sapui5/xmlview">
    <mvc:View
height="100%"
xmlns:mvc="sap.ui.core.mvc"
controllerName="my.controller"
xmlns="sap.m">
<Page
title="Centered Title"
class="marginBoxContent"
showNavButton="true" >
<headerContent>
  <Button icon="sap-icon://action" />
</headerContent>
<subHeader>
  <Toolbar>
    <SearchField />
  </Toolbar>
</subHeader>
<content>
  <VBox>
    <Text text="Lorem ipsum dolor st 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. Lorem 
 ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
 labore et dolore magna aliquyam erat" />
  </VBox>
 </content>
 <footer>
  <Toolbar>
    <ToolbarSpacer/>
    <Button text="Accept" type="Accept" />
    <Button text="Reject" type="Reject" />
    <Button text="Edit" />
    <Button text="Delete" />
  </Toolbar>
 </footer>
 </Page>
</mvc:View>
</script>


<script>
    sap.ui.controller("my.controller", {

        onInit : function(){

        }
    });


    var myView = sap.ui.xmlview("myView", {viewContent:jQuery('#view1').html()}); // 
    myView.placeAt('content');


</script>

</head>
<body class='sapUiBody'>
    <div id='content'></div>
</body>
</html>

Please help. Thanks

qmacro qmacro · Accepted Answer · 2014-10-07T16:25:07

If you wrap the sap.m.Page control in an sap.m.App control it should give you what you want.

<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  controllerName="my.controller"
  xmlns="sap.m">
  <App>
    <Page
      title="Centered Title"
      class="marginBoxContent"
      showNavButton="true">
      ...
    </Page>
  </App>
</mvc:View>

You also don't need the height="100%" attribute.

Page content not displayed

1 Answers