Skip to Content
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

3 Comments
You must be Logged on to comment or reply to a post.
  • 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

    • 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.

        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