Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
​
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
​
    <title>Flattened DataSet bound to OData Entity with aggregation</title>
    <link rel="stylesheet" type="text/css" href="">
    <meta name="description" content="Flattened DataSet bound to OData Entity with aggregation" />
​
    <script id="sap-ui-bootstrap" src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.m, 
                                  sap.me, 
                                  sap.ui.commons, 
                                  sap.ui.ux3, 
                                  sap.ui.table, 
                                  sap.ui.core, 
                                  sap.suite.ui.commons, 
                                  sap.uxap, 
                                  sap.ui.layout,
                                  sap.viz" data-sap-ui-theme="sap_bluecrystal">
    </script>
    <script>
    var handleSelect = function(aggregation){
        var aFacetFilterLists = sap.ui.getCore().byId("FacetFilter_ID").getLists().filter(function(oList){
            return oList.getActive() && oList.getSelectedItems().length;
        });
        var selectedKeys = aFacetFilterLists[0].getSelectedKeys();
        var selectedKeysArray = [];
        for(var key in selectedKeys){
            selectedKeysArray.push(key);
        }
​
        var _reduceCallback = function(aPrev, oCurr){
            var aNext = aPrev;
            var bFound = false;
​
            aNext.forEach(function(item) {
                if (item[selectedKeysArray[0]] === oCurr[selectedKeysArray[0]]) {
                    bFound = true;
                    item.Sales += parseInt(oCurr.Sales);
​
                }
            });
​
            if (bFound === false) {
                aNext.push(oCurr);
            }
            return aNext;
        };
        
        var oTable = sap.ui.getCore().byId("Table_ID");
        var oTableModel = oTable.getModel().oData.modelData;
                
        var aData = oTableModel.reduce(_reduceCallback, []);
        
        var oTableModel = new sap.ui.model.json.JSONModel();
        oTableModel.setData({modelData: aData});
        oTable.setModel(oTableModel);
        
    };
    
    var oColumn_c1 = new sap.ui.table.Column({
        label : new sap.m.Label({text : "Product" }),
        template : new sap.m.Label({
            text : {path: "Product"},
        }),
    });
    var oColumn_c2 = new sap.ui.table.Column({
        label : new sap.m.Label({text : "Sales" }),
        template : new sap.m.Label({
            text : {path: "Sales"},
        }),
    });
    var oColumn_c3 = new sap.ui.table.Column({
        label : new sap.m.Label({text : "Group" }),
        template : new sap.m.Label({
            text : {path: "Group"},
        }),
    });
    
    var oTable = new sap.ui.table.Table("Table_ID",{
        columns : [oColumn_c1,oColumn_c2,oColumn_c3],
        rows : "{/modelData}",
        rowHeight: 52,
        columnHeaderHeight: 52,
        extension : new sap.m.FacetFilter("FacetFilter_ID",{
            type : "Light",
            lists : new sap.m.FacetFilterList({
                title : "title",
                listClose : handleSelect, 
                items : [
                    new sap.m.FacetFilterItem({
                        text : "Product",
                        key : "Product"
                    }),
                    new sap.m.FacetFilterItem({
                        text : "Group",
                        key : "Group"
                    })
                ]
            })
        })
    });
    
    var aTableData = [
                      {Product: "A", Sales:120, Group:"001"},
                      {Product: "A", Sales:82, Group:"002"},
                      {Product: "B", Sales:10, Group:"002"},
                      {Product: "C", Sales:14, Group:"001"},
                      {Product: "A", Sales:8, Group:"001"},
                      {Product: "A", Sales:39, Group:"001"},
                      {Product: "B", Sales:3, Group:"002"},
                      {Product: "C", Sales:2, Group:"001"},
                      {Product: "D", Sales:1002, Group:"003"},
    ];
        
    var oTableModel = new sap.ui.model.json.JSONModel();
    oTableModel.setData({modelData: aTableData});    
    oTable.setModel(oTableModel);   
    oTable.placeAt("content");
    </script>
​
</head>
​
<body class="sapUiBody" role="application">
    <div id="content"></div>
</body>
​
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers