Skip to Content
Author's profile photo Nabheet Madan

My trials with SAP Mobile Cards ->VegFu:)

Motivation for the blog

Last few days have been quite tied up as i have to submit  my first online hackathon prototype.Yesterday only it got completed and i was catching up on blogs posted in last few days. I read this wonderful blog Enable RSS Feeds with SAP Cloud Platform Mobile Cards by Mark Wright where he has managed to use SAP Mobile cards for read RSS feeds. He was able to build all this in very short span of time.

This actually triggered my thoughts on a very simple issue which i am facing daily. Though a very basic one but i believe this can be resolved by using SAP Mobile cards. Many might think it is a silly idea:) but yes this idea helped me in understanding Mobile cards in a better way and in parallel resolving my problem.

Before i move to implementing the idea, for the people interested in participating in hackathons they must check Hackerearth or Devpost. Do participate, trust me you will learn lot of things in short span of time.So going back to what the idea is?

What I planned to make?

My idea was very simple, each day i have to buy vegetables and fruits from the vendors. All the time i don’t bargain/negotiate with any vendor as i don’t know what the current price of the commodities are. So my idea was to build a card app where each card shows me the current price of vegetables and fruits in the market, that is why i named this card as VegFu:). A simple card which shows the price as shown below the screen shot.

Learning Adventure begins

  • The first problem statement was to find out how can i get daily prices of fruits and vegetables, thanks to Government of India now we have an API which provide us the same. As of now we are allowed to move through the records via pagination concept which is bit cumbersome but it is fine as long as it served my purpose. I have already submitted my suggestion to provide the filter fields in API rather then just number of records. So first step of finding data source was completed.

  • Next step was to filter the records for my market only, so for that i wrote a small PHP script which calls the API and filter my state records.
  • Next step was to create the custom card. I followed the basic steps as mentioned in this great  blog by Midhun VP to create the custom card, which will display commodity name and price per 100 KG.

  • Finally downloaded the SAP Mobile Cards app and subscribed to the cards. That is where the problem start the cards does not load. Read on the next section to find out what mistakes i was doing.

Troubleshooting the crazy issue

  • In previous section we have already managed to create the card but the card does not display. So first question which comes to mind is how do i know whether do we have any error or is the data being fetched. On googling i found out we can check whether our services are being called and returning data or not by going to Analytics ->Network Traces -> Purge the trace->Start recording-> unsubscribe and subscribe -> Download HAR file. Thankfully the file shows our call were happening and returning the data as shown below.

  • So data is coming then on further searching found we also have logs being recorded in SAP Mobile services, bingo found something related Mobile card issue as show in screenshot
  • So there is a problem in my card,either the way i have mentioned the query URL or query path. On cross checking again i found out the key path was mentioned wrongly 

Wrong key path


Correct key path

  • I thought now everything will work but this time card came but the dynamic values were not coming. On checking further found out the root cause that i have mentioned $ sign with the variables which is not needed in the html files. Corrected and executed again finally everything worked as shown in screenshot.

Wrong way to refer variables in html file

{{$.records.commodity}} <br> <br><br>{{$.records.modal_price}} 

Correct way to refer variables in html file

{{records.commodity}} <br> <br><br>{{records.modal_price}} 

Recorded Demo

A small demo how my basic VegFu application looks like, very useful for me helps in saving some little money:) the card can be downloaded from here.

What is next?

What is next is always which actually helps me in generating new ideas. Now since i have a better understanding of the Mobile cards we can use them in N number of ways.

  • Mobile cards can be used With SAP workflow service
  • Using Actions
  • Create something cool for  example an Alexa receiving a request to create purchase order which goes for approval via workflow service and approver approve the request via mobile cards. #MoreIdeas.

Thanks for reading feel free to provide your feedback.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Mark Wright
      Mark Wright

      Great use case, it goes to show that there are many ideas out therefor using this.  This is a great write up as well showing the debugging steps.  You mention wanting to enable this with Alexa, take a look here as I did this a while ago, but it’s a starting point. 

      Author's profile photo Nabheet Madan
      Nabheet Madan
      Blog Post Author

      Thanks for the feedback. This blog will give me a head start for my idea, thanks for sharing


      Author's profile photo Midhun VP
      Midhun VP

      Great post Nabheet, it was a cool use case.

      Also, thanks for reminding me about Devpost – I remember registering in it years ago when I had nothing to do in my weekends ?


      Author's profile photo Nabheet Madan
      Nabheet Madan
      Blog Post Author

      Thanks  Midhun VP for the feedback. Devpost and Hackearth are two super cool places to learn something quickly, all you need to do is participate:)


      Author's profile photo Phil Cooley
      Phil Cooley

      Nice Nabheet Madan - especially like the troubleshooting section being included for those times when things just don't work as expected. Thanks for sharing!

      Author's profile photo Nabheet Madan
      Nabheet Madan
      Blog Post Author

      Thanks Phil Cooley for the encouragement. Lets keep sharing and learning:)

      Author's profile photo Vineet Safaya
      Vineet Safaya

      Hi Nabheet,

      First of all great blog on such a popular use case.

      Can u let me know the name of the api that u used. I tried to find it on the site - but cudn't.

      Author's profile photo Nabheet Madan
      Nabheet Madan
      Blog Post Author

      Thanks Vineet for the feedback. Search for Mandi Rates:)