Search code examples
sapui5sap-fiori

How to get $count into a tile


I am an ABAP developer who is just trying to take the first steps in SAPUI5/Fiori.

So my very simple task is to create a fiori app with a single tile to show the number of EDIDC records.

View1.controller.js:

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";

    return Controller.extend("QuickStartApplication.controller.View1", {
        
    onGetValue: function ( ) {
        var oTileValue = this.getView().byId("tile1");
        this.getModel().read("/EDIDCSet/$count", {
            success: $.proxy(function (oEvent, oResponse) {
                // var count = Number(oResponse.body);
                var count = "1337";
                oTileValue.setValue(count);
            }, this)
        });
    }
    });
});

View1.view.xml:

<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
    controllerName="QuickStartApplication.controller.View1">
    <App id="idAppControl">
        <pages>
            <Page xmlns="sap.m" id="pageId" title="TileTest" floatingFooter="true">
                <content>
                    <Button xmlns="sap.m" text="Button" id="button0" press=".onGetValue"/>
                    <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Country-Specific Profit Margin" subheader="Expenses"
                        press="press" id="tile1">
                        <TileContent unit="EUR" footer="Current Quarter">
                            <NumericContent scale="M" value="1000" valueColor="Error" indicator="Up" withMargin="false"/>
                        </TileContent>
                    </GenericTile>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

As you can see, I can't even pass the value "1337" that I hardcoded.


Solution

  • ​My first mistake was to adress the tile and not the numeric content of the file. So first, I gave the ID to the numeric content: ​

    <NumericContent scale="M" value="" valueColor="Error" indicator="Up" withMargin="false" id="num1"/>
    

    ​ ​Then, I've adjusted the line, to access the object:

    var oTileValue = this.getView().byId("num1");
    

    ​The last thing I learned was, that the model is connected to the view. So to access this, I changed the line to:

    ​this.getView().getModel().read("/EDIDCSet/$count", {
    

    ​Now I can call my function onGetValue and it's working.