Page Is Blank Without Throwing Any Errors

Your root view is missing a root control such as sap.m.App^API which:

• Writes a bunch of properties into the header of HTML document, e.g. the viewport meta tag,
• Writes height: 100% to all its parent elements.^[src]

Without a root control, the content will be displayed improperly. Hence, adding an <App> should be sufficient in your case:

<!-- root view -->
<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  height="100%"
  displayBlock="true"
  controllerName="..."
>
  <App id="myApp"> <!-- Not in other views! -->
    <!-- content -->
  </App>
</mvc:View>

The reason why the linked sample is working, is that the control sap.m.App was already added in index.html. The samples shown in the Demo Kit, however, often miss index.html in the code page to be shown which can be confusing.

⚠️ If you’re developing an extension UI5 app that will be added to an an existing app, make sure that only one <App> exists in the entire application frame. The standard Fiori app My Inbox which can be extended, for example, comes already with one <App> as a top-level UI element. In that case, do not use <App> in your extension project (I.e. avoid nesting <App>s) but add height="100%" to the <mvc:View> node in the root view as shown below.

---

Without sap.m.App, you could also add the following instead:

1. If you have the control over the HTML document and CSS of the application: apply 100% height to html and its child nodes until the root view’s direct parent.
2. And in the root view, add height="100%" to the View node:

   <mvc:View height="100%" ...>
   <!-- Either no <App/> or <App isTopLevel="false"/> here since SAPUI5 1.91 -->
   

Example: https://embed.plnkr.co/6AJKC0

This will make the content visible too but without the need to use sap.m.App in the root view.