Detailed description: Reference App – Shop

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

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

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.

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.

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.

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

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.