18058

SAPUI5 multiple sap.m.TileContainer in JS view

Question:

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; }

Answer1:

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:

<a href="http://jsbin.com/disalulekezo/1/" rel="nofollow">http://jsbin.com/disalulekezo/1/</a>

Best regards

Answer2:

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

Recommend

  • Is there a better alternative to sap.ui.commons.layout.MatrixLayout?
  • How to align the layouts QHBoxLayout and QVBoxLayout on pyqt4?
  • Using PyQt4, how do you set a mouseMoveEvent to only work inside of a QWidget in a QMainWindow but n
  • How to use QPainter in a QWidget in PyQt4
  • C# String Filepath Question
  • How to use Try-with-resources with if statement?
  • Is there a list of URL schemes?
  • rxjs: how to order responses via Observables
  • Why does regasm /regfile seem incomplete?
  • setImageData fails in iOS 8.3
  • Render a treeview using a for-loop
  • Aspect not executed in Spring
  • How to read xlsx file in an android application?
  • Git subtree post hook
  • How do I find out what tables have data in a file in SQL Server?
  • Get count of created entries for each day
  • Function calling incorrect values
  • Should I optimize around reads or CPU time in Google App Engine
  • Change the font color of disabled input text box?
  • Using : for multiple slicing in list or numpy array
  • Group variable in cobol
  • Implementation of RTTI using typeid
  • CoreData basics – to-many relationship array data
  • Emacs lua-mode issue: (void-function interactively-called-p)
  • How can I prevent the need to copy strings passed to a avr-gcc C++ constructor?
  • Issue with routerLink directive
  • How to pass solution folder as parameter in command line arguments (for debug)?
  • Jquery Mobile pageLoading() Method how does it work?
  • Redshift Querying: error xx000 disk full redshift
  • DIV instruction jumping to random location?
  • Diff between two dataframes in pandas
  • Moving Android View and preventing onDraw to be called over and over again
  • xtable package: Skipping some rows in the output
  • Is there a javascript serializer for JSON.Net?
  • Adding a button at the bottom of a table view
  • Align navbar back button on right side
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API