Skip to Content

How to bind count value to a single property?

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.

unbenannt.jpg (15.9 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

5 Answers

  • Best Answer
    May 14 at 06:44 PM

    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>

    Add comment
    10|10000 characters needed characters exceeded

  • May 13 at 01:40 PM

    async : false,

    return counter in formatTile, not in the success function


    Add comment
    10|10000 characters needed characters exceeded

  • May 13 at 09:45 PM

    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?!

    Add comment
    10|10000 characters needed characters exceeded

  • May 13 at 12:21 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded

    • 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.

  • May 14 at 05:32 AM

    Hi,

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

    Binding for count

    Add comment
    10|10000 characters needed characters exceeded