Empty Space in Page Without Throwing Any Errors

Question

I am trying to display few tiles in a tile container which fetches data from a dummy JSON file. I have coded exactly shown in this sample. But my page appears empty. Also it doesn't show any errors in the console. Below are the snippets of my code.

View1.view.xml

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" displayBlock="true">
  <Page showHeader="false" enableScrolling="false">
    <mvc:XMLView viewName="AdminMovie.view.TileContainer"/>
    <footer>
      <OverflowToolbar id="otbFooter">
        <ToolbarSpacer />
        <Button type="Accept" text="Add New Movie" />
      </OverflowToolbar>
    </footer>
  </Page>
</mvc:View>

TileContailner.view.xml

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m">
  <App>
    <Page showHeader="false" enableScrolling="false" title="Stark">
      <TileContainer id="container"
        tileDelete=".handleTileDelete"
        tiles="{/MovieCollection}"
      >
        <HBox>
          <StandardTile
            icon="{icon}"
            type="{type}"
            number="{number}"
            numberUnit="{numberUnit}"
            title="{title}"
            info="{info}"
            infoState="{infoState}"
          />
        </HBox>
      </TileContainer>
      <footer>
        <Toolbar>
          <ToolbarSpacer />
          <Button text="Edit" press=".handleEditPress" />
          <ToolbarSpacer />
        </Toolbar>
      </footer>
    </Page>
  </App>
</mvc:View>

Answer 1

Possible Causes

• The root view is missing a root control or the height of the parent HTML elements is not set to 100%. Child elements cannot be rendered in full size.
• If the root view (App.view.xml) itself is not loading, see my other answer at "App.view doesn't appear to be loading" - SAP Community.

Resolution

For Top-Level or Standalone Applications

Add sap.m.App (or sap.m.SplitApp in case of a master-detail layout) once in the entire application project to your root view:

<!-- Root view (typically "App.view.xml") -->
<mvc:View controllerName="..."
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  displayBlock="true"
>
  <App id="topLevelApp" isTopLevel="true">
    <!-- Use App with isTopLevel="true" (default) only once. Nowhere else! -->
    <!-- ... -->
  </App>
</mvc:View>

Root controls such as sap.m.App, sap.m.SplitApp, and sap.m.Shell write:

• a bunch of properties into the header of the HTML document e.g. the viewport meta tag via sap/ui/util/Mobile.init.
• height: 100% to all its parent elements by default unless isTopLevel is disabled.

The reason why the some of the Demo Kit samples work, is because either a root control such as the sap.m.App is already added in index.html or the direct parent elements of the page such as the View have included height 100%.

For Nested or Embedded Applications

If you're developing an app that is to be rendered within an an existing app, keep in mind that the top-level app might come already with one root control (sap.m.App with isTopLevel enabled or sap.m.SplitApp) in its root view. I.e. in this case:

1. Add height="100%" to the View node of the root view definition, and
2. Either use <App isTopLevel="false"> or replace the <App> with <NavContainer>.

<!-- Root view (typically "App.view.xml") -->
<mvc:View controllerName="..."
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  displayBlock="true"
  height="100%"
><!-- ↑ Set height="100%" -->
  <App isTopLevel="false"><!-- or:
  <NavContainer> if the UI5 version is below 1.91 -->
    <pages>
      <!-- ... -->
    </pages><!--
  </NavContainer> -->
  </App>
</mvc:View>

Otherwise, not using the isTopLevel="false" will cause the footer area of the embedded app to be pushed out of the viewport. This is a common issue e.g. for the views that are intended to extend the standard SAP Fiori app "My Inbox" since the app already contains one root control as a top-level UI element. Refer to SAP KBA #3218822.

Answer 2

⚠️ For other readers: if you're not using a TileContainer, see my previous answer for general solutions → https://stackoverflow.com/a/50951902/5846045

Causes for empty TileContainer

Unexpected child control

Besides the missing root control, the <TileContainer> in your code contains a list of HBoxes.

<TileContainer>
  <HBox> <!-- ❌ Wrong aggregation child! -->
    <StandardTile />

The default aggregation of TileContainer is, however, a control that is derived from sap.m.Tile.



Hence, you should be getting the following error message in the browser console:

Uncaught Error: "Element sap.m.HBox#__hbox1" is not valid for aggregation "tiles" of Element sap.m.TileContainer#__xmlview1--container

Please, remove the <HBox> as the binding template:

<TileContainer>
  <StandardTile /> <!-- ✔️ -->

TileContainer contains only one Tile

There was a bug (issue #1813) in the TileContainer which failed making the aggregation visible in Chrome (works in Firefox) if there was only a single Tile. The fix is delivered with OpenUI5 version 1.56+, 1.54.2+, 1.52.8+, 1.50.9+, 1.48.19+, and 1.46.2+.