Updating an item counter for a Cart button

[mkoch_wu]

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?

[teejay]

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

[mkoch_wu]

Just realised I replied to my original post and not your answer. Anyways... 🙂

[Andre_Fischer]

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

[teejay]

Hi Michael,

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

Regards,

Tarun

[mkoch_wu]

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.

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

Thanks again,

M

[teejay]

Hi Michael,

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

Regards,

Tarun

[teejay]

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.