Hi folks!!!
I was working on the Pie Chart for some use case, I found and implemented interesting functionality by using Tokenizer along with the Pie Chart enabling to act as a filter for table to populate the data according to one or more clicked context in the table.
I got this idea by seeing several filter options on modern web applications. I have gone through many threads and discussion on populating data into table on click of chart which helped me a lot. so, taking reference of these implementation, thought to implement filter on pie chart as well. so, sharing my experience with you. It may look like below image.
Functionality is on clicking on the slices of pie chart, the token will be generated accordingly in table toolbar and correspondingly data will be populated/filtered inclusively in table with option of multi-select. And as will go on cancelling/deleting the token then also it will filter the data in table depending on the action.
Project Hierarchy :-
Below image represents the list of files which have been used.
Step By Step Process :-
- Created a SAPUI5 Applicate Project using Eclipse IDE.
2. Selected sap.m library & Created an Initial View check box. And then Finish.
3. Created a Dummy JSON Model
{
"paymentDetail":
[
{
"paymentID":"R1000",
"invoiceNumber":"IN2345",
"amount":"25 Lakhs",
"dueDate":" 14 April,2015",
"duePeriod":"30"
},
{
"paymentID":"R1001",
"invoiceNumber":"IN4523",
"amount":"15 Lakhs",
"dueDate":" 24 April,2015",
"duePeriod":"20"
},
{
"paymentID":"R1002",
"invoiceNumber":"IN7564",
"amount":"5 Lakhs",
"dueDate":" 1 May,2015",
"duePeriod":"14"
},
{
"paymentID":"R1003",
"invoiceNumber":"IN9856",
"amount":"3 Lakhs",
"dueDate":" 5 May,2015",
"duePeriod":"08"
}
],
"pieChartData":[
{
"days":">=15 Days",
"value":"35"
},
{
"days":"16-30 Days",
"value":"65"
},
{
"days":"31-45 Days",
"value":"95"
},
{
"days":"<45 Days",
"value":"15"
}
],
}
Main.view.js
sap.ui.jsview("piewithtokenizer.main", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf piewithtokenizer.main
*/
getControllerName : function() {
return "piewithtokenizer.main";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf piewithtokenizer.main
*/
createContent : function(oController) {
/*
* JSON Model*/
var oModel = new sap.ui.model.json.JSONModel("./Model/dummy.json");
this.setModel(oModel);
console.log("oModel",oModel);
// Dataset For PieChart
var pieChartDataSet = new sap.viz.ui5.data.FlattenedDataset("paymentAgingReport",{
dimensions:[{axis:1, name:'Days', value:'{days}'}],
measures:[{name:'Payments Due', value:'{value}'}],
data:{path:"/pieChartData"}
});
var oLabel = new sap.m.Label({text:"Loading Report..."});
//Defining Pie Chart
var pieChart = new sap.viz.ui5.Pie("agingReportChart",{
id : "pie",
width : "70%",
height : "250px",
dataset: pieChartDataSet,
noData:oLabel,
selectData:oController.onSelectPieChart,
deselectData:oController.onDeselectPieChart
});
pieChart.setInteraction(
new sap.viz.ui5.types.controller.Interaction({
selectability: new sap.viz.ui5.types.controller.Interaction_selectability({
mode: sap.viz.ui5.types.controller.Interaction_selectability_mode.inclusive
})
})
);
var reportTitle = new sap.m.Label({text:"Payment Aging Report", design:sap.m.LabelDesign.Bold});
var titleOverFlowBar = new sap.m.OverflowToolbar({
content:[new sap.m.ToolbarSpacer({width:"20%"}),reportTitle,new sap.m.ToolbarSpacer({})]
}).addStyleClass("titleToolBar");
var pieFlexBox = new sap.m.FlexBox("pieFlexBox",{
width: "100%",
height: "auto",
direction: sap.m.FlexDirection.Column,
justifyContent : sap.m.FlexJustifyContent.Center,
alignItems: sap.m.FlexAlignItems.Center,
items: [
titleOverFlowBar,
pieChart
]
}).addStyleClass("KPIFlexBox");
var hBox = new sap.m.HBox({
items:[pieFlexBox]
});
//Search ToolBar
var title = new sap.m.Label({text:"Payment List", design:sap.m.LabelDesign.Bold});
var oSearch = new sap.m.SearchField("searchTable",{
width:"20%",
liveChange:oController.onSearch,
search:oController.onSearch
});
var sortButton = new sap.m.Button({icon:"sap-icon://sort",type:sap.m.ButtonType.Transparent,tooltip:"Sort on Due Period",press:oController.onSort});
var resetButton = new sap.m.Button({text:"RESET", type:sap.m.ButtonType.Transparent,press:oController.onReset});
var tokens = new sap.m.Tokenizer("token");
var overFlowBar = new sap.m.OverflowToolbar({
content:[tokens,new sap.m.ToolbarSpacer({}),title,new sap.m.ToolbarSpacer({}),oSearch,resetButton,sortButton]
}).addStyleClass("tableToolBar");
// Defining Table
var otable = new sap.m.Table("table");
otable.addColumn(
new sap.m.Column({header: new sap.m.Text({text:"Payment ID"})})
);
otable.addColumn(
new sap.m.Column({header: new sap.m.Text({text:"Invoice Number"})})
);
otable.addColumn(
new sap.m.Column({header: new sap.m.Text({text:"Amount(INR)"})})
);
otable.addColumn(
new sap.m.Column({header: new sap.m.Text({text:"Due Date"})})
);
otable.addColumn(
new sap.m.Column({header: new sap.m.Text({text:"Due Period (In Days)"})})
);
var tableRow = new sap.m.ColumnListItem("tableRow");
var paymentID = new sap.m.Text({text:"{paymentID}"});
var invoiceNumber = new sap.m.Text({text:"{invoiceNumber}"});
var amount = new sap.m.Text({text:"{amount}"});
var dueDate = new sap.m.Text({text:"{dueDate}"});
var duePeriod = new sap.m.Text({text:"{duePeriod}"});
tableRow.addCell(paymentID).addCell(invoiceNumber).addCell(amount).addCell(dueDate).addCell(duePeriod);
otable.bindItems("/paymentDetail", tableRow);
return new sap.m.Page({
title: "Payment Report",
content: [hBox,
overFlowBar,
otable
]
});
}
});
Main.controller.js
onSelectPieChart : function(oEvent) {
selectedData = this.selection();
if (onPieChartInitialize == false) {
tokVal = selectedData[0]["data"]["Days"];
switch (tokVal) {
case '>=15 Days':
chartTokenArray.push(tokVal);
addToken();
filterTableGrid();
break;
case '16-30 Days':
chartTokenArray.push(tokVal);
addToken();
filterTableGrid();
break;
case '31-45 Days':
chartTokenArray.push(tokVal);
addToken();
filterTableGrid();
break;
case '<45 Days':
chartTokenArray.push(tokVal);
addToken();
filterTableGrid();
break;
default:
break;
}
this.onPieTable;
}
},
onDeselectPieChart : function() {
sap.ui.getCore().byId("token").destroyTokens();
chartTokenArray = [];
sap.ui.getCore().byId("searchTable").setValue("");
var oTable = new sap.ui.getCore().byId("table");
var oRow = new sap.ui.getCore().byId("tableRow");
oTable.bindItems("/paymentDetail", oRow);
},
onSearch : function(oEvent) {
var searchString = oEvent.getParameters().newValue;
if (searchString == undefined) {
searchString = oEvent.getParameters().query;
}
console.log("searchString", searchString);
var filter = new sap.ui.model.Filter("dueDate",
sap.ui.model.FilterOperator.Contains, searchString);
var filter1 = new sap.ui.model.Filter("paymentID",
sap.ui.model.FilterOperator.Contains, searchString);
var filter2 = new sap.ui.model.Filter("invoiceNumber",
sap.ui.model.FilterOperator.Contains, searchString);
var filter3 = new sap.ui.model.Filter("duePeriod",
sap.ui.model.FilterOperator.Contains, searchString);
var combFilter = new sap.ui.model.Filter([ filter, filter1, filter2,
filter3 ]);
var oTable = new sap.ui.getCore().byId("table");
console.log("table", oTable);
oTable.getBinding("items").filter(combFilter,
sap.ui.model.FilterType.Application);
},
onReset : function() {
sap.ui.getCore().byId("searchTable").setValue("");
var oTable = new sap.ui.getCore().byId("table");
var oRow = new sap.ui.getCore().byId("tableRow");
oTable.bindItems("/paymentDetail", oRow);
},
onSort : function() {
if (order) {
order = false;
} else {
order = true;
}
var osort = new sap.ui.model.Sorter("duePeriod", order);
var oTable = new sap.ui.getCore().byId("table");
oTable.getBinding("items").sort(osort);
},
Util.js
/*
* @File : Utility Javascript file for common code used in the application
*/
var tokenText; // Global Variables
var arr, f1, f2;
var ofilter;
var counter = false;
/*
* Function to add Token on click of slice of Pie Chart
*/
function addToken() {
sap.ui.getCore().byId("token").addToken(
new sap.m.Token({
text : tokVal
}).attachDelete(function() { // Function for deleting Token
tokenText = this.getText();
var flag = chartTokenArray.indexOf(tokenText);
if (flag >= 0) {
chartTokenArray.splice(flag, 1);
sap.ui.getCore().byId("agingReportChart")
.attachInitialized(onInitialLoad); // For Initializing the Pie Chart on Token Delete Event
sap.ui.getCore().byId("agingReportChart").getModel()
.refresh(true); // Refreshing the Pie Chart so that Initialized event can Fire
counter = true;
sp(tokenText);
}
}));
}
/*
* Function to be called on initialization of Pie Chart after deleting tokens
*/
function onInitialLoad(oEvent) {
var pieDataArray = [];
var count = 0;
for (i in selectedData) {
var obj = selectedData[i];
for (j in obj) {
var subObj = obj[j];
for (key in subObj) {
if (key == "Days") {
if (subObj[key] != tokenText) {
var SD = selectedData.indexOf(subObj);
pieDataArray.push(obj);
}
}
}
}
}
selectedData = pieDataArray;
var selectionPoint = pieDataArray;
if (selectionPoint.length == 0) {
onPieChartInitialize = false;
} else {
onPieChartInitialize = true;
}
sap.ui.getCore().byId("agingReportChart").selection(selectionPoint);
}
/*
* Function to filter Table Grid according to Pie Chart Action
*/
function filterTableGrid() {
var length = chartTokenArray.length;
console.log("length", length);
if (length == 0) {
var oTable = sap.ui.getCore().byId("table");
var tableItem = sap.ui.getCore().byId("tableRow");
oTable.bindItems("/paymentDetail", tableItem);
} else {
var ofilter;
console.log(firstValue);
console.log(secondValue);
for (i = 0; i < length; i++) {
var text = chartTokenArray[i];
text = text.split(" ");
console.log("text", text[0]);
if (text[0].indexOf("-") >= 0) {
arr = text[0].split("-");
ofilter = sp();
} else if (text[0].indexOf("=") >= 0) {
text[0] = "0-15";
arr = text[0].split("-");
ofilter = sp();
} else if (text[0].indexOf("<") >= 0) {
arr = text[0].split("<");
f2 = arr[1];
ofilter = new sap.ui.model.Filter("duePeriod",
sap.ui.model.FilterOperator.GT, f2);
}
}
var oTable = sap.ui.getCore().byId("table");
oTable.getBinding("items").filter(ofilter);
}
}
/*
* Function to filter the table data on deleting the tokens*/
function sp(tokenText) {
if (!counter) {
if (firstValue.indexOf(arr[0]) < 0) {
firstValue.push(arr[0]);
}
if (secondValue.indexOf(arr[1]) < 0) {
secondValue.push(arr[1]);
}
f1 = Math.min.apply(Math, firstValue);
console.log("f1", f1);
console.log("firstValue", firstValue);
f2 = Math.max.apply(Math, secondValue);
console.log("f2", f2);
console.log("secondValue", secondValue);
ofilter = new sap.ui.model.Filter("duePeriod",
sap.ui.model.FilterOperator.BT, f1, f2);
return ofilter;
} else {
console.log("ttt", tokenText);
var tokVal;
var tokenTextArray = tokenText.split(" ");
if (tokenTextArray[0].indexOf("-") >= 0) {
tokVal = tokenTextArray[0].split("-");
var flag = firstValue.indexOf(tokVal[0]);
if (flag >= 0) {
firstValue.splice(flag, 1);
}
var flag2 = secondValue.indexOf(tokVal[1]);
if (flag2 >= 0) {
secondValue.splice(flag2, 1);
}
console.log("spliceFirst", firstValue);
console.log("splicesecond", secondValue);
} else if (tokenTextArray[0].indexOf("=") >= 0) {
tokenTextArray[0] = "0-15";
tokVal = tokenTextArray[0].split("-");
var flag = firstValue.indexOf(tokVal[0]);
if (flag >= 0) {
firstValue.splice(flag, 1);
}
var flag2 = secondValue.indexOf(tokVal[1]);
if (flag2 >= 0) {
secondValue.splice(flag2, 1);
}
console.log("spliceFirst", firstValue);
console.log("splicesecond", secondValue);
} else if (tokenTextArray[0].indexOf("<") >= 0) {
tokVal = tokenTextArray[0].split("<");
//firstValue.splice(tokVal[0],1);
secondValue.splice(tokVal[1], 1);
console.log("spliceFirst", firstValue);
console.log("splicesecond", secondValue);
}
console.log("spliceFirstl1", firstValue.length);
console.log("splicesecondl2", secondValue.length);
if (firstValue.length == 0 && secondValue.length == 0) {
var oTable = sap.ui.getCore().byId("table");
var tableItem = sap.ui.getCore().byId("tableRow");
oTable.bindItems("/paymentDetail", tableItem);
counter = false;
} else {
f1 = Math.min.apply(Math, firstValue);
console.log("f1", f1);
console.log("firstValue", firstValue);
f2 = Math.max.apply(Math, secondValue);
console.log("f2", f2);
console.log("secondValue", secondValue);
ofilter = new sap.ui.model.Filter("duePeriod",
sap.ui.model.FilterOperator.BT, f1, f2);
var oTable = sap.ui.getCore().byId("table");
oTable.getBinding("items").filter(ofilter);
}
}
}
Including util.js files on index.html page.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<link rel="stylesheet" type="text/css" href="util/style.css">
<script src="util/util.js"></script> <!-- Utility file -->
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.viz,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("piewithtokenizer");
var app = new sap.m.App({initialPage:"idmain1"});
var page = sap.ui.view({id:"idmain1", viewName:"piewithtokenizer.main", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Hope!! It may help someone!!!
Any improvements and suggestions are welcomed.
Cheers!!!
- SAP Managed Tags:
2 Comments
