Rounded Tile in UI5

Rounded tiles in UI5

by Gabriel de Souza

HTML

<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>

<body class="sapUiBody" role="application">
<div id="content"></div>
</body>

CSS

.roundedTile {
	position: absolute;
	top: 0;
	left: 0;
	border: 1px solid #dddddd;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	background-color: #ffffff;
	display: inline-block;
	transition-property: transform3d;
	transition-duration: 0.2s;
	margin: 0.5rem;
	border-radius: 110px;
	width: 12rem;
	height: 12rem;
    outline: 0;
}

.roundedTileContent {
	overflow: hidden;
	width: 12rem;
	height: 12rem;
}

.roundedTileTopRow {
	height: 7rem;
	padding: 1rem 1rem 0 1rem;
	margin-bottom: 1rem;
}

.roundedTileIcon {
	width: 5rem !important;
	height: 5rem !important;
	line-height: 5rem !important;
	font-size: 5rem !important;
	padding-left: 40px !important;
	padding-top: 30px !important;
}

.roundedTileBottomRow {
	height: 2rem;
	padding: 0 1rem 1rem 1rem;
}

.roundedTileTitle {
	line-height: 0.8rem;
	vertical-align: top;
	text-align: center;
	font-size: 11px;
	height: 15px;
	width: 100%;
	overflow: hidden;
	word-break: break-word;
}

JavaScript

/**
 * @author Jonathan Jouret aka Dafooz
 * @description Control creating rounded tiles
 */

// Register the control
jQuery.sap.declare("RoundedTile");
// Load the standard tile as this control inherits from it
jQuery.sap.require("sap.m.StandardTile");
// Extend the standard tile controller to create this control.
// The properties added are: the icon color, the background color and the border color
sap.m.StandardTile.extend("RoundedTile", {
	metadata : {
		properties : {
			// Icon color property with default value to standard UI5 blue
			iconColor : {
				type : "string",
				defaultValue : "#007cc0"
			},
			// Background color property with default value to white
			bgColor : {
				type : "string",
				defaultValue : "rgb(255, 255, 255)"
			},
			// Border color property with default value to standard UI5 blue
			borderColor : {
				type : "string",
				defaultValue : "#007cc0"
			}
		}
	},
    
    renderer : function(rm, oControl) {
        rm.write("<div tabindex=\"0\""); // start div representing the tile 
		rm.writeControlData(oControl);
		rm.addClass("roundedTile");
		rm.addClass("sapMPointer");
		rm.writeClasses();
		rm.write(" style=\"border: 1px solid "+oControl.getBorderColor()+"; background-color: "+ oControl.getBgColor() +";\"");
		if (oControl._invisible) {
			rm.addStyle("visibility", "hidden");
			rm.writeStyles();
		}
		var sTooltip = oControl.getTooltip_AsString();
		if (sTooltip) {
			rm.writeAttributeEscaped("title", sTooltip);
		}
		rm.write(">");
		if (oControl.getRemovable()) {
			rm.write("<div id=\"" + oControl.getId() + "-remove\" class=\"sapMTCRemove\"></div>");
		} else {
			rm.write("<div id=\"" + oControl.getId() + "-remove\" class=\"sapMTCNoRemove\"></div>");
		}
		rm.write("<div class=\"roundedTileContent\">");
		
        rm.write("<div"); // Start top row
		rm.addClass("roundedTileTopRow");
		rm.writeClasses();
		rm.write(">");
		if (oControl.getIcon()) { //...