Dynamic Tile Generation and Microchart in tiles with carousel

Dynamic Tile Generation and Microchart in tiles with carousel


Page.xml

<mvc:View
controllerName="sap.suite.ui.microchart.sample.ColumnMicroChartInGenericTile.Page"
xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core" xmlns="sap.suite.ui.microchart"
xmlns:m="sap.m" xmlns:mvc="sap.ui.core.mvc">



<m:Toolbar>
<m:ToolbarSpacer />
<m:ToolbarSpacer />

<m:ObjectNumber class="sapMObjectNumberLarge"

number="91 XXXXXXXXXX" type="sap.ui.model.type.Currency" unit="INR"
emphasized="false" state="None" />
<m:ToolbarSpacer />
<m:ToolbarSpacer />

<m:SegmentedButton selectedKey="kids">
<m:items>
<m:SegmentedButtonItem text="but1" />
<m:SegmentedButtonItem text="but2" />
</m:items>
</m:SegmentedButton>


<m:Button icon="sap-icon://filter" type="Emphasized"></m:Button>
</m:Toolbar>


<m:Carousel id="Carousel1" showBusyIndicator="true"
height="auto" loop="true" pages="{path: 'data>/TileCollection'}">

<m:customLayout>
<m:CarouselLayout
visiblePagesCount="{settings>/pagesCount}" />
</m:customLayout>

<l:VerticalLayout id="container1"
allowWrapping="true">

<m:GenericTile id="gen1"
class="sapUiLargeMarginBegin sapUiLargeMarginTop tileLayout sapUiLargeMarginBottom"
headerImage="{data>icon}" header="{data>number}"
subheader="{data>title}" press="pressTileModule">


<m:tileContent>
<m:TileContent footer="Data">
<m:content>



<ColumnMicroChart size="Responsive">
<columns>
<ColumnMicroChartData value="{data>val1}"
color="Error" />
<ColumnMicroChartData value="{data>val2}"
color="Error" />
<ColumnMicroChartData value="{data>val3}"
color="Error" />
<ColumnMicroChartData value="{data>val4}"
color="Error" />
<ColumnMicroChartData value="{data>val5}"
color="Error" />
<ColumnMicroChartData value="{data>val6}"
color="Error" />
<ColumnMicroChartData value="{data>val7}"
color="Neutral" />
<ColumnMicroChartData value="{data>val8}"
color="Neutral" />
<ColumnMicroChartData value="{data>val9}"
color="Neutral" />
<ColumnMicroChartData value="{data>val10}"
color="Neutral" />
<ColumnMicroChartData value="{data>val11}"
color="Neutral" />
<ColumnMicroChartData value="{data>val12}"
color="Neutral" />

</columns>
</ColumnMicroChart>
</m:content>
</m:TileContent>
</m:tileContent>
</m:GenericTile>


<m:GenericTile id="gen2"
class="sapUiLargeMarginBegin sapUiLargeMarginTop  sapUiLargeMarginBottom "
header="{data>number}" headerImage="{data>icon}"
subheader="{data>title}" press="pressTileModule">
<m:tileContent>
<m:TileContent footer="Data">
<m:content>
<ColumnMicroChart size="Responsive">

<columns>
<ColumnMicroChartData value="{data>val1}"
color="Error" />
<ColumnMicroChartData value="{data>val2}"
color="Error" />
<ColumnMicroChartData value="{data>val3}"
color="Error" />
<ColumnMicroChartData value="{data>val4}"
color="Error" />
<ColumnMicroChartData value="{data>val5}"
color="Error" />
<ColumnMicroChartData value="{data>val6}"
color="Error" />
<ColumnMicroChartData value="{data>val7}"
color="Neutral" />
<ColumnMicroChartData value="{data>val8}"
color="Neutral" />
<ColumnMicroChartData value="{data>val9}"
color="Neutral" />
<ColumnMicroChartData value="{data>val10}"
color="Neutral" />
<ColumnMicroChartData value="{data>val11}"
color="Neutral" />
<ColumnMicroChartData value="{data>val12}"
color="Neutral" />

</columns>
</ColumnMicroChart>
</m:content>
</m:TileContent>
</m:tileContent>
</m:GenericTile>


</l:VerticalLayout>
</m:Carousel>

</mvc:View>

-------------------------------------------------------------------------------------------------


page.controller


sap.ui.define(['sap/m/MessageToast', 'sap/ui/core/mvc/Controller','sap/ui/model/json/JSONModel', 'sap/ui/Device'],
function(MessageToast, Controller,JSONModel,Device){
"use strict";

var PageController = Controller.extend("sap.suite.ui.microchart.sample.ColumnMicroChartInGenericTile.Page", {
onInit : function(oEvent){
/*this.getView().byId("gen1").setBusy(true)
this.getView().byId("gen2").setBusy(true)
*/
var a=this.getView().byId("container1");
var b=new sap.ui.model.json.JSONModel("data.json");
a.setModel (b);
var that = this;
  
  
  var oSettingsModel,
iPagesCount;
  
if (Device.system.desktop) {
iPagesCount = 3;
} else if (Device.system.tablet) {
iPagesCount = 2;
} else {
iPagesCount = 1;
}

oSettingsModel = new JSONModel({ pagesCount: iPagesCount});
b.setSizeLimit(17);

this.getView().setModel(oSettingsModel, "settings");
this.getView().setModel(b, "data");
debugger;
},
/* startStopCarousel:function(oEvent){
debugger;
     if(oEvent.getParameter("state")){
        this.carouselInterval = setInterval(function() {
          this.byId("Carousel1").next();
        }.bind(this), 45000);
      }else{
        clearInterval(this.carouselInterval);
        this.carouselInterval = 0;
      }
    }*/
});

return PageController;

});

----------------------------------------------------------------------------------------------
data.json


{
"TileCollection" : [
{
"icon" : "sap-icon://customer",
"number" : "Tushar",
"title" : "+91 XXXXXXXXXX",
"title1" : "xyz",
"title2" : "70",
"title3" : "neutral",
"val1" : 30,
"val2" : 40,
"val3" : 60,
"val4" : 20,
"val5" : 70,
"val6" : 30,
"val7" : 70,
"val8" : 70,
"val9" : 40,
"val10" : 50,
"val11" : 40,
"val12" : 50
},
{
"icon" : "sap-icon://customer",
"number" : "Suraj",
"title" : "+91 XXXXXXXXXX",
"title1" : "xyz",
"title2" : "30",
"title3" : "neutral",
"val1" : 30,
"val2" : 60,
"val3" : 70,
"val4" : 20,
"val5" : 70,
"val6" : 30,
"val7" : 70,
"val8" : 40,
"val9" : 40,
"val10" : 50,
"val11" : 40,
"val12" : 50
},
{
"icon" : "sap-icon://customer",
"number" : "Sameer",
"title" : "+91 XXXXXXXXXX",
"val1" : 30,
"val2" : 40,
"val3" : 80,
"val4" : 20,
"val5" : 70,
"val6" : 30,
"val7" : 70,
"val8" : 20,
"val9" : 40,
"val10" : 50,
"val11" : 40,
"val12" : 50
},
{
"icon" : "sap-icon://customer",
"number" : "Deepa",
"title" : "+91 XXXXXXXXXX",
"val1" : 30,
"val2" : 40,
"val3" : 60,
"val4" : 20,
"val5" : 70,
"val6" : 30,
"val7" : 70,
"val8" : 10,
"val9" : 40,
"val10" : 50,
"val11" : 40,
"val12" : 50
},
{
"icon" : "sap-icon://customer",
"number" : "Saurabh",
"title" : "+91 XXXXXXXXXX",
"val1" : 30,
"val2" : 40,
"val3" : 10,
"val4" : 20,
"val5" : 50,
"val6" : 30,
"val7" : 70,
"val8" : 70,
"val9" : 90,
"val10" : 50,
"val11" : 40,
"val12" : 50
},
{
"icon" : "sap-icon://customer",
"number" : "Rauf",
"title" : "+91 XXXXXXXXXX",
"val1" : 30,
"val2" : 40,
"val3" : 60,
"val4" : 40,
"val5" : 70,
"val6" : 30,
"val7" : 70,
"val8" : 70,
"val9" : 20,
"val10" : 50,
"val11" : 40,
"val12" : 50
},
{
"icon" : "sap-icon://customer",
"number" : "Stephen",
"title" : "+91 XXXXXXXXXX",
"val1" : 10,
"val2" : 40,
"val3" : 60,
"val4" : 20,
"val5" : 70,
"val6" : 30,
"val7" : 70,
"val8" : 70,
"val9" : 60,
"val10" : 50,
"val11" : 40,
"val12" : 50
},
{
"icon" : "sap-icon://customer",
"number" : "Jignesh",
"title" : "+91 XXXXXXXXXX",
"val1" : 30,
"val2" : 40,
"val3" : 60,
"val4" : 70,
"val5" : 70,
"val6" : 20,
"val7" : 70,
"val8" : 70,
"val9" : 40,
"val10" : 50,
"val11" : 80,
"val12" : 50
},
{
"icon" : "sap-icon://customer",
"number" : "Tejal",
"title" : "+91 XXXXXXXXXX",
"val1" : 20,
"val2" : 40,
"val3" : 60,
"val4" : 20,
"val5" : 70,
"val6" : 30,
"val7" : 40,
"val8" : 70,
"val9" : 40,
"val10" : 50,
"val11" : 80,
"val12" : 50
},
{
"icon" : "sap-icon://customer",
"number" : "Urvashi",
"title" : "+91 XXXXXXXXXX",
"val1" : 90,
"val2" : 40,
"val3" : 60,
"val4" : 50,
"val5" : 70,
"val6" : 30,
"val7" : 70,
"val8" : 70,
"val9" : 40,
"val10" : 80,
"val11" : 40,
"val12" : 50
},
{
"icon" : "sap-icon://customer",
"number" : "Shreyash",
"title" : "+91 XXXXXXXXXX",
"val1" : 30,
"val2" : 90,
"val3" : 60,
"val4" : 20,
"val5" : 70,
"val6" : 30,
"val7" : 70,
"val8" : 20,
"val9" : 40,
"val10" : 50,
"val11" : 40,
"val12" : 50
},
{
"icon" : "sap-icon://customer",
"number" : "Venkat",
"title" : "+91 XXXXXXXXXX",
"val1" : 30,
"val2" : 40,
"val3" : 20,
"val4" : 20,
"val5" : 70,
"val6" : 70,
"val7" : 70,
"val8" : 10,
"val9" : 40,
"val10" : 50,
"val11" : 40,
"val12" : 10
},
{
"icon" : "sap-icon://customer",
"number" : "Ashwini",
"title" : "+91 XXXXXXXXXX",
"val1" : 10,
"val2" : 40,
"val3" : 60,
"val4" : 20,
"val5" : 80,
"val6" : 30,
"val7" : 70,
"val8" : 70,
"val9" : 10,
"val10" : 50,
"val11" : 40,
"val12" : 10
},
{
"icon" : "sap-icon://customer",
"number" : "Richa",
"title" : "+91 XXXXXXXXXX",
"val1" : 30,
"val2" : 40,
"val3" : 30,
"val4" : 20,
"val5" : 70,
"val6" : 30,
"val7" : 90,
"val8" : 70,
"val9" : 40,
"val10" : 10,
"val11" : 40,
"val12" : 50
},
{
"icon" : "sap-icon://customer",
"number" : "Digvijay",
"title" : "+91 XXXXXXXXXX",
"val1" : 10,
"val2" : 40,
"val3" : 60,
"val4" : 20,
"val5" : 70,
"val6" : 30,
"val7" : 30,
"val8" : 70,
"val9" : 40,
"val10" : 50,
"val11" : 40,
"val12" : 25
},
{
"icon" : "sap-icon://customer",
"number" : "Geeta",
"title" : "+91 XXXXXXXXXX",
"val1" : 30,
"val2" : 40,
"val3" : 30,
"val4" : 20,
"val5" : 70,
"val6" : 10,
"val7" : 70,
"val8" : 70,
"val9" : 80,
"val10" : 50,
"val11" : 40,
"val12" : 50
},
{
"icon" : "sap-icon://customer",
"number" : "Omkar",
"title" : "+91 XXXXXXXXXX",
"val1" : 10,
"val2" : 40,
"val3" : 60,
"val4" : 20,
"val5" : 70,
"val6" : 20,
"val7" : 70,
"val8" : 70,
"val9" : 40,
"val10" : 50,
"val11" : 40,
"val12" : 80
}
]
}


Output : 


Post a Comment

Previous Post Next Post