Skip to Content

SAP Fiori Reference Apps

Last Update: August 2017

In this blog post you’ll get an overview about the SAP Fiori Reference apps which are part of the SAP Web IDE. We always update this blog post when there is a new version of the SAP Fiori Reference Apps.

  • What are SAP Fiori Reference Apps?
  • Where can I get the SAP Fiori Reference Apps?
  • What type of apps are included in the SAP Fiori Reference Apps?
  • Which apps are included in the SAP Fiori Reference Apps?
  • What features are implemented in the SAP Fiori Reference Apps?
  • Backend information
  • Link collection

What are SAP Fiori Reference Apps?

The SAP Fiori Reference Apps are sample applications that help developers and designers with their development projects.

  • Developers
    Both new and experienced SAP Fiori developers can see real working code and live examples covering all layers end-to end. They go far beyond typical “Hello World” examples and aim to provide best practices.
  • Designers
    UX Designers can find examples of how SAP Fiori patterns and controls are being implemented in typical use cases and discover the interaction flow of typical SAP Fiori business apps. They can see how the individual controls function in a live scenario.

The SAP Fiori Reference Apps demonstrate the development and UX Design guidelines and best practices applicable to the SAP Fiori development lifecycle. This covers the entire end-to-end process from design and technology to coding principles, from OData modeling to implementation, as well as selected product standards such as performance, and extensibility. The SAP Fiori Reference Apps are based on the Enterprise Procurement Model (EPM).

Where can I get the SAP Fiori Reference Apps?

The SAP Fiori Reference Apps are part of the SAP Web IDE delivery. Please read our documentation here about how to get the apps and how to run them.

  • Get the apps
  • How to run them
  • Run the apps against a real backend

What type of apps are included in the SAP Fiori Reference Apps?

The included apps cover a broad range of different use cases and different UI patterns. There are so-called “Freestyle Applications” which are build from scratch and apps based on SAP Fiori Elements.

Which apps are included in the SAP Fiori Reference Apps?

Shop

The Shop app is a freestyle application using the worklist pattern. It allows you to browse the product catalog and add products to your shopping cart and check out.

Learn more:

Approve Purchase Orders

The Approve Purchase Orders app is a transactional app implementing the split view layout and is a typical approval app. You can check the list of purchase orders assigned to you and approve or reject them. It is also possible approve or reject multiple purchase orders at once.

Learn more:

Procurement Overview

The Procurement Overview app is a SAP Fiori Elements application and it implements the Overview Page pattern. In this app you can get an overview about your best sellers, the revenue by supplier, your total revenue, new sales orders and purchase orders which need to be approved.

Learn more:

Manage Products

The Manage Products app is a SAP Fiori Elements based application and it implements the List Report and Object Page Pattern. In this app you can create, update, display and delete products.

The app is not fully functional in when running in Mock mode, we suggest to use a real backend.

Learn more:

What features are implemented in the SAP Fiori Reference Apps?

Features Freestyle apps – Patterns and Main Controls

Feature Shop Approve Purchase Orders
Full Screen X (with letterboxing)
Master-Detail X (with letterboxing)
Smart Filter Bar Product List

  • hidden on phone
  • customer control for average rating
Object Header Product Details

  • clickable image
  • key attribute and unit
  • object status (with semantic color)
  • indicator icon for favorites
  • two attributes
Purchase Order Details

  • title
  • key attribute and unit
  • attribute

Purchase Order Multiselect

  • title
  • key attribute and unit (sum)
Table Product List

  • growing list
  • toolbar with
    • title and item count
    • search
    • sort, group
    • table personalization
  • line items
    • icon
    • image
    • object identifier
    • button
    • navigation to a details screen

Product Details – Review List

  • growing list
  • toolbar with
    • title
    • sort
  • line items
    • rating indicator
    • object identifier
    • link and counter

Shopping Cart

  • growing list
  • line items
    • icon
    • image
    • object identifier
    • input field that changes subtotal
    • navigation to a details screen
    • delete row
  • table footer with total
Purchase Order Details

  • table with items

Purchase Order Multiselect

  • object identifier
  • amount

 

List Purchase Order List

  • search
  • multiselect mode
  • swipe (touch devices only)
Form Product Details

  • simple form with two columns (responsive)
Purchase Order Details

  • Simple Form

Features Freestyle apps – Design Concepts in alphabetical order

Design Concepts Shop Approve Purchase Orders
 Button Product List

  • header bar (shopping cart icon with count)
  • table toolbar (such as sort icon)
  • table row (“Add to Cart”)

Product Details

  • footer bar (supported by scaffolding)
  • semantic button (“Add to Cart”)
  • dynamic button (“Write a Review” – “My Review”)
  • icon (Add to favorites)
 Purchase Order Details

  • footer bar

Purchase Order Multiselect

  • footer bar

 

Carousel Product Details

  • click on image
Dialog Product Details – Rating (custom dialog)

  • rating indicator
  • text field
  • toolbar (OK, Cancel button)
Confirmation dialog for approve/reject
Delete Item Shopping Cart (delete row in table)
Formatting Data Product List such as availability (in stock/out-of-stock) Purchase Order Details such as date
Growing List Product List
Input Field Shopping Cart

  • quantity field (input field in table)
  • update subtotal
Confirmation dialog for approve/reject
Personalization Product List

  • variants in the smart filterbar
  • table personalization in the toolbar for the table
Mark as Favorite/Set Flag Product Details
Message Page for errors, such as if purchase order does not exist for deep link or if list is empty
Message Strip Product Details

  • message is shown below the object header if amount in stock < 10
Message Toast Product List, message toast is shown for example in the following cases:

  • product was successfully added to the cart
  • order was successfully submitted
Purchase Order Details and Purchase Order Multiselect

  • success message after approval/rejection
Quick Overview Product Details

  • link to company card
Search Product List Purchase Order List
Sort, Group, Filter Product List
Toolbar Product List

  • table toolbar with search, sort, group, and so on

Product Details

  • footer toolbar with buttons
Purchase Order Details and Purchase Order Multiselect

  • overflow toolbar
View Settings Dialog (Sort, Group, Filter) Product List

  • table toolbar for sort and group

 

Features Fiori Elements apps

Feature Procurement Overview Manage Products
Overview Page Pattern Donut Chart Card
Bubble Chart Card
Line Chart Card
Stack Card
Bar Chart List Card
List Card
List View Pattern Smart Filterbar Breakout
Object Page Pattern Editable Header Content
Various header facet types:
Datafields
Data Points
Multiline text facet
Smart Chart

Backend information

You can have a look at the backend coding for the applications inside your own system as the backend coding is part of the SAP_BASIS component 751 SP02.

All backend services are implemented via CDS views and exposed via OData v2.

Here are the package names for the apps and their implementation features:

(READ = GET, CHANGE = POST, PUT, MERGE, DELETE)

  • Shop

    S_ODATA_EPMRA_SHOP

    Gateway: Mapped Data Source
    READ: SADL
    CHANGE: Manual Implementation
    Annotations: Annotations maintained in SEGW and Model Provider Class

  • Manage Products

    S_ODATA_EPMRA_PROD_MAN

    Gateway: Referenced Data Source
    READ: SADL
    CHANGE: SADL + BOPF
    Annotations: Automatic annotation exposure by SADL

  • Approve Purchase Orders

    S_ODATA_EPMRA_PO_APV

    Gateway: Referenced Data Source
    READ: SADL
    CHANGE: Manual invocation of BOPF via implementation in Data Provider Class
    Annotations: Annotations maintained in SEGW and Model Provider Class

  • Procurement Overview

    S_ODATA_EPMRA_OVERVIEW

    Gateway: Referenced Data Source
    READ: SADL
    CHANGE: n/a (display only)
    Annotations: Automatic annotation exposure by SADL

Re-use backend components are located in package: S_EPMRA_COMMON e.g BOPF implementation for Manage Products and Shop.

Link Collection

To report this post you need to login first.

24 Comments

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

      1. Virinchy P

        Hi Hans/Martin,

        Thanks for the update. I can see SAP WEB IDE trial is now updated to 1.6.1 , but we are having few issues in running the sample app with mock data.

        Also can we expect an update of the help docs to 1.6 SAP Web IDE Developer Guide , i tried clearing the browser cache and also in a new browser but with no luck 🙁

        (0) 
        1. Hans-Juergen Richstein

          What exact issues are you experiencing with the mock data?

          (I will check for the doc topic with the Web IDE colleagues).

          BTW: did you clear your caches before trying to run the projects (to make sure you’ll get the latest UI5 version), respectively run it in an “incognito” window?

          (0) 
          1. Virinchy P

            Please find the attached screenshot with console errors when running the Shopping application. Also facing similar issue with PO application . Have tried running the application clearing the browser cache and also in incognito window .Shopping WEB IDE MOck DAta.png

            (0) 
            1. Hans-Juergen Richstein

              Can you please check your UI5 version (Shift-Ctrl-Alt-P)? It should be 1.24.5. The error you are describing rather looks like you still have 1.24.4, which is missing an according mockserver fix (you can actually ignore this error and cancel the upcoming logon dialog, but this is of course annyoing).

              (0) 
              1. Virinchy P

                Thanks Marita,Hans,Gal for your support.

                By explicitly choosing ‘Run with mock Data’ option it is working good now.

                Regards

                Virinchy

                (0) 
  1. Kai-Markus Lüer

    How can I fully extend those example applications? After creating an extension project, I get an error ‘HTTP Status 500 – Application configuration error. Reason: Invalid reference to destination ‘RefAppsBackend’ in account ‘s00XXXXXXXtrial’: Not found’ when launching it.

    (0) 
    1. Marita Kruempelmann

      I assume that you marked the checkbox on the creation screen of the extensibility project:


      /wp-content/uploads/2016/02/extensionproject_882246.png

      If you check this checkbox the Web IDE assumes that you want to start the project with a “real” backend server. RefAppsBackend is the name of the backend destination. If you want to run the application or an extension project with a real backend you need to ensure that this destination is configured in your system.


      If you leave the checkbox empty and then start the extensibility pane with mock data in a second step then you can extend the app based on mock data.


      ExtensibiltyPaneWithMockData.png

      (0) 
  2. Mairead Manifold

    I often use the sample apps for evidence of Fiori Design Principles so for me it is quite important that the examples apps reflect the most up to date view of the Fiori Design principles.

    (0) 

Leave a Reply