Generic Tile with colored Background

[sven_schuberth2]

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