Skip to Content

Updating an item counter for a Cart button

Hi,

I am implementing a cart function into my UI5 app to collect a collection of items for further processing. My cart works fine as a feature in my Master-Detail app.

One thing I'd like to add is a counter next to the cart button to inform the user how many items currently are in the cart. My Gateway service happily returns the correct value when I use the $count option. So far, so good.

What I'm struggling with is the

  1. the correct location to update the counter next to the button
  2. retrieving the oData response

re 1: I decided to retrieve the counter within the onBeforeRendering method. Although I am happy to listen to any advice here.

re 2: I am using the code below.

onBeforeRendering: function() {
	var oCountModel = new sap.ui.model.odata.v2.ODataModel("<oData GW service>");

	oCountModel.read("/cartSet/$count", {
		method: "GET",
		async:false,
		success: function(data) {
			var response = (JSON.stringify(data));
				},
		error: function() {
				}
	});
},

The above code call the service synchronous, but doesn't return the service response ("data is undefined"). However, I can see the response later in the Network tab in Chrome.

So basically, the service works and is called, but for some reason I can't seem to get the resulting response.

Any ideas/hints where I am going wrong with this?

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • May 04 at 06:16 AM

    Hi Michael,

    You can define your model in manifest.json and call following in onInit method of your controller. Otherwise you can also call in component.js .

    oResult directly returns a integer value which you can bind to local json model.

     var	oViewModel = new JSONModel({
    				cartCount:"",
    			});
    	this.setModel(oViewModel, "appView");
    
    this.getOwnerComponent().getModel("cartItems").read("/CartItems/$count",{
     success: function(oResult){
     oViewModel.setProperty("/cartCount", oResult);
       }
      });

    Bind the local json model property to Cart Button

    <Button id="cartBtn" press="onShoppingCartPressed" icon="sap-icon://cart" type="Emphasized" text="{appView>/cartCount}"
    

    Add comment
    10|10000 characters needed characters exceeded

  • May 04 at 01:15 PM

    Hi Michael,

    Did you map the datasource to a model in ur manisfeat.json ?

    Regards,

    Tarun

    Add comment
    10|10000 characters needed characters exceeded

  • May 04 at 03:33 PM

    Have you tried transaction /n/iwfnd/traces to find out how the http request looks like that is received by the SAP Gateway system?

    Regards,

    Andre

    Add comment
    10|10000 characters needed characters exceeded

  • May 04 at 09:54 AM

    Hi Tarun

    First of all Thank You for your reply.

    I have added your suggested code to my onInit method like this:

    onInit: function() {
    	var oViewModel = new JSONModel({
    	busy: false,
    	delay: 0,
    	cartCount: ""
    	});
    //(..omitted code..)
            this.setModel(oViewModel, "detailView");
    	this.getOwnerComponent().getModel().read("/cartSet/$count", {
    		success: function(oResult) {
    			oViewModel.setProperty("/cartCount", oResult);
    			}
    		});
    	},
    

    Model in manifest.json now looks like this:

    "data": {
    	"dataSource": "MY_SRV",
    	"preload": false,
    	"settings" : {
            	"useBatch" : false
            }
    }
    

    detailView.xml

    <m:Button text="{data>/cartCount}" type="Default"  icon="sap-icon://cart" iconFirst="true" width="auto" enabled="true" visible="true" press="_onButtonCart"/>
    

    The Network message response in Chrome looks like this:

    Chrome Console tells me: "Resource not found for the segment 'cartSet' ", which seems to suggest that there is a mismatch with my metadata, but I can't see why. I've also tried to supply service parameters, like: Resource not found for the segment 'cartSet(Username=xyz',ItemNo=1)', which the service accepts. But this led to the same response in the console (yet works in the GW client).

    Here is the successful response when I test my GW service with the $count parameter. I have also tried providing the service parameters (key and item number) with the service, which are not required as per the coding of the GW service. But this didn't make a difference.

    GW Client

    Hope this sheds a little more light on this. Any further help appreciated.

    Thanks again,

    M

    Add comment
    10|10000 characters needed characters exceeded

    • I see that your model name is data.. you should add model name during .getModel()

      this.getOwnerComponent().getModel("data").read("/cartSet/$count", 

      Also, buttontext should be mapped to json model detailView.