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