Skip to Content
Technical Articles
Author's profile photo Sven Schuberth

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

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Dennis Seah
      Dennis Seah

      HI Sven

      I believe you have a missing statement in your code 🙂

       

          	oRm.write("<div");
              oRm.writeControlData(oControl);
              oRm.addStyle("background", oControl.getBgColor());
              oRm.writeStyles();
          	oRm.write(">"); // this is missing

       

      Best Regards

      Dennis

      Author's profile photo Sven Schuberth
      Sven Schuberth
      Blog Post Author

      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

      Author's profile photo Dennis Seah
      Dennis Seah

      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.

      sap.ui.define(["/sap/m/GenericTile"], function(GenericTile) {
        GenericTile.extend("GenericTile2", {
          metadata: {
            properties: {
              "bgColor":  "sap.ui.core.CSSColor"
            }
          },
          renderer: {},
          onAfterRendering: function() {
            GenericTile.prototype.onAfterRendering &&
              GenericTile.prototype.onAfterRendering.apply(this, arguments);
            if (this.getBgColor()) {
              this.$().css("background", this.getBgColor());
            }
          }
         });
      });
      

       

      example: https://jsbin.com/widutiv/edit?html,js,output

       

      Thanks

      Dennis