How to bind count value to a single property?

[Floatjitsu]

Hi experts,

I am currently working on single Tiles and want to add some count values from the Northwind oData Service.

The app contains just one view and one controller.
View:

<mvc:View
	controllerName="customtileapp.controller.CustomTile1"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Country-Specific Profit Margin" subheader="Expenses" press="press">
		<TileContent unit="EUR" footer="Current Quarter">
		<NumericContent scale="M" value="{path: '/Customers', formatter: '.formatTile'}" valueColor="Error" indicator="Up" formatterValue="true" /> 
		</TileContent>
	</GenericTile>
</mvc:View>

Controller:

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


	var PageController = Controller.extend("customtileapp.controller.CustomTile1", {
		
		onInit: function() {
			this.oView = this.getView();
			this.oModel = new sap.ui.model.odata.v2.ODataModel("/northwind/V2/Northwind/Northwind.svc", true);
			this.oView.setModel(this.oModel); 
		},
		
		
		formatTile: function() {
			var counter;
				this.oModel.read("/Customers/$count", {async : true,
										success : function(oData, response) {
											counter = response.body;
											MessageToast.show(counter);
		}}); 
			return counter;


		}
	});


	return PageController;


});

The MessageToast inside the formatter Function works fine and shows the correct number of customers (91). But the number I want to show on the tile always shows 0.

Hope someone can help me 🙂

Best regards.

[Floatjitsu · Accepted solution]

I solved the problem as followed:

Controller (CustomTile1.controller.js):

            getTileValue: function () {
                var oTileValue = this.getView().byId("idNumericContent");
                var oModel = new sap.ui.model.odata.v2.ODataModel("/northwind/V2/Northwind/Northwind.svc", true);
                oModel.read('/Customers/$count', {
                    success: $.proxy(function (oEvent, oResponse) {
                        var count = Number(oResponse.body);
                        oTileValue.setValue(count);
                }, this)
            });
        },
    onAfterRendering: function() {
            this.getTileValue();    
        }

View (CustomTile1.view.xml):

<mvc:View
    controllerName="customtileapp.controller.CustomTile1"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:l="sap.ui.layout">
    <App>
        <pages>
            <Page title="test">
                <content>
                    <l:VerticalLayout>
                        <GenericTile class="sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout" header="Country-Specific Profit Margin" subheader="Expenses"
                            press="press">
                            <TileContent unit="EUR" footer="Current Quarter">
                                <NumericContent scale="MM" value="" valueColor="Error" indicator="Up" id="idNumericContent"/>
                            </TileContent>
                        </GenericTile>
            
                    </l:VerticalLayout>

                </content>
            </Page>
        </pages>
        
    </App>

</mvc:View>

[sivakumar_mobility]

Hi,

Please mention Path correctly and use formater , Then it will work.Please refer below URL.

Binding for count

[Floatjitsu]

Update: Fixed the 501 Error.

What I tried is, that counter becomes undefined outside the success function.

Anyone know if it is possible to pass the value of a variable outside the function? Or maybe it is because of the /Customers path in the Value Property in my xml view?!

[junwu]

async : false,

return counter in formatTile, not in the success function

[Floatjitsu]

Hello Jun,

I tried it with async : true but it doesn't work...

Do you have any other suggestions?

Regards

[junwu]

async should be false.

[Sharathmg]

Does the async:true resulting in this behavior. Try to remove it. Else, bind the path in which the count is held to the numeric value instead of the generic - /customers. Re-check the binding.

[Floatjitsu]

Hello Sharat,

I tried it with async: true but it doesnt work, still 0 is displayed. What do you mean by binding the path in which the count is held? What in the code do I have to change?

Im also getting a 501 Error in the debugger (Not implemented) 😞

Thanks for your help!

[Sharathmg]

There are two paths you have used; /Customers/$count in the formatter function and /Customers in the tile.

Ideally, bind one path to the control and then use formatter to just format the content. Formatter should not be used to further do a look up or call a service.

Keep code simpler. Try to invoke service and get the data into a model. Then bind the local model to the control. This way, you will be sure of the data passed.

Also, try the option to set async as false.