Search code examples
javascriptvisibleinvisiblesapui5

OpenUI5 controls not visible

I am trying to get a minimal example for unified split containers to work, but the following screenshot describes my problem pretty well:

As you can see, the buttons are rendered, but invisible for some reason. Could you help me find the reason?

This is my index.html file:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="UTF-8">
  <title>App 0001</title>
  <script
      id="sap-ui-bootstrap"
      src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_bluecrystal"
      data-sap-ui-libs="sap.m, sap.ui.commons, sap.ui.core, sap.ui.table"
      data-sap-ui-resourceroots='{ "x4": "/example4/x4" }' >
  </script>
  <script>
    //var myView = sap.ui.jsview("x4")
    var myView = sap.ui.xmlview("x4")
    myView.placeAt('content');
  </script>
</head>
<body class="sapUiBody">
  <div id="content"></div>
</body>
</html>

This is the view (x4.view.xml) as per the show code page on openui5 explored

<mvc:View
  controllerName="x4"
  xmlns:u="sap.ui.unified"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  class="fullHeight">
    <u:SplitContainer
      id="mySplitContainer"
      showSecondaryContent="true">
      <u:secondaryContent>
        <Text text="Hello World!" />
      </u:secondaryContent>
      <u:content>
        <Button text="Toggle Secondary Content" />
        <Button text="Switch SplitContainer Orientation" />
      </u:content>
    </u:SplitContainer>
</mvc:View>

and this the (minimal) x4.controller.js

sap.ui.controller("x4", {});

The Firebug error console looks clean, and this error seems to be browser-independent, as with IE we observe the same behaviour.

Solution

  • Don't add the view directly to the div. Wrap it within an App .

    <script>
        var oApp = new sap.m.App();
        var myView = sap.ui.xmlview("x4")
        oApp.addPage(myView);
        oApp.placeAt('content');
</script>