Hi,
we extended the original sap.m.StandardTile class to use tiles with background images:
jQuery.sap.declare("my.namepace.BackgroundTile");
sap.m.StandardTile.extend("my.namespace.BackgroundTile", { metadata: { properties: { "backgroundImage" : "sap.ui.core.uri" } }, renderer: "sap.m.StandardTileRenderer", onAfterRendering: function(oEvent) { // !!! important: we have to call the original onAfterRendering method to get the tiles placed properly !!! sap.m.StandardTile.prototype.onAfterRendering.apply(this, arguments); var oTile = oEvent.srcControl; // get dom element and add style commands to display an background-image var oDOMEl = document.getElementById(oTile.getId()); if (oDOMEl && this.getBackgroundImage()) { oDOMEl.style.backgroundImage="url('" + this.getBackgroundImage() + "')"; oDOMEl.style.backgroundRepeat="no-repeat"; oDOMEl.style.backgroundSize="contain"; // !!! CSS3 !!! } }, init: function() { sap.m.StandardTile.prototype.init.apply(this, arguments); }
});
});And here how to use it:
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:my="my.namespace"><Page title="{i18n>appTitle}" showHeader="false"> <content><TileContainer tiles="{/tiles}" editable="false" visible="true" height="500px" > <my:BackgroundTile backgroundImage="{/bgImage}" type="None" title="{main>Name}" /> </TileContainer> </content></Page></core:View>
See also: HTML DOM Style object
Best
Frank
Message was edited by: Frank Fleige - "how to use it" section added