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

 

SAP Fiori Reference Apps available today

 

Shop App
/wp-content/uploads/2014/11/shop_599728.jpg

Shop is an example of a transactional
app in full screen mode.

It allows you to browse the product catalog
and add products to your shopping cart.
When you check out, a sales order is created.

Please use this link to check out the
detailed description of the app.

Approve Purchase Order
/wp-content/uploads/2014/11/approve_po_599701.jpg

Approve Purchase Orders is a transactional
app following the Split Screen layout.

You can check the list of purchase order
assigned to you and approve or reject them.

The Approve Purchase Order App is a
typical approval ap
p.

Please use this link to check out the
detailed description of the app.

 Manage Products
 ProductList.png

Manage Products is a transactional app
using the master/detail pattern.

You can find products, apply changes to
the data or delete them. In addition you
can create new products.

This app shows you how to implement the
draft concept. The draft concept manages
to avoid data loss when closing the web browser before saving the data.

Please use this link to check out the
detailed description of the app.



How to get access to the SAP Fiori Reference Apps?
The SAP Fiori Reference Apps consist of two parts.

  1. The UI part
    You can have a look at the UI part of the reference apps using the SAP Web IDE. It is included there in version 1.6. For more information about the SAP Web IDE, please refer to this SCN document.
  2. The backend part
    The backend includes the OData services that belong to the reference apps. They are part of the SAP Netweaver 7.40 SP10.

    • The OData services for Shop and Manage Products require SAP HANA
    • the Approve Purchase Order OData service works with any database.

Note: To run the UI of the reference apps it is not essential to have the backend available. You are able to run the code with mock data as well.
Steps to get it…

  1. If you don´t have a licence for the SAP Web IDE…. get your SAP Web IDE Cloud trial access via the SAP HANA Marketplace.
  2. Follow this step-by-step guide to run any of the SAP Fiori Reference Apps with demo data (mock data).
  3. Optional: If you want to run the Reference Apps against a real backend system, please follow this guide.
To report this post you need to login first.

23 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