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.
12
Embed
The SAP Fiori Reference App Shop · 2019-11-12 · 3 The SAP Fiori Reference App Shop Technical documentation This document provides an overview of the technical aspects of the SAP
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Main Building Blocks ....................................................................................................................................... 3
List View .......................................................................................................................................................... 4
Further Topics ................................................................................................................................................. 5
Development Environment .............................................................................................................................. 6
Overview of the Gateway Service ................................................................................................................... 6
Service Implementation................................................................................................................................... 7
Related Content ................................................................................................................................................ 11
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:
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:
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.
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(
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,
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&
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.