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

 

Features

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.

Table
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
/wp-content/uploads/2014/12/personalize1_610143.png


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.


Features

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.
/wp-content/uploads/2014/12/supplierpopup_610151.png

 

Table
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.
Features
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.
/wp-content/uploads/2014/12/productrating_611072.png

 

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.

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

Totals
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/wp-content/uploads/2014/12/checkout_611074.png

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

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

To report this post you need to login first.

15 Comments

You must be Logged on to comment or reply to a post.

  1. KESHAVA MURTHY SRINIVAS

    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

    (0) 
    1. 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

      (0) 
    1. Martin Dauer Post author

      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.

      (0) 
  2. Alexander Gossmann

    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.

    (0) 
  3. 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 – http://demo.abap.ondemand.com:50000/sap/opu/odata/IWBEP/EPM_DEVELOPER_SCENARIO_SRV/ (there is no support for sales orders. Only product list as of now).. https://espmrefapps.hana.ondemand.com/espm-cloud-web/ 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 – https://github.com/SAP/cloud-espm-v2 Third we have the SHINE demo app (XSC based) running on HCP http://help.sap.com/hana/SAP_HANA_Interactive_Education_SHINE_en.pdf (pls check section 2.3) Hope this helps. Regards, Ranju

    (0) 

Leave a Reply