csssapui5

Empty Space in Page Without Throwing Any Errors

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>
Solution

  • ⚠️ 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

    1. Unexpected child control

      2. 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.

      UI5 TileContainer aggregation

      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 /> <!-- ✔️ -->

    2. TileContainer contains only one Tile

      3. 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+.