sapui5 - Page Is Blank Without Throwing Any Errors

Question

Welcome To Ask or Share your Answers For Others

sapui5 - Page Is Blank Without Throwing Any Errors

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

sapui5 - Page Is Blank 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.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);
    }

  });
});

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-16T23:34:37+0000

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.

Alternatively, without sap.m.App, you could also add the following in index.html and in the root view:

Add 100% height to <html>, and to <div data-sap-ui-component> if it exists.

<html style="height: 100%;">
 <head>
   <!-- ... -->
   <script id="sap-ui-bootstrap" src="..."
     data-sap-ui-modules="sap/ui/core/ComponentSupport"
     data-...>
   </script>
 </head>
 <body id="content" class="sapUiBody">
   <div style="height: 100%;"
     data-sap-ui-component
     data-height="100%"
     data-...>
   </div>
 </body>
</html>

And in the root view:

<mvc:View height="100%" ...>
  <!-- no <App> here -->

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.

Categories

sapui5 - Page Is Blank Without Throwing Any Errors

sapui5 - Page Is Blank Without Throwing Any Errors

View1.controller.js

View1.view.xml

TileContailner.view.xml

TileContainer.js

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags