SAPUI5 Remove duplicates in aggregation binding

Question

I'm using UI5 to render a table and sort/group/filter using ViewSettingsDialog control. In my OData service I have a "projects" entity set, and each one has a customer associated (one customer can have multiple projects). On the other hand I have a "customers" entity set. It shows 1000+ entries customers but not all have a project on-going, so I cannot use it for the items aggregation in ViewSettingsFilterItem.

To allow the ViewSettingsDialog filter by customer I am passing the "projects" entity set for the items aggragetion in ViewSettingsFilterItem. But those customer which have more than one project on-going appear more than one time.

How can I limit the binding to show only once the customers with more than one project?

Check this snippet using Northwind: https://jsbin.com/sakurisoxo/edit?html,output

If you go to the filters, you can see how they are repeated

Thank you in advance

[Code]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SAPUI5</title>
        <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-theme="sap_belize"
            data-sap-ui-libs="sap.m"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"></script>
            <!-- use "sync" or change the code below if you have issues -->

        <!-- XMLView -->
        <script id="myXmlView" type="ui5/xmlview">
            <mvc:View
                controllerName="MyController"
                xmlns="sap.m"
                xmlns:core="sap.ui.core"
                xmlns:mvc="sap.ui.core.mvc">

                <Table
                    id="myTable"
                    growing="true"
                    growingThreshold="25"
                    growingScrollToLoad="true"
                    busyIndicatorDelay="0"
                    items="{/Orders}">
                    <headerToolbar>
                        <Toolbar>
                            <Title text="Orders of ALFKI"/>
                            <ToolbarSpacer/>
                            <Button text="Click here for filters" press="onDialogOpen"/>
                        </Toolbar>
                    </headerToolbar>
                    <columns>
                        <Column>
                            <Text text="OrderID"/>
                        </Column>
                        <Column>
                            <Text text="CustomerID"/>
                        </Column>
                    </columns>
                    <items>
                        <ColumnListItem>
                            <cells>
                                <Text text="{OrderID}"/>
                                <Text text="{CustomerID}"/>
                            </cells>
                        </ColumnListItem>
                    </items>
                </Table>

            </mvc:View>
        </script>

        <!-- XML Fragment -->
        <script id="myXMLFragment" type="ui5/fragment">
            <core:FragmentDefinition
              xmlns="sap.m"
              xmlns:core="sap.ui.core">
              <ViewSettingsDialog
                  confirm="onTableSettingsConfirm">
                  <sortItems>
                      <ViewSettingsItem text="OrderID" key="OrderID" selected="true" />
                  </sortItems>
                  <filterItems>
                      <ViewSettingsFilterItem
                          text="CustomerID"
                          key="CustomerID"
                          multiSelect="true"
                          items="{path: '/Orders', sorter: [{path: 'CustomerID', descending: false}]}">
                          <items>
                              <ViewSettingsItem text="{CustomerID}" key="{CustomerID}" />
                          </items>
                      </ViewSettingsFilterItem>
                  </filterItems>
              </ViewSettingsDialog>
          </core:FragmentDefinition>
        </script>

        <script>
            sap.ui.getCore().attachInit(function () {
                "use strict";

                //### Controller ###
                sap.ui.define([
                    "sap/ui/core/mvc/Controller",
                    "sap/ui/model/odata/v2/ODataModel"
                ], function (Controller, ODataModel) {
                    "use strict";

                    return Controller.extend("MyController", {

                        _oTableSettingsDialog: null,

                        onInit : function () {
                            this.getView().setModel(
                                new ODataModel("https://cors-anywhere.herokuapp.com/services.odata.org/V2/Northwind/Northwind.svc/")
                            );
                        },

                        onDialogOpen: function(){
                            if (!this._oTableSettingsDialog) {
                                this._oTableSettingsDialog = sap.ui.xmlfragment({
                                    fragmentContent : jQuery("#myXMLFragment").html()
                                });
                                this._oTableSettingsDialog.setModel(this.getView().getModel());
                            }
                            this._oTableSettingsDialog.open();
                        }

                    });
                });

                //### THE APP: place the XMLView somewhere into DOM ###
                sap.ui.xmlview({
                    viewContent : jQuery("#myXmlView").html()
                }).placeAt("content");

            });
        </script>

    </head>

    <body class="sapUiBody">
        <div id="content"></div>
    </body>
</html>

I was wondering why can't you group the customer IDs by project name? This way you can have separate sections for each project and each project will show customers IDs in it. Or even group by customer IDs itself. Let me know if this helps. sapui5.hana.ondemand.com/#docs/guide/… — Rahul Bhardwaj
Hi Rahul, I also implement gouping in my app (not in the snippet), but anyway I need to implement the filter functionality. I should render a raw responsive table with many entries (7 columns) and provide the possibility for Sorting&Grouping&Filtering the columns values That's why I'm using ViewSettingsDialog control sapui5.hana.ondemand.com/explored.html#/sample/… Grouping and Sorting is working smoothly, but I have the described problem for the filters. — Rafael López Martínez
Hi Rafael, I just wanted to mention that you might want to consider using sap.ui.table.Table instead of sap.m.Table. The latter control is just not meant to deal with a huge amount of data and will have a significant performance problem with 7 columns (especially on IE). I had to learn it by experience painfully. — Boghyon Hoffmann

Serban Petrescu Serban Petrescu · Accepted Answer · 2017-03-04T09:21:58

Is there any particular reason for not binding the filter values directly to the customer entity set? That way each of the customers will appear only once. Unfortunately, with OData v2 you cannot filter out of the box the customers which have no orders. For that you will have to get a specialized entity set (based on a view) from the backend.

Conversely, you cannot really filter to remove duplicates directly. You could either try to do some kind of workaround with grouping (I don't really think that you can achieve this), you could read all your data in a JSON Model and do this filtering manually or you could try and switch the OData list binding operation mode to "Client" (which will actually read all the orders --> not really perfect) and implement a custom filtering function to remove the duplicates.

SAPUI5 Remove duplicates in aggregation binding

3 Answers