1

The SAP Fiori Reference App Shop Applies to: SAP Fiori Reference Apps

SAP Web IDE 1.14

SAP Netweaver 7.40 SPS 10

Summary

This document provides an overview of the technical aspects of the SAP Fiori Reference App Shop, which has been implemented in namespace nw.epm.refapps.ext.shop.

Authors: Thomas Walter, Antonio Cannone, Christian Kolbowski Company: SAP SE Created on: February 16, 2015

Updated on: August 13, 2015 to reflect changes delivered with Web IDE 1.14

Author Bio

Thomas Walter is a Developer in the SAP Global Design team of SAP SE.

Antonio Cannone is a Developer in the SAP Global Design team of SAP SE.

Christian Kolbowski is a Development Architect in the SAP Global Design team of SAP SE.

2

Table of Contents

Contents

Features of the App ............................................................................................................................................ 3

Draft Pattern .................................................................................................................................................... 3

Implementation ................................................................................................................................................... 3

Main Building Blocks ....................................................................................................................................... 3

Lifecycle .......................................................................................................................................................... 4

List View .......................................................................................................................................................... 4

Details View .................................................................................................................................................... 4

Shopping Cart View ........................................................................................................................................ 5

Checkout View ................................................................................................................................................ 5

Further Topics ................................................................................................................................................. 5

Backend Implementation .................................................................................................................................... 6

Development Environment .............................................................................................................................. 6

Overview of the Gateway Service ................................................................................................................... 6

Service Implementation................................................................................................................................... 7

OData Requests .............................................................................................................................................. 8

Related Content ................................................................................................................................................ 11

Copyright ........................................................................................................................................................... 12

3

The SAP Fiori Reference App Shop

Technical documentation

This document provides an overview of the technical aspects of the SAP Fiori Reference App Shop, which has been implemented in namespace nw.epm.refapps.ext.shop.

Features of the App The app implements the full screen pattern. The app contains four screens, a list of all products, a product details page, a shopping cart page, and a checkout page.

In the product list, it provides an overview of available products. This list can be filtered, grouped, and sorted according to several properties of the products.

The product details page provides an overview of the product details and a list of reviews for this product. Users can write reviews containing a rating and a comment or rate a review as helpful. It also provides an aggregation of all ratings for a given product. The list of reviews can be sorted. In addition, users can select products as their favorites.

The shopping cart page provides an overview of the products that were added to the shopping cart from the product list or the product details. Here it is possible to change the quantity of shopping cart items.

The checkout page provides user information such as logged-on user name and delivery address and an overview of the shopping cart items. Here it is possible to order the shopping cart.

Draft Pattern

This app uses a pseudo draft pattern. A draft shopping cart is created when the user adds the first item to the shopping cart and is deleted after the user orders the shopping cart. There is only one shopping cart per user.

Implementation

Main Building Blocks

According to the general rule for Fiori apps, this app is started using class nw.epm.refapps.ext.shop.Component, which inherits from sap.ui.core.UIComponent. As usual, this class contains the metadata for routing, OData access, icons, and so on.

Main Views

The main views are implemented using:

nw.epm.refapps.ext.shop.view.S2_ProductList

nw.epm.refapps.ext.shop.view.S3_ProductDetails

nw.epm.refapps.ext.shop.view.S4_ShoppingCart

nw.epm.refapps.ext.shop.view.S5_CheckOut

Note that these views are attached to the corresponding routes in the component’s metadata. Therefore, instantiation of the views is automatically performed via the router.

OData Model

For backend communication, the app uses OData service EPM_REF_APPS_SHOP_SRV. The component creates a v2 OData model for this service instance and attaches it as the default model. It can therefore be accessed by all views. To submit changes at a specific time, the component introduces deferred batch groups for nw.epm.refapps.ext.shop.view.S3_ProductDetails and nw.epm.refapps.ext.shop.view.S4_ShoppingCart.

4

With deferred batch groups, it is possible to collect changes and submit the changes manually. This is done when writing a review in nw.epm.refapps.ext.shop.view.S3_ProductDetails. In this case, the two changes for rating and comment are collected and only if both values exist are the changes submitted. A second batch group is introduced in nw.epm.refapps.ext.shop.view.S4_ShoppingCart. There, the changes to the quantity are submitted after the correctness of the input has been validated.

Lifecycle

Global Lifecycle

The global lifecycle of the app is controlled by the component.

Lifecycle of the Main Views

The main views are initialized by the router as normal. This triggers the lifecycle method onInit() of the corresponding controllers.

All controllers also have several event handlers for interactive controls (mainly buttons).

EventBus

EventBus events are used to communicate between views. The product list view and the product details view both publish the event “shoppingCartRefresh” after a product has been successfully added to the shopping cart. The S4 and S5 view subscribe to this event to trigger updates on screen elements that contain information related to the shopping cart.

Function Imports

Function imports are used to trigger updates in the back end that require some extra logic. In the Shop app, two function imports are used:

AddProductToShoppingCart Is triggered by the product list view and the product details view when users choose Add. If no shopping cart exists yet, the function import creates one and adds the chosen product as a shopping cart item. If additional products are added later, the function import adds corresponding items to the cart or increases the quantity for products that are already contained in the shopping cart. BuyShoppingCart Is called when users choose Buy Now on the checkout screen. Currently only the existing shopping cart and its items are deleted, but in a real business environment a purchase order or a purchase requisition would also be created.

List View

The list view demonstrates how to handle the table operations such as sorting, filtering, grouping, and searching. These operations are modularized in the following classes:

nw.epm.refapps.ext.shop.util.ProductListGroupingHelper

nw.epm.refapps.ext.shop.util.TableOperations

Details View

The details view is an important aspect of the SAP Fiori Reference App Shop because it demonstrates how to handle changes made by users. On this screen, users can select products as favorites, rate reviews as helpful, and create or update their own reviews by editing ratings and comments.

Submitting Changes

The v2 OData model submits all changes immediately to the service and updates the binding. To ensure that a change is not updated immediately to the model, deferred batch groups are introduced. In this case, changes have to be submitted with submitChanges() in the controller.

5

Direct updates are done to select products as favorites and rate reviews as helpful. To create a review for a product, a temporary instance is created in the model. This instance contains a temporary ID and the values for the rating and the comment. The changes to the rating or comment are not submitted immediately; these changes are placed in a deferred batch group and are submitted to the model if the user confirms his or her changes. After submitting a change, a stable ID is returned and the binding is updated. In the event of cancellation of the review, the temporary instance is deleted and the changes to the model are reset.

Shopping Cart View

In this view, the aspect of an input validation is shown. For the quantity of an item in the shopping cart, users can enter only an integer digit.

User Changes

After entering a value in the input field for the quantity, the controller checks the correctness of the input und submits the changes. The event change on the input field control sap.m.Input is used to trigger an update to the ShoppingCart item. Normally all changes are passed to the model. To suppress the passing of incorrect values to the model, deferred batch groups are introduced in this view as well. Only correct values are submitted. The entire validation is done in the controller.

Checkout View

This view is only a display view. No input is possible. This view acts as a summary view for the changes made in the shopping cart view.

Further Topics

Rating and Count Control

The rating and count control is a control that is defined in the app in class nw.epm.refapps.ext.shop.control.RatingAndCount. This control combines the SAPUI5 mobile controls sap.m.RatingIndicator and sap.m.Link or sap.m.Label. The combination of RatingIndicator and Label is used in the list, the combination of RatingIndicator and Link is used in the product details.

Modularization

We have already discussed the main components of the app and how they interact. However, there are some other classes that take over some tasks.

The handling of searching, sorting, filtering, and grouping in the master list is delegated to:

nw.epm.refapps.ext.shop.util.TableOperations

nw.epm.refapps.ext.shop.util.ProductListGroupingHelper

Note that the services provided by the first class are agnostic with respect to specifics of the entity handled by this app (Products) and may therefore be reused by any other app.

The review dialog for creation or update of a review is implemented in nw.epm.refapps.ext.shop.view.fragment.ReviewDialog.

6

Backend Implementation

The OData service for the Shop app was modelled in a Gateway project. The classes, model, and model

design aspects are outlined here.

We assume that you are already familiar with the basic concepts of OData services. For more information

about OData, see the specification: OData V2

You should not use the technical names provided in the examples here but base your names on the

appropriate naming conventions for your product or app.

Development Environment

GW software component: SAP_GWFND 740

Gateway Service Builder: transaction SEGW

Gateway project name: EPM_REF_APPS_SHOP

ABAP package: S_EPM_REF_APPS_SHOP_ODATA

Overview of the Gateway Service

Data Provider Classes

CL_ EPM_REF_APPS_SHOP_DPC: Base class for data provisioning providing a default

implementation for all service artifacts raising a not-implemented exception. This class is regenerated

each time that the service is regenerated in the service builder.

CL_ EPM_REF_APPS_SHOP_DPC_EXT: Derived from the base class, where methods of the data

service are overwritten (for example, method REVIEWS_CREATE_ENTITY) this means not-overwritten

methods show the default behavior ‘not implemented’. This class is not affected by regeneration of the

service in the service builder.

Model Provider Classes

CL_ EPM_REF_APPS_SHOP_MPC: Contains the EDM model data generated from the service builder.

This class is regenerated each time that the service is regenerated in the service builder.

CL_ EPM_REF_APPS_SHOP_MPC_EXT: Implements changes to the service model not modeled in the

service builder. Changes to the model may require manual adaptation of the coding.

This class is not affected by the regeneration of the service in the service builder.

The EDM Model

This diagram provides an overview of the data model with its entity types and associations.

Note: Entity types and their corresponding entity sets that are only required for value help (Currency,

DimensionUnit, QuantityUnit, WeightUnit) are omitted from the diagram.

7

Service Implementation

While all CRUD operations and function imports of the service are handled in the corresponding method implementations of the data provider class CL_ EPM_REF_APPS_SHOP_DPC_EXT, the data retrieval is handled by the SADL runtime by making use of core data services. For each of the service entity sets, this means that their corresponding GetEntity and GetEntitySet methods are not redefined in the data provider class; instead the SADL runtime is called directly from the data provider base class method. For example, for the entity set Products, the DPC base class method implementation looks as follows: if_sadl_gw_dpc_util~get_dpc( )->get_entityset(

EXPORTING io_tech_request_context = io_tech_request_context IMPORTING et_data = et_entityset

es_response_context = es_response_context ).

Taking the entity set Products as an example, in the project service implementation view of the Gateway Service Builder, it is directly mapped to the corresponding core data service (CDS) view SEPM_C_SHOP_PRODUCT. You can find all corresponding CDS views in the packages dictionary section under ABAP DDL sources. Please note that you need ABAP in Eclipse to display their content.

8

OData Requests

This section describes the start screen of the EPM Shop app with the corresponding OData requests required by the SAPUI5 controls.

Screen: Shop Product Overview

GET Operations

1. The first call retrieves all available products to be shown in the list. Default sorting is done by

property Name. Only a subset of the properties of entity type Product is required for the product list,

therefore only the required properties are requested with the OData call in order to reduce the

payload.

By passing inlinecount=allpages along with the request, the list header can display the overall amount

of products available in the system. This is especially important if the GET request is limited by use of

the parameter top=<number initial items> to narrow down the initial result set, which is usually done

in order to improve initial load performance. In this implementation, it is used in combination with a

growing list control: when scrolling down, additional products are consecutively loaded (for example

with skip=20, top=20).

OData sample request: GET Products?$skip=0&$top=20&$orderby=Name asc&$select=StockQuantity,Id,ImageUrl,Name,

Description,AverageRating,RatingCount,Price,CurrencyCode,IsFavoriteOfCurrentUser,

MainCategoryName,SubCategoryName,SupplierName&$inlinecount=allpages

2. From the first call’s result, the property ImageUrl points to the location in the MIME repository where

the corresponding product image is stored for each result set entry. The images are then retrieved

using separate GET requests: GET /sap/public/bc/NWDEMO_MODEL/IMAGES/HT-2001.JPG

9

3. The user toggles the Favorite flag on a product in the list (Mark as favorite button available in the

footer bar of the product detail screen). The initial setting of the Favorite flag is done by reading

the property IsFavoriteOfCurrentUser from entity type Product.

The following call is triggered when the user selects or deselects the Mark as favorite UI element:

Merge Products('<id>')

The request body only contains property IsFavoriteOfCurrentUser with value true or false.

Note: PUT Products(Id=<id>)/IsFavoriteOfCurrentUser or

Products(Id=<id>)/IsFavoriteOfCurrentUser/$value is currently not supported by the Gateway

Runtime.

It is important to use HTTP PATCH instead of HTTP PUT to update only some properties of an entity

type (note that the current SAPUI5 OData model implementation posts a MERGE request that is

dispatched to a patch request by Gateway).

4. For the current user, the total quantity of the shopping cart is determined. Each user has exactly one

shopping cart instance, identified by the dummy ID ‘-1’ in combination with the user name.

GET ShoppingCarts(-1)

Clicking the shopping cart icon navigates to the Your Cart screen. The shopping cart content is retrieved

using the association ShoppingCartItems. With an $expand to entity Product, additional properties are

retrieved for each cart item. With the $select query option, only the properties relevant for display are

retrieved. For the properties of the $expanded Product entity, the entity name + ‘/’ is specified as a

prefix for each property in the select statement to distinguish them from the properties of the

ShoppingCartItems entity. Please see S4_ShoppingCart.view.xml, where the cart table item binding is

declaratively defined, this automatically creates the OData request when navigating: GET ShoppingCarts(-1)/ShoppingCartItems?$skip=0&$top=20&$orderby=Id asc&

$expand=Product&$select=Quantity,SubTotal,CurrencyCode,ProductId,Product/IsFavoriteOfCurrentU

ser,Product/ImageUrl,Product/Name,Product/StockQuantity,Product/Price,Product/CurrencyCode&$i

nlinecount=allpages

5. The master list provides a search field. When entering a search pattern and choosing Enter, a GET

request for entity set Products is performed with an additional search parameter. The search is

implemented to query the product name. GET Products?$skip=0&$top=20&$orderby=Name

asc&$select=…&search=Camcorder&$inlinecount=allpages

6. The top-right header toolbar provides buttons for sorting and grouping. By default, the list is always

sorted by name in ascending order.

Group By produces the same OData request as list-sorting, in addition the list control uses the

respective grouping criteria to group the result.

Example for sorting by Price and Name in ascending order:

GET Products?$skip=0&$top=20&$orderby=Price asc, Name asc&$select=…

10

CRUD Operations/Function Imports

7. The main shop functions Add product to shopping cart and Buy shopping cart are implemented as

function imports. For the implementation details of the function imports, see class

CL_EPM_REF_APPS_SHOP_DPC_EXT, Method /iwbep/if_mgw_appl_srv_runtime~execute_action.

Adding products to the shopping cart triggers a function import:

POST AddProductToShoppingCart?ProductId='PF-1000'

Before the product is added, the app checks in the back end whether the product is already in the

shopping cart; in that case the shopping cart item quantity is increased. See method

add_product_to_shopping_cart.

Screen: Your Cart

On the Your Cart screen, users can perform several actions:

8. Changing the quantity of a shopping cart item triggers a MERGE request to entity ShoppingCartItems.

The item ID is passed and the property values are passed in the request’s payload:

MERGE ShoppingCartItems('10')

Payload:

{"ProductId":"HT-2001","Quantity":2,"SubTotal":"449.99000","CurrencyCode":"USD","

__metadata":{"type":"EPM_REF_APPS_SHOP.ShoppingCartItem"}}

The OData response contains all remaining shopping cart items, such that the view is immediately

refreshed without additional OData calls.

9. Deleting a shopping cart item triggers a DELETE request to entity ShoppingCartItems, passing the item

ID:

DELETE ShoppingCartItems('20')

The OData response contains all remaining shopping cart items, such that the view is immediately

refreshed without additional OData calls.

11

10. When users choose Go to Checkout, another cart overview screen appears (display only now) where

they can buy their products. Buying triggers a function import:

POST BuyShoppingCart

Each user can only have one shopping cart, so no additional parameters are transmitted.

The OData response contains an empty shopping cart entity, which is used to refresh the UI OData

model.

In the back end, class CL_ EPM_REF_APPS_SHOP_DPC_EXT method buy_shopping_cart takes care of

the processing. Here a sales order is created using the EPM interface. For each shopping cart item, an

order item with corresponding schedule line is added to the sales order. When this is complete, the

shopping cart items for the user are deleted from the persistency.

Related Content For more information, visit the links below:

Fiori Reference Apps on SCN http://scn.sap.com/docs/DOC-59963

SAP Web IDE - SAP's Browser-Based Development Tool for SAPUI5

http://scn.sap.com/docs/DOC-55465

SAP Web IDE Cloud trial access http://marketplace.saphana.com/Industries/Cross-Industry/SAP-River-Rapid-Development-Environment/p/3334

Detailed description: Reference App - Shop

http://scn.sap.com/docs/DOC-60841

Detailed description: Reference App - Approve Purchase Orders

http://scn.sap.com/docs/DOC-60846

Detailed description: Reference App - Manage Products

http://scn.sap.com/docs/DOC-61464

12

Copyright

© 2015 SAP SE SE or an SAP SE affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE. The information contained herein may be changed without prior notice.

Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary.

These materials are provided by SAP SE and its affiliated companies (“SAP SE Group”) for informational purposes only, without representation or warranty of any kind, and SAP SE Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

SAP SE and other SAP SE products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE in Germany and other countries.

Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices.