<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TextFieldBinding</title>
<script
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m,sap.viz,sap.ui.layout"></script>
<style>
.tableStyle{
border: 1px solid #e5e5e5;
}
</style>
<script>
var dataObject = [
{
"Scenarios": [
{
"Scenario": "Managed System",
"Type" : "Undefined",
"ManagedObject" : "SM7~ABAP"
},
{
"Scenario": "Managed System",
"Type" : "Undefined",
"ManagedObject" : "SD7~ABAP"
},
{
"Scenario": "Managed System",
"Type" : "Undefined",
"ManagedObject" : "FQ7~ABAP"
},
{
"Scenario": "Managed System",
"Type" : "Undefined",
"ManagedObject" : "FP7~ABAP"
},
{
"Scenario": "Managed System",
"Type" : "Undefined",
"ManagedObject" : "NQ7~ABAP"
},
{
"Scenario": "Managed System",
"Type" : "Undefined",
"ManagedObject" : "DQ7~ABAP"
},
{
"Scenario": "Managed System",
"Type" : "Undefined",
"ManagedObject" : "LQ7~ABAP"
},
{
"Scenario": "Managed System",
"Type" : "Undefined",
"ManagedObject" : "RQ7~ABAP"
},
{
"Scenario": "Managed System",
"Type" : "Success",
"ManagedObject" : "HY5~JAVA"
},
{
"Scenario": "Managed System",
"Type" : "Success",
"ManagedObject" : "FT5~JAVA"
},
{
"Scenario": "Managed System",
"Type" : "Success",
"ManagedObject" : "PT5~JAVA"
},
{
"Scenario": "Managed System",
"Type" : "Success",
"ManagedObject" : "ST5~JAVA"
},
{
"Scenario": "Managed System",
"Type" : "Success",
"ManagedObject" : "PT5~JAVA"
}
]
}];
var model = new sap.ui.model.json.JSONModel();
model.setData({modelData: {productsData : []}});
sap.ui.getCore().setModel(model);
sap.ui.getCore().getModel().setProperty("/modelData/systemData", dataObject[0].Scenarios);
var obj = sap.ui.getCore().getModel().getProperty("/modelData/systemData");
var undefinedCount = 0;
var successCount = 0;
for (var item, i = 0; item = obj[i++];) {
var type = item.Type;
switch (type) {
case "Undefined":
undefinedCount++;
break;
case "Success":
successCount++;
break;
}
}
var count = [{"Scenario":"Managed System", "Type" : "Undefined", "Count" : undefinedCount},
{"Scenario":"Managed System", "Type" : "Success", "Count" : successCount}];
sap.ui.getCore().getModel().setProperty("/modelData/chartData",count);
var dataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [ {
axis : 1,
name : 'Scenario',
value : "{Scenario}"
} , {
axis : 2,
name : 'Type',
value : "{Type}"
}],
measures : [ {
name : 'Count',
value : '{Count}'
} ],
data : {
path : "/modelData/chartData",
}
});
var column = new sap.viz.ui5.StackedColumn({
id: "custstvbar",
width : "80%",
height : "400px",
plotArea : {
//'colorPalette' : d3.scale.category20().range()
},
title : {
visible : true,
text : 'Managed System Details'
},
dataset : dataset,
selectData : function(evt) {
var oBarModel = column.getModel();
var oBarData = oBarModel.getData();
var dataPointIndex = evt.getParameter("data")[0].data[0].ctx.path.dii_a1;
var stackIndex = evt.getParameter("data")[0].data[0].ctx.path.dii_a2;
var dataIndex = dataPointIndex+stackIndex;
var selectedStatus = oBarData.modelData.chartData[dataIndex].Type;
var oText = sap.ui.getCore().byId("tblHeaderTxt");
oText.setText(" " + selectedStatus + " System Details");
var oTab = sap.ui.getCore().byId("iconTab");
var oBar = sap.ui.getCore().byId("iconBar");
oBar.setExpanded(false);
oTab.setExpanded(true);
var oBinding = oTable.getBinding("items");
var aFilters = [];
var oFilter = new sap.ui.model.Filter("Type", "EQ",selectedStatus);
aFilters.push(oFilter);
oBinding.filter(aFilters);
}
});
var form = new sap.ui.layout.form.SimpleForm({
title : "System Details Chart",
maxContainerCols : 1,
content : [ column ]
});
var iconTabFilter = new sap.m.IconTabFilter({
icon : "sap-icon://bar-chart",
design : sap.m.IconTabFilterDesign.Horizontal,
content : [ form ]
});
var tabBar = new sap.m.IconTabBar("iconBar", {
expanded : true,
items : [ iconTabFilter ]
});
var tableHeaderText = new sap.m.Text("tblHeaderTxt");
var oResetButton = new sap.m.Button({
icon : "sap-icon://refresh",
type : sap.m.ButtonType.Emphasized,
text : "Reset Type",
tooltip : "Reset Type",
press : function(evt) {
sap.ui.getCore().byId("tblHeaderTxt").setText(" System Details");
// column.rerender();
var oBar = sap.ui.getCore().byId("iconBar");
oBar.setExpanded(true);
var oTab = sap.ui.getCore().byId("iconTab");
oTab.setExpanded(false);
var oBinding = oTable.getBinding("items");
oBinding.filter(false);
}
});
var oTable = new sap.m.Table({headerToolbar : new sap.m.Toolbar({
content : [ tableHeaderText,
new sap.m.ToolbarSpacer(),
oResetButton]
}),
columns:[new sap.m.Column({header:new sap.m.Label({text:"Scenario"})}),
new sap.m.Column({header:new sap.m.Label({text:"Type"})}),
new sap.m.Column({header:new sap.m.Label({text:"ManagedObject"})})],
items:{
path: '/modelData/systemData',
template: new sap.m.ColumnListItem({cells:[new sap.m.Text({text:"{Scenario}"}),
new sap.m.Text({text:"{Type}"}),
new sap.m.Text({text:"{ManagedObject}"})]})}
}).addStyleClass("tableStyle");
var form1 = new sap.ui.layout.form.SimpleForm({
maxContainerCols : 1,
content : [ oTable ]
});
var iconTabFilter1 = new sap.m.IconTabFilter({
icon : "sap-icon://table-view",
design : sap.m.IconTabFilterDesign.Horizontal,
content : [ form1 ]
});
var tabBar1 = new sap.m.IconTabBar("iconTab", {
expanded : false,
items : [ iconTabFilter1 ]
});
var oVBox = new sap.m.VBox({items:[tabBar,tabBar1]});
oVBox.placeAt("content");
</script>
</head>
<body class="sapUiBody">
<div id='content'></div>
</body>
</html>
// Code goes here
/* Styles go here */