Hi Krishna,
I haven't found such a control, but it is not a big deal to create it.
Just in 15 minutes...
eu.anikeev.sapui5.TabButtonSize = { small: "small", standard: "standard", large: "large"
};
sap.ui.core.Control.extend("eu.anikeev.sapui5.TapButton", {
metadata: { properties: { "id": "string", "visible": { type: "boolean", defaultValue: true }, "size": { type: "string", defaultValue: eu.anikeev.sapui5.TabButtonSize.standard }, "value": { type: "int", defaultValue: 25 }, "color": { type: "string", defaultValue: "red" } } }, renderer: function(oRm, oControl) { // Return immediately if control is invisible if (!oControl.getVisible()) { return; } oRm.write("<div align=\"center\" style=\"margin-left:auto;margin-right:auto;background-color:"); oRm.write(oControl.getColor()); switch (oControl.getSize()){ case eu.anikeev.sapui5.TabButtonSize.small: oRm.write(";font-size:1rem;color:#ffffff;-moz-border-radius:1.5rem;border-radius:1.5rem;width:2rem;height:2rem;border:0.25rem solid #ffffff;box-shadow:0 0.063rem 0.125rem 0 rgba(128,128,128,0.6);padding:0;line-height:2rem;position:block;z-index:0;\">"); break; case eu.anikeev.sapui5.TabButtonSize.large: oRm.write(";font-size:2.6rem;color:#ffffff;-moz-border-radius:3rem;border-radius:3rem;width:4rem;height:4rem;border:0.25rem solid #ffffff;box-shadow:0 0.063rem 0.125rem 0 rgba(128,128,128,0.6);padding:0;line-height:4rem;position:block;z-index:0;\">"); break; default: oRm.write(";font-size:1.5rem;color:#ffffff;-moz-border-radius:2rem;border-radius:2rem;width:3rem;height:3rem;border:0.25rem solid #ffffff;box-shadow:0 0.063rem 0.125rem 0 rgba(128,128,128,0.6);padding:0;line-height:3rem;position:block;z-index:0;\">"); } oRm.write(oControl.getValue()); oRm.write("</div>"); }
});
Index HTML
<!DOCTYPE HTML><html><head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"> </script> <!-- only load the mobile lib "sap.m" and the "sap_mvi" theme --> <script src="eu/anikeev/sapui5/TapButton.js"></script> <script> var oApp = new sap.m.App("mApp", { initialPage:"mainPage" }); var oPage = new sap.m.Page({ id : "mainPage", title: "Inbox", enableScrolling: false }); var oList = new sap.m.List({ id : "mainList", // sap.ui.core.ID inset : false, // boolean visible : true, // boolean mode : sap.m.ListMode.None, // sap.m.ListMode width : '100%', // sap.ui.core.CSSSize showSeparators : sap.m.ListSeparators.All, // sap.m.ListSeparators backgroundDesign : sap.m.BackgroundDesign.Translucent, // sap.m.BackgroundDesign, since 1.14 }); var oColumn = new sap.m.Column({ id : "cln1", // sap.ui.core.ID width: "5rem", hAlign : sap.ui.core.TextAlign.Center, // sap.ui.core.TextAlign vAlign : sap.ui.core.VerticalAlign.Middle, // sap.ui.core.VerticalAlign }); oList.addColumn(oColumn); var oColumn = new sap.m.Column({ id : "cln2", // sap.ui.core.ID width: "100%", hAlign : sap.ui.core.TextAlign.Begin, // sap.ui.core.TextAlign vAlign : sap.ui.core.VerticalAlign.Middle, // sap.ui.core.VerticalAlign }); oList.addColumn(oColumn); var oItem = new sap.m.ColumnListItem({ id : "lstSmall", // sap.ui.core.ID cells : [ new eu.anikeev.sapui5.TapButton("btnRed", { "size": "small", "color": "#ce4d2b", value: 1 }), new sap.ui.core.HTML().setContent("<div><strong>Time Critical</strong></div><div>Less than 1 day remaining</div>") ] // sap.ui.core.Control }); oList.addItem(oItem); var oItem = new sap.m.ColumnListItem({ id : "lstMedium", // sap.ui.core.ID cells : [ new eu.anikeev.sapui5.TapButton("btnYellow", { "color":"#f8b61a", "value":9 }), new sap.ui.core.HTML().setContent("<div><strong>Pending</strong></div><div>Less than 5 days remaining</div>") ] // sap.ui.core.Control }); oList.addItem(oItem); var oItem = new sap.m.ColumnListItem({ id : "lstBig", // sap.ui.core.ID cells : [ new eu.anikeev.sapui5.TapButton("btnGreen", { "size": "large", "color":"#73b746", "value":17 }), new sap.ui.core.HTML().setContent("<div><strong>Time Uncritical</strong></div><div>More than 5 days remaining</div>") ] // sap.ui.core.Control }); oList.addItem(oItem); oPage.addContent(oList); oApp.addPage(oPage); oApp.placeAt("content"); </script></head><body class="sapUiBody" role="application"> <div id="content"></div></body></html>
and a result
Regards
Konstantin