1

Hello I am trying to bind an aggregation onto a Table control but the resulting rows are repeated with the last result in the data set. To elaborate, the table contains the correct amount of rows and columns, but each row repeats the same data.

Doing a OData read call and putting the results into a JSON model and binding that model onto the table works, but that seems unnecessarily expensive.

The binding portion

var filter = new Filter("itemID", sap.ui.model.FilterOperator.EQ, this.item.itemID);  
this._template = this._template ? this._template : sap.ui.xmlfragment("InventoryListItem", this.getView().getController());
this.inventoryList.bindAggregation("items", {
    path: "oDataModel>/InventoryUsages",
    filters: [filter],
    template: this._template,
    parameters: {
      select: 'inventoryID,memberID,fName,lName,condition,purchasedAt,price'
   }
});

The template:

<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:l="sap.ui.layout">
<ColumnListItem>
    <cells>
        <Text text="{path: 'oDataModel>inventoryID'}" />
        <Text text="{parts:[{path:'oDataModel>fName'}, {path:'oDataModel>lName'}], formatter:'.nameFormater'} " />
        <Text text="{oDataModel>purchasedAt}" />
        <RatingIndicator maxValue="5" class="sapUiSmallMarginBottom" value="{
            path: 'oDataModel>condition', formatter: '.conditionFormat'}"
            change="onRatingPress"/>
        <Text text="{path:'oDataModel>price', formatter: '.priceFormatter'}" />
        <Button text="Remove"
            icon="sap-icon://delete"
            press="onRowDelete"
            class="appBtn"/>
    </cells>
</ColumnListItem>

The table displays the correct number of rows, and columns but the data is wrong. It will display the last result in the set for each row. When the table grows the table will show the next last result in the set. Does anyone know how i can fix this?


Answer: Turns out i was doing an OData call on a view that didn't have a primary key. The render glitches out and only displays the last result for some reason as a result.

3 Answers 3

5

Well I figured out the answer to my own question it turns out because I am doing an OData call to a view that does not have a primary key. If it doesn't have a primary key it will glitch out and display the last result of the data set. (If you are using a ASP.net web api you can just put the [key] annotation in the model to solve this problem).

0

I suspect instantiating a fragment once (!) as a template may wreck havoc here; since it is instantiated once, you keep using a reference to the same controls, which will eventually display the last item in your model.

Better use a function and return a new instance of the ColumnListItem control


EDIT

I have provided a working sample below (click 'Run code snippet' to see it working).

Because using a fragment as an aggregation template seemed a bit off to my taste, here's how I would do the binding.

Some points:

  1. The table's Columns and ColumnListItems are defined as an aggregation, directly in the view. No need for a separate template, fragment or factory function, everything is in the view (where it should be ;) )
  2. The filter takes a number between 1 and 10, and is applied on change of the Input field.
  3. The filter itself is just a simple function which is then reapplied when necessary

Hope this helps!

sap.ui.controller("view.initial", {
    
    onInit: function() {
        var model = new sap.ui.model.json.JSONModel();
        model.setData({
            filterValue : 4,
            someArray : [{"itemID":4,"inventoryID":323,"memberID":440,"fName":"Victoria","lName":"Hutchings","condition":4,"purchasedAt":"1992-01-18T21:53:09.291Z","price":96},{"itemID":1,"inventoryID":83,"memberID":83,"fName":"Connie","lName":"Monuteaux","condition":4,"purchasedAt":"2001-07-28T01:05:35.935Z","price":99},{"itemID":3,"inventoryID":591,"memberID":399,"fName":"Cecelia","lName":"Peschke","condition":1,"purchasedAt":"2063-07-03T22:41:15.159Z","price":17},{"itemID":8,"inventoryID":523,"memberID":417,"fName":"Ginger","lName":"Vasquez","condition":5,"purchasedAt":"1967-02-27T09:24:18.631Z","price":67},{"itemID":6,"inventoryID":310,"memberID":573,"fName":"George","lName":"Dixon","condition":4,"purchasedAt":"2050-05-04T12:46:00.850Z","price":6},{"itemID":2,"inventoryID":749,"memberID":887,"fName":"Subha","lName":"Gunn","condition":3,"purchasedAt":"1952-04-08T01:51:08.544Z","price":40},{"itemID":7,"inventoryID":46,"memberID":546,"fName":"Delena","lName":"Ramirez","condition":4,"purchasedAt":"2051-04-05T07:03:10.635Z","price":62},{"itemID":0,"inventoryID":734,"memberID":775,"fName":"Bola","lName":"Shah","condition":4,"purchasedAt":"1986-09-17T23:29:15.318Z","price":97},{"itemID":8,"inventoryID":550,"memberID":546,"fName":"Kassaundra","lName":"Cowen","condition":4,"purchasedAt":"1954-11-25T09:37:03.604Z","price":83},{"itemID":9,"inventoryID":469,"memberID":692,"fName":"April","lName":"Garcia","condition":2,"purchasedAt":"1909-07-07T21:40:21.919Z","price":1},{"itemID":0,"inventoryID":777,"memberID":88,"fName":"Suzanne","lName":"Foxen","condition":5,"purchasedAt":"2026-04-04T13:18:20.715Z","price":21},{"itemID":5,"inventoryID":401,"memberID":956,"fName":"Angelo","lName":"Spellicy","condition":2,"purchasedAt":"2044-10-13T19:17:29.321Z","price":51},{"itemID":10,"inventoryID":799,"memberID":216,"fName":"Sonny","lName":"Gergely","condition":3,"purchasedAt":"1947-01-07T01:12:29.721Z","price":33},{"itemID":4,"inventoryID":175,"memberID":552,"fName":"Sara","lName":"Trautman","condition":0,"purchasedAt":"1992-08-17T22:24:36.123Z","price":52},{"itemID":6,"inventoryID":488,"memberID":580,"fName":"Penny","lName":"Bettencourt","condition":4,"purchasedAt":"1915-04-25T05:17:05.226Z","price":52},{"itemID":7,"inventoryID":713,"memberID":812,"fName":"Greg","lName":"Mulvehill","condition":0,"purchasedAt":"1970-05-03T22:47:42.502Z","price":50},{"itemID":1,"inventoryID":978,"memberID":401,"fName":"Kathe","lName":"Krugel","condition":0,"purchasedAt":"1942-02-09T21:40:24.584Z","price":96},{"itemID":2,"inventoryID":686,"memberID":216,"fName":"Jody","lName":"Gage","condition":5,"purchasedAt":"2010-11-25T16:43:41.214Z","price":86},{"itemID":4,"inventoryID":686,"memberID":110,"fName":"Shelly","lName":"Knoepfel","condition":1,"purchasedAt":"1989-06-29T04:58:29.195Z","price":37},{"itemID":4,"inventoryID":977,"memberID":350,"fName":"LaDagea","lName":"Doerfler","condition":1,"purchasedAt":"1959-03-18T15:10:34.816Z","price":2}]
        });
        sap.ui.getCore().setModel(model);
    },

    onAfterRendering: function() {
        this.applyFilter();
    },

    applyFilter: function() {
        var allFilter=[];
        allFilter.push(new sap.ui.model.Filter("itemID", sap.ui.model.FilterOperator.EQ, this.getView().getModel().getProperty("/filterValue")));

        var oTable = this.getView().byId("myTable");
        var oBinding = oTable.getBinding("items");
        oBinding.filter(allFilter, sap.ui.model.FilterType.Application);
    }
});

var oView = sap.ui.xmlview({
  viewContent: jQuery("#view1").html()
})

oView.placeAt("uiArea");
<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
    <core:View
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc"
      xmlns="sap.m"
      controllerName="view.initial"
      xmlns:html="http://www.w3.org/1999/xhtml">
        <Input value="{/filterValue}" change="applyFilter" />
        <Table id="myTable" items="{/someArray}">
            <columns>
                <Column>
                    <Label text="inventoryID" />
                </Column>
                <Column>
                    <Label text="memberID" />
                </Column>
                <Column>
                    <Label text="fName" />
                </Column>
                <Column>
                    <Label text="lName" />
                </Column>
                <Column>
                    <Label text="condition" />
                </Column>
                <Column>
                    <Label text="purchasedAt" />
                </Column>
                <Column>
                    <Label text="price" />
                </Column>
            </columns>
            <items> 
                <ColumnListItem>
                    <cells>
                        <Text text="{inventoryID}" />
                        <Text text="{memberID}" />
                        <Text text="{fName}" />
                        <Text text="{lName}" />
                        <RatingIndicator maxValue="5" value="{condition}" />
                        <Text text="{purchasedAt}" />
                        <Text text="{price}" />
                    </cells>
                </ColumnListItem>
            </items>
        </Table>
    </core:View>
</script>

8
  • The same problem happens after replacing the template with a factory function: `tableRowFactory: function() { var row = new sap.m.ColumnListItem(); row.addCell(new sap.m.Text({ text: "{oDataModel>inventoryID}" })); return row; }
    – Leon Ho
    Nov 24, 2015 at 16:22
  • Also looking at the source code for the templating function looks like it clones the given template for each row, but it looks like my error is coming from my binding syntax being wrong. I'm just not sure how to fix it.
    – Leon Ho
    Nov 24, 2015 at 16:25
  • See my updated answer for a working solution and some pointers how to proceed
    – Qualiture
    Nov 24, 2015 at 20:32
  • Thanks, It looks like its only broken when it comes to OData Models, if I read from the OData model and load the data into a json model and bind that json model onto the table it works fine. (Not sure why this is an issue)
    – Leon Ho
    Nov 25, 2015 at 2:21
  • 1
    I want to thank you for all your help, even though it didn't work exactly as what i needed, it got the job done.
    – Leon Ho
    Nov 25, 2015 at 22:06
0

In contrast to client-side models, ODataModel stores entries as a map of path-context pairs (path being "/<EntitySet-name>(<KeyPredicate>)"):

ODataModel

mContexts
  /Customers('ALFKI'): context 
  /Customers('BLAUS'): context 
  /Customers('FRANK'): context 
  ...

When implementing the OData service (or modelling entity data relationships), make sure that, within the EntitySet:

  • All entities have primary key(s) assigned
  • All entities are uniquely identifiable (no duplicated key predicates).

Otherwise, newly loaded entries with different content but the same key predicate will just replace previous ones, which explains why UI5 "shows only the last item": primary keys are missing or they're all same (not uniquely identifiable).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.