Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
sven_schuberth2
Participant
2,847

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
Labels in this area