Hello Experts,
I am using SAP UI5 for creating a Table and CHART namely TABLE1 and CHART1, Using the values (Selection)of the Dropdown(DD1) in the dashboard. And Source code is also given below
Selection of values from DD1 results is filling of related values in TABLE1 and CHART1. We are using CHANGE event of dropdowns to execute the corresponding .xsodata file (with filter parameter) for TAble filling FROM DD1.
When I make a selection from dropdown, TABLE is filling as well as my Chart is also generating with the correct values, screenshot for this is given below,
But When I select a value 2nd time, 3rd time and so on from the Dropdown DD1, event is triggering and Table is not refreshing (nothing is happening to the table); But the CHART1 is changing for every Alternate selection from DD1. Screenshot for this is given below,
Please guide me on this as it is a very essential for all my dashboards.
The source code is also given below
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>LOCATION INFORMATION</title>
<scriptid="sap-ui-bootstrap"type="text/javascript"
src="http://54.169.54.210:8000/sap/ui5/1/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.viz"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
var model = new sap.ui.model.odata.ODataModel('http://54.169.54.210:8000/AC_ANALYTICS_IN_UI5/Location_details.xsodata/',true);
var DD1 = new sap.ui.commons.DropdownBox("DD1id",{
change : function(oEvent)
{
Location_value=DD1.getLiveValue();
var url= "http://54.169.54.210:8000/AC_ANALYTICS_IN_UI5/Location_details.xsodata/Location_details?$select=LM_LOCATION_ID_PK,LM_TOTAL_TONNAGE_AC_TR,LM_ROOM_VOL_IN_CUB_FT,LM_NO_OF_DOORS,LM_NO_OF_PEOPLE,LM_HEAT_SRC,LM_AC_OPERATIONS&$filter=LM_LOCATION_ID_PK eq '"+Location_value+"'&$format=json";
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData(url);
var oControl;
oTable=new sap.ui.table.Table("LOCATION",{
tableID : "TABLE1",
visibleRowCount : 2
});
oTable.setTitle("LOCATIONS DETAILS");
//sap.ui.getCore().byId("LOCATION DETAILS").oTable().refresh(true);
oControl = new sap.ui.commons.TextField().bindProperty("value","LM_LOCATION_ID_PK");
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text: "LOCATION_ID"}),
template: oControl, sortProperty: "LOCATION_ID_PK" , filterProperty: "LOCATION_ID_PK" , width : "125px" }));
oControl = new sap.ui.commons.TextField().bindProperty("value","LM_TOTAL_TONNAGE_AC_TR");
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text: "AC_TONNAGE"}),
template: oControl, filterProperty: "LM_TOTAL_TONNAGE_AC_TR",width : "125px" }));
oControl = new sap.ui.commons.TextField().bindProperty("value","LM_ROOM_VOL_IN_CUB_FT");
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text: "Room_Dimension"}),
template: oControl, filterProperty: "LM_ROOM_VOL_IN_CUB_FT", width : "125px" }));
oControl = new sap.ui.commons.TextField().bindProperty("value","LM_NO_OF_DOORS");
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text: "No OF Doors"}),
template: oControl, filterProperty: "LM_NO_OF_DOORS",width : "125px" }));
oControl = new sap.ui.commons.TextField().bindProperty("value","LM_NO_OF_PEOPLE");
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text: "No OF Peoples"}),
template: oControl, filterProperty: "LM_NO_OF_PEOPLE", width : "125px"}));
oControl = new sap.ui.commons.TextField().bindProperty("value","LM_HEAT_SRC");
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text: "Heat generator"}),
template: oControl, filterProperty: "LM_HEAT_SRC", width : "125px" }));
oControl = new sap.ui.commons.TextField().bindProperty("value","LM_AC_OPERATIONS");
oTable.addColumn(new sap.ui.table.Column({label:new sap.ui.commons.Label({text: "Usage Pattern"}),
template: oControl, filterProperty: "LM_AC_OPERATIONS",width : "125px"}));
//var sort1=new sap.ui.model.Sorter("LM_LOCATION_ID_PK");
oTable.bindRows("/d/results");
oTable.placeAt("id2");
//?$select=LM_LOCATION_ID_PK&$filter=LM_LOCATION_ID_PK eq '"+Location_value+"'
oTable.setModel(oModel);
oTable.removeRow(0);
var dataset2 = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [
{
axis : 1, name : 'LOCATION_ID', value : "{LM_LOCATION_ID_PK}"
}
],
measures :[
{
name : 'TOTAL_TONNAGE', value : '{LM_TOTAL_TONNAGE_AC_TR}'
}
],
data : { path : "/d/results" }
});
var topSalesCustomerBarChart2 = new sap.viz.ui5.Column("CHART1",
{
width : "100%",
height : "400px",
title :
{
visible : true, text : ''
},
dataset : dataset2
}).placeAt("id6");
var url2 = "http://54.169.54.210:8000/AC_ANALYTICS_IN_UI5/Location_details.xsodata/Location_details?$select=LM_LOCATION_ID_PK,LM_TOTAL_TONNAGE_AC_TR&$filter=LM_LOCATION_ID_PK eq '"+Location_value+"'&$format=json";
var salesModel2 = new sap.ui.model.json.JSONModel();
salesModel2.loadData(url2);
topSalesCustomerBarChart2.setModel(salesModel2);
}
});
DD1.setModel(model);
var itemTemplate = new sap.ui.core.ListItem();
itemTemplate.bindProperty('text', 'LM_LOCATION_ID_PK');
DD1.bindItems('/Location_details?$select=LM_LOCATION_ID_PK&$groupby=LM_LOCATION_ID_PK', itemTemplate);
DD1.placeAt('id1');
</script>
<bodyclass="sapUiBody">
<h1>SELECT LOCATION HERE</h1>
<h1></h1>
<divid="id1"></div>
<h1></h1>
<divid="id2"></div>
<divid="id6"></div>
</body>
Thanks and Regards,
Bharath