Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
0 Kudos

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 List

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


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 Cart

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.