Skip to Content
Author's profile photo Denise Nepraunig

Detailed description: Reference App – Shop

Shop is a transactional app that allows the user to browse a product catalog and order IT equipment. It is a fullscreen application with table filter and growing list. Below you find pictures of each screen with explanations of the implemented features.

Note: You can find the source code for the UI in your WebIDE environment. Please follow this step-by-step guide.


Technical Documentation
There is a detailed technical documentation available for the Shop App. Please follow this Link.


Product ListShopProductList.png

The product list allows you to browse through the products in the shop. You can navigate to the product details page or add a product to the shopping cart.



Header Toolbar
The toolbar at the top shows you how many items are already in the shopping cart. You can directly open the cart by clicking the cart icon.


The table is a combined control that includes the table toolbar and the data grid. The table toolbar provides a search field and the table personalization options. You can type any filter criteria, press return, or choose the magnifying glass icon to perform the search.

The personalization  personalizationShop.png allows you to do the following:

  • Sort the list by any field in ascending or descending order
  • Group the list by any field
  • Show or hide fields in the list

Data Table

The data table supports the following:

  • Pictures and icons in rows
  • Clickable buttons in rows
  • Cross navigation
  • Growing list in case your search returns many items
  • Specific formatting such as values or currency


Product Details/wp-content/uploads/2014/12/productdetails_610144.png


Product Details is a typical view to provide more information about an object, in this case the product master.


Object Header
The object header is the identifier of the product. It shows the product image and the most important data such as the unit price. You can enlarge the image by clicking it to see the product picture in detail.

Below the header there is a simple form with two columns showing more product details.

You can click the company name of the
supplier to open the supplier card in a dialog
form to see more information about the
business partner.


The table, which shows the rating indicator, object identifier, text, and links, is designed as a growing list.

Footer Toolbar

The footer toolbar belongs to the Launchpad and includes custom buttons and the option to add a tile to the Launchpad.

Product Details – Rating
You can click the company name of the supplier to open the supplier card in a dialog form to see more information about the business partner.

You can create a review for a product by
choosing Write a Review. This opens a dialog that was implemented as a
fragment in which you can choose a
rating between one and five stars and
write a comment.
The OK button is inactive unless the rating
and a text was provided. Only then you can submit your review and close the
dialog.Once a review has been saved, the
Write a Review button changes to My Review
because you can submit only one review for
a product. However, you can change it later.


Shopping CartshoppingCart.png

The shopping cart allows you to review your list of selected products prior to checkout. You can still change the quantity of each item or remove them.

The product list is a table implemented as a growing list to support a large number of rows.

The input field in the table allows you to change the quantity directly in the table and you can also remove a line item from the list.

The table contains a subtotal for each line item. The footer of the table contains the grand total. If the quantities are changed, the subtotal and grand total are calculated again.


Checkout allows you to perform a final check of the purchase order before buying.

This screen is display only. It represents a mix of form view and table. The form contains the details of the business partner and delivery address. The table below shows all items in the purchase order.

If you choose Buy Now in the footer toolbar, a purchase order is generated and the app returns to the product list.

Assigned Tags

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

      This is brilliant and very helpful.


      Author's profile photo Franck MALDERA
      Franck MALDERA


      Where I can find live demo of this application?


      Author's profile photo Marita Kruempelmann
      Marita Kruempelmann


      you can run the app in the Web IDE as described in the step-by-step guide. If you don't have access to Web IDE yet, you can easily get your own trial account - free of charge - here: SAP Web IDE - Enablement

      Best regards, Marita

      Author's profile photo Franck MALDERA
      Franck MALDERA


      Is this app works on S4/HANA (ERP) ?


      Author's profile photo Former Member
      Former Member

      Hi Franck,

      If OData service to supply list of Products is implemented on the target machine, you can use this App



      Author's profile photo Former Member
      Former Member

      Hi Martin,

      The cart functionality with mock-data is not working properly. It is always displaying same product when cart icon is clicked and also it is displaying the total no of item(product * quantity) in the cart instead of just number of products in the cart.

      Best Regards, Keshav

      Author's profile photo Hans-Juergen Richstein
      Hans-Juergen Richstein

      Hi Keshav,

      thanks for the feedback. You are right, there seems to be an issue with the shopping cart functionality right now. We'll check it.

      The computation of the number of items, however, is correct according to the intended design. If you buy three laptops of the same kind (i.e. quantity 3) and one mouse, you have a total of 4 items in your cart, not two. Just like in a real shopping cart.

      Regards, Hans-Juergen

      Author's profile photo Hans-Juergen Richstein
      Hans-Juergen Richstein


      we found and fixed the issue. The corrected Ref. App will already be available with the very next WebIDE patch.

      Thanks for letting us know!

      Regards, Hans-Juergen

      Author's profile photo Carolyn Bedi
      Carolyn Bedi

      Is there an option to have checkout collect payment method and information vs submit a purchase order?

      Author's profile photo Martin Dauer
      Martin Dauer

      Hi Carolyn,

      payment collection is currently not part of this reference app. These reference apps showcase the ideal way to technically implement Fiori, They are not meant as full blown end-to-end scenarios but represent typical usage patterns in regards to user interfaces and odata consumption.

      Author's profile photo Pavan Golesar
      Pavan Golesar


      Nice app.


      Author's profile photo Hemendra Sabharwal
      Hemendra Sabharwal

      Thanks Martin, It is very useful blog.

      Warm Regards


      Author's profile photo Former Member
      Former Member

      Dear Team,

      I would like to rebuild your shopping app natively on HANA (HCP). Two main problems / restrictions that I'm currently facing:

      - XSA is currently not supported on HCP, I have to run it in XS Classic

      - I have to use xsodata / HANA CDS views (e.g. for rebuilding /sap/opu/odata/sap/EPM_REF_APPS_SHOP_SRV/ service functionality)

      Do you have any how to, experience etc. in this direction? If not are there any ABAP demo systems available to check all the functionality of /sap/opu/odata/sap/EPM_REF_APPS_SHOP_SRV/ service?

      Thank you.

      Author's profile photo Ranju Gupta
      Ranju Gupta

      Dear Alexander, there is one ABAP demo system used for ESPM shopping reference app on HCP, which fetches data from EPM backend. ABAP system - (there is no support for sales orders. Only product list as of now).. Apart from this, we have a HANA based demo app deployed in HCP (JAVA based though).. in case you wish to have a look. Github - Third we have the SHINE demo app (XSC based) running on HCP (pls check section 2.3) Hope this helps. Regards, Ranju

      Author's profile photo Pankaj Kumar
      Pankaj Kumar

      Hi Martin,

      The technical document under link ( ) is not accessible anymore. Can you please share the alternate URL or mail me the document @