SAPUI5 multiple sap.m.TileContainer in JS view

I have a single page app written in SAPUI5 using JS views. I want to create a "Dashboard" page and put some tiles on it. Therefore I am creating a "sap.m.TileContainer" in the "createContent" function of my view.js-file.

What I need to implement is to have two separate TileConatiner because I have important tiles at the top and less important ones at the bottom. But no matter what I do e.g. putting the two TileContainers in a MatrixLayout, HorizontalLayout or as "content" into a sap.m.page it is no longer shown. One TileContainer is shown when I just return this single instance directly without any componet surrounding it.

Can anyone help me out here please? Following code works fine:

    createContent : function(oController) {

    var tileContainer = new sap.m.TileContainer({
        tiles : [ 
            new sap.m.StandardTile({
            icon : "sap-icon://play",
            title : "Important Tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://pause",
            title : "ANOTHER Important Tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://timesheet",
            title : "Third important tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://number-sign",
            title : "UNIMPORTANT ONE",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://locate-me",
            title : "UNIMPORTANT TWO",
            press : function() {
                oController.nav.to("AfoStart");
            }
        })

         ],

    });

    return tileContainer;
}

This code doesnt work:

    createContent : function(oController) {

    var tileContainerTop = new sap.m.TileContainer({
        tiles : [ 
            new sap.m.StandardTile({
            icon : "sap-icon://play",
            title : "Important Tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://pause",
            title : "Another important Tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://timesheet",
            title : "Third important tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }),

         ],

    });

    var tileContainerBottom = new sap.m.TileContainer({
        tiles : [ 
            new sap.m.StandardTile({
            icon : "sap-icon://play",
            title : "UNIMPORTANT ONE",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://pause",
            title : "UNIMPORTANT TWO",
            press : function() {
                oController.nav.to("AfoStart");
            }
        })
         ],

    });     

    var page = new sap.m.Page("myPage", {

        title: "Dashboard",
        content: [tileContainerTop, tileContainerBottom]

    });

    // OR create MatrixLayout here...doenst work
    // OR create HorizontalLayout here...doesnt work

    return page;
}

回答1:

you need to set enableScrolling of your page to false. Because then the page will take 100% of the place. If you do not do it the page will try to be as big as its content.

A tile container is by default as big as its parent so both the page and the containers will have a height of 0.

Here i placed 2 Tile containers below each other so they take half of the screen:

http://jsbin.com/disalulekezo/1/

Best regards

回答2:

You have to set enableScrolling of your page to false and adjust the height of TileContainer both. Set the height of both container as 50-50% , both the tiles will be visible on your page. Only setting enableScrolling to false will not work.