SAPUI5 example

Buttons generated at runtime

by Gabriel de Souza

HTML

<script id='sap-ui-bootstrap' type='text/javascript' 
	src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
	data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table" 
	data-sap-ui-theme="sap_bluecrystal">
</script>
		<script id='sap-ui-bootstrap' type='text/javascript'
		src='/sapui5/resources/sap-ui-core.js'
		data-sap-ui-theme='sap_goldreflection'
		data-sap-ui-libs='sap.ui.commons,sap.ui.ux3'></script>
		<!-- add 'sap.ui.table' and/or other libraries if required -->
	
	<script id="myxml" type="text/xmldata">
	   <core:View xmlns:core="sap.ui.core" xmlns:viz="sap.viz.ui5.controls"
				xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
				xmlns:viz.data="sap.viz.ui5.data" xmlns="sap.m"
				controllerName="my.own.controller" >
		  <App>
			 <Page title="SAPUI5 App">
				 <viz:VizFrame xmlns:viz="sap.viz.ui5.controls" id="lineChartCard" uiConfig="{applicationSet:'fiori'}" vizType="column" width="100%">
						<viz:dataset>
							<dataSet:FlattenedDataset xmlns:dataSet="sap.viz.ui5.data" data="{/SalesShare}">
								<dataSet:dimensions>
									
										<dataSet:DimensionDefinition name="Date" value="{Date}">
										</dataSet:DimensionDefinition>
									
								</dataSet:dimensions>
								<dataSet:measures>
									
										
									
										<dataSet:MeasureDefinition name="Price" value="{Price}">
										</dataSet:MeasureDefinition>
									
								</dataSet:measures>
							</dataSet:FlattenedDataset>
						</viz:dataset>
						<viz:feeds>
							<feed:FeedItem xmlns:feed="sap.viz.ui5.controls.common.feeds" uid="valueAxis" type="Measure" values="Price"/>
							<feed:FeedItem xmlns:feed="sap.viz.ui5.controls.common.feeds" uid="categoryAxis" type="Dimension" values="Date"/>
							
						</viz:feeds>
					</viz:VizFrame>
			 </Page>
		  </App>
	   </core:View>	
	</script>
<body class='sapUiBody'>
	<div id='content'></div>
</body>

JavaScript

sap.ui.controller("my.own.controller", {
			onInit: function() {
				 var oData = {
				  "SalesShare": [{
					"Date": "2nd Jan",
					"Price": "400",
          "Dias": "365"
				}, {
					"Date": "2nd Feb",
					"Price": "275",
          "Dias": "5"
				}, {
					"Date": "4th May",
					"Price": "356",
          "Dias": "2"
				}, {
					"Date": "6th June",
					"Price": "310",
          "Dias": "8"
				}]};
				var oModel = new sap.ui.model.json.JSONModel(oData);
				this.getView().setModel(oModel);
			},
		});	
		sap.ui.view({ viewContent:document.scripts.myxml.innerText, type:sap.ui.core.mvc.ViewType.XML }).placeAt("content");