Search code examples
javascriptxmlmodel-view-controllersapui5formatter

How to display the summarized value of multiple rows numbers in a Text [SAPUI5]


as the title states, let's say i do have the following model:

model = {
         0:{"count":3},
         1:{"count":4}
        };

Question 1: How can i display count as summarized number i.e. 7 in a Text?

<Text text="{model>count}" />

Question 2: Is there a technicality, which could allow such summarization ?

What i tried: Formatter function.

<Text text="{ path: 'model>count', formatter:'.formmater.sumCount'}" />

Issue: Formatter, function sumCount, does get the value of each row, i.e. 3, 4 etc..., which means it doesn't have an overarching capability to loop through the whole model and add all the counters and return the summarized value to the <Text>


Solution

  • Question 2: Is there a technicality, which could allow such summarization ?

    You can achieve that via an formatter.

    Suppose you have defined the following sap.ui.model.json.JSONModel in the controller:

        var oMyModel = new sap.ui.model.json.JSONModel({
                    0: { "count": 3 },
                    1: { "count": 4 }
                });
                this.getView().setModel(oMyModel, "myModel");
    

    and you have the following formatter.js file:

    sap.ui.define([], function () {
        "use strict";
        return {
            sumTwoEntries: function (iValue1, iValue2) {
                return iValue1 + iValue2;
            },
            sumAllEntries: function (oObject) {
                var iSum = 0;
                var aObjectKeys = Object.keys(oObject);
                for (var i = 0; i < aObjectKeys.length; i++) {
                    iSum += oObject[i].count;
                }
                return iSum;
            }
        };
    });
    

    this will work:

                                <!-- Displays the first Entrie -->
                                <Text text="{myModel>/0/count}"/>
                                <!-- Displays the second Entrie -->
                                <Text text="{myModel>/1/count}"/>
                                <!-- Displays the summarized Value of both Entries -->
                                <Text text="{ parts: [ { path: 'myModel>/0/count'}, { path: 'myModel>/1/count'}], formatter: '.formatter.sumTwoEntries'}"/>
                                <!-- Displays the summarized Value of x Entries -->
                                <Text text="{ path: 'myModel>/', formatter: '.formatter.sumAllEntries'}"/>