<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Custom Tile Content</title>
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-xx-bindingSyntax="complex"
>
</script>
<style>
.customStyle{
width: 50rem;
height: 30rem;
}
</style>
<!-- XML-based view definition -->
<script id="chartView" type="sapui5/xmlview">
<mvc:View
controllerName="CustomTile.Main"
xmlns:l="sap.ui.layout"
xmlns:suite="sap.suite.ui.commons"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
class="viewPadding">
<App>
<pages>
<Page
title="CustomTile Content"
class="marginBoxContent" >
<content>
<CustomTile id="oCustom">
<content>
<VBox>
<HBox>
<suite:HarveyBallMicroChart size="M" total="100" totalScale="Mrd" showTotal="true" showFractions="true" press="press">
<suite:items>
<suite:HarveyBallMicroChartItem fraction="63.5" color="Good" valueScale="Mrd" />
</suite:items>
</suite:HarveyBallMicroChart>
<suite:HarveyBallMicroChart size="S" total="100" totalScale="Mrd" showTotal="true" showFractions="true" press="press">
<suite:items>
<suite:HarveyBallMicroChartItem fraction="63.5" color="Good" fractionScale="Mrd" />
</suite:items>
</suite:HarveyBallMicroChart>
<suite:DeltaMicroChart size="M" press="onDelta" value1="-7" value2="16" title1="May 2014" title2="Apr 2014" displayValue1="-7 Mio" displayValue2="16 Mio" deltaDisplayValue="23 Mio" color="Critical" class="marginTopLeft"/>
</HBox>
<ObjectHeader
title="Power Projector 4713"
number="856.49"
numberUnit="EUR" >
<statuses>
<ObjectStatus
text="Some Damaged"
state="Error" />
<ObjectStatus
text="In Stock"
state="Success" />
</statuses>
<attributes>
<ObjectAttribute text="1467 g" />
<ObjectAttribute text="51 x 42 x 18 cm" />
<ObjectAttribute text="A very powerful projector with special features for Internet usability, USB" />
</attributes>
</ObjectHeader>
<ProgressIndicator
class="sapUiSmallMarginBottom"
percentValue="99"
displayValue="0.99GB of 1GB"
showValue="true"
state="Success" />
<RadioButtonGroup columns="3" width="500px" class="sapUiMediumMarginBottom">
<buttons>
<RadioButton id="RB1-1" text="Long Option Number 1"/>
<RadioButton id="RB1-2" text="Option 2" enabled="false"/>
<RadioButton id="RB1-3" text="Nr. 3" editable="false"/>
<RadioButton id="RB1-4" text="Long Option 4"/>
<RadioButton id="RB1-5" text="Option 5"/>
<RadioButton id="RB1-6" text="Nr. 6"/>
</buttons>
</RadioButtonGroup>
</VBox>
</content>
</CustomTile>
</content>
</Page>
</pages>
</App>
</mvc:View>
</script>
<script>
// Controller definition
sap.ui.controller("CustomTile.Main", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf table_v01.Main
*/
onInit: function() {
this.getView().byId("oCustom").removeStyleClass("sapMCustomTile").addStyleClass("sapMTile").addStyleClass("customStyle");
},
press : function (evt) {
sap.m.MessageToast.show("The Harvey ball micro chart is pressed.");
},
onDelta : function (evt) {
sap.m.MessageToast.show("The Harvey ball micro chart is pressed.");
}
});
// Instantiate the View, assign a model
// and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#chartView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
// Code goes here
/* Styles go here */