Skip to Content
Author's profile photo Denise Nepraunig

Fiori Reference Apps

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

Assigned Tags

      28 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Masayuki Sekihara
      Masayuki Sekihara

      It seems a good reference. When can we get the code?

      Author's profile photo Marita Kruempelmann
      Marita Kruempelmann

      It will be delivered as part of Web IDE 1.6.

      Author's profile photo HP Seitz
      HP Seitz

      Looking forward to see more of this reference app and it's source code.

      When will Web IDE 1.6 available?

      Author's profile photo Hans-Juergen Richstein
      Hans-Juergen Richstein

      Web IDE 1.6 is scheduled to be available on Dec. 4th.

      Author's profile photo Virinchy Panangipalli
      Virinchy Panangipalli

      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 🙁

      Author's profile photo Hans-Juergen Richstein
      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?

      Author's profile photo Virinchy Panangipalli
      Virinchy Panangipalli

      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

      Author's profile photo Hans-Juergen Richstein
      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).

      Author's profile photo Virinchy Panangipalli
      Virinchy Panangipalli

      Please find attached screenshot for SAP UI5 version. Also is 1.24.5 stable released to public, i am able to find 1.24.4 at SAPUI5 SDK - Demo Kit  and OpenUI5 - Download .

      SAP UI5 version Web IDE.png

      Author's profile photo Marita Kruempelmann
      Marita Kruempelmann

      How excactly did you start the app? Did you explicitly choose "Run with Mock Data"?

      RunWithMockData.png

      Author's profile photo Virinchy Panangipalli
      Virinchy Panangipalli

      Thanks Marita,Hans,Gal for your support.

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

      Regards

      Virinchy

      Author's profile photo Virinchy Panangipalli
      Virinchy Panangipalli

      Thanks Hans .

      The help docs are updated now to 1.6. SAP Web IDE Developer Guide 🙂

      Author's profile photo Former Member
      Former Member

      Do you still face issues when running with mock data?

      Author's profile photo Jeremy Good
      Jeremy Good

      I can't see the video - is it just me?

      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      Jeremy Good

      Me too. It says "video is private"

      Author's profile photo Martin Dauer
      Martin Dauer

      Hi all, the video will be available later today!

      Author's profile photo Bhavin A Shah
      Bhavin A Shah

      Is it possible to run this in SAP Fiori client? Also, is it possible to have concept of Application cache buster incorporated in this reference APPs? I have tried almost everything for caching as posted on different post but still it is not working.

      Post like:  SAP Note 2075016 - Eliminate Manual Browser Cache clearing

      So if we have example with this than it will be really helpful.

      Author's profile photo Jeremy Good
      Jeremy Good

      Video is now working - thank you very much!

      Author's profile photo Erik Hoven
      Erik Hoven

      😉 thanx for sharing

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Marita Kruempelmann
      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

      Author's profile photo Former Member
      Former Member

      Will these apps get updated to follow the development principles as in this course? https://open.sap.com/courses/ui51

      Author's profile photo Mairead Manifold
      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.

      Author's profile photo Denise Nepraunig
      Denise Nepraunig
      Blog Post Author

      The upgraded SAP Fiori reference apps are available today in the trial SAP Web IDE  and tomorrow in the productive (factory) SAP Web IDE.

      Author's profile photo Former Member
      Former Member

      Hi, Do you have some video on explanation on various options available during extension of SAP Fiori Apps and use case for each extension option ?

      Author's profile photo Pavel Astashonok
      Pavel Astashonok

      What is the difference between Shop and ManageProducts apps? They seems to be the same: allows editing prodcuts, allows adding to shopping cart

      Author's profile photo Mynyna Chau
      Mynyna Chau

      In case you have a question that would need help my community members, please ask your question here: https://answers.sap.com/questions/ask.html

      Author's profile photo Jayanta Choudhuri
      Jayanta Choudhuri

      Hi Denise

      VSCODE as well as BAS application builder wizard seems to have
      no provision for projects based on sample apps option.

      WebIde is no longer available as per 
      https://blogs.sap.com/2020/08/20/sap-web-ide-trial-update/

      But a trial for version is available in
      https://tools.hana.ondemand.com/#sapui5
      Excellent blog made installing easy
      https://blogs.sap.com/2018/03/29/installing-sapwebide-personal-edition-and-connect-it-to-a-system/#main

      New Project from Sample Application was there and all 3 samples I could see
      They look very good but  JS driven 
      Not SAP Fiori elements  I think

      First worked with "Mock Data"

      With a new file RefAppsBackend replacing A4H contents
      in C:\SAPWebIDE\eclipse\config_master\service.destinations\destinations

      Description=RefAppsBackend
      Type=HTTP
      TrustAll=true
      Authentication=BasicAuthentication
      Name=RefAppsBackend
      ProxyType=Internet
      URL=http\://192.168.1.150\:50000
      WebIDEUsage=odata_abap,odata_gen,ui5_execute_abap,dev_abap,bsp_execute_abap,odata_xs
      WebIDESystem=A4H
      WebIDEEnabled=true
      sap-client=001
      User=DEVELOPER
      Password=xxxxxxxx

      The 3 apps worked just fine with "real data"!

      I am returning to SAP after 8 year gap to developer trial ABAP1909 docker.
      So more on learn what I can lay hand on trip.

      I imported EP_REF_POAPV and found almost same technology

      My objective is to study real-like, nice, attractive Fiori Elements
      which are compatible to BAS VSCODE

      Any suggestions will be much appreciated

      Jayanta@Kolkata