Skip to content

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 = {

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>



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'}"/>