1

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.controller.js

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";

  return Controller.extend("AdminMovie.controller.View1", {

  });
});

View1.view.xml

<mvc:View
  displayBlock="true" 
  controllerName="AdminMovie.controller.View1"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
>
  <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:core="sap.ui.core"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  controllerName="AdminMovie.controller.TileContainer"
>
  <App>
    <pages>
      <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>
        <OverflowToolbar>
          <Toolbar>
            <ToolbarSpacer/>
            <Button
              text="Edit"
              press=".handleEditPress"
            />
            <ToolbarSpacer/>
          </Toolbar>
        </OverflowToolbar>
      </Page>
    </pages>
  </App>
</mvc:View>

TileContainer.js

sap.ui.define([
  "jquery.sap.global",
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel"
], function(jQuery, Controller, JSONModel) {
  "use strict";

  return Controller.extend("AdminMovie.controller.TileContainer", {
    onInit: function(evt) {
      // set mock model
      var sPath = jQuery.sap.getModulePath("AdminMovie", "/MovieCollection.json");
      var oModel = new JSONModel(sPath);
      this.getView().setModel(oModel);
    },

    handleEditPress: function(evt) {
      var oTileContainer = this.byId("container");
      var newValue = !oTileContainer.getEditable();
      oTileContainer.setEditable(newValue);
      evt.getSource().setText(newValue ? "Done" : "Edit");
    },

    handleTileDelete: function(evt) {
      var tile = evt.getParameter("tile");
      evt.getSource().removeTile(tile);
    }

  });
});
0

2 Answers 2

3

Cause

The root view is missing a root control or the height of the parent HTML elements is not set to 100%. The child elements cannot be rendered in full size.

Resolution

For Standalone or Top-Level 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"> <!-- Not in any other views! -->
    <pages>
      <!-- ... -->
    </pages>
  </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). src

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.

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.

0
1

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

  3. TileContainer contains only one Tile
  4. 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+.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.