Technical Articles
Generic Tile with colored Background
Abstract
SAPUI5 library provides many controls but sometimes we may need to have our own custom controls which can be reusable. Here, I am trying to explain how we can create a custom Tile with colored background which can be reused in our application in different pages like a standard control.
What we want at the end?
We want a control, where we can handle background color from outside (oData).
How to achieve this?
sap.ui.define(
["sap/m/GenericTile"],
function(Control) {
"use strict";
return Control.extend("ssm.controls.ColorTile", {
metadata: {
properties: {
"bgColor": {"type": "sap.ui.core.CSSColor", "defaultValue": "#ffffff"}
}
},
renderer : function(oRm,oControl){
oRm.write("<div");
oRm.writeControlData(oControl);
oRm.addStyle("background", oControl.getBgColor());
oRm.writeStyles();
//calling the original Renderer
sap.m.GenericTileRenderer.render(oRm,oControl);
oRm.write("</div>");
}
});
}
);
Here we have one new property bgColor with type declaration and default value white defined in metadata section. We override renderer function with a new <div>, where we place our color as style.
How to consume in XML view?
Home.view.xml
<mvc:View
controllerName="ssm.controller.Home"
height="100%"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:c="ssm.controls"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Colored Tile">
<content>
<c:ColorTile
header="Test"
subheader="colored Tile"
state="Loaded"
scope="Display"
class="sapUiTinyMarginBegin sapUiTinyMarginTop"
sizeBehavior=""
bgColor="#FFA500">
<TileContent unit="€" footer="...">
<NumericContent
withMargin="false"
value="45"
valueColor=""
indicator=""
scale=""/>
</TileContent>
</c:ColorTile>
</content>
</Page>
</mvc:View>
There we have our new property. Now it can be filled manually or bound to oModel.
Have fun!
Sven
HI Sven
I believe you have a missing statement in your code 🙂
Best Regards
Dennis
Hi Dennis,
thanks for your hint.
But it's not necessary. If I write the closing bracket, it looks like this...
I think, WriteStyles or GenericTileRenderer brings it's own closing bracket.
kind regards - Sven
Yes, you are right.
Just an observation. I would not wrap a DIV over the control. Instead I would like to set the background of the control like this.
example: https://jsbin.com/widutiv/edit?html,js,output
Thanks
Dennis