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
|
|
| Object Header | Product Details
|
Purchase Order Details
Purchase Order Multiselect
|
| Table | Product List
Product Details – Review List
Shopping Cart
|
Purchase Order Details
Purchase Order Multiselect
|
| List | Purchase Order List
|
|
| Form | Product Details
|
Purchase Order Details
|
Features Freestyle apps – Design Concepts in alphabetical order
| Design Concepts | Shop | Approve Purchase Orders |
| Button | Product List
Product Details
|
Purchase Order Details
Purchase Order Multiselect
|
| Carousel | Product Details
|
|
| Dialog | Product Details – Rating (custom dialog)
|
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
|
Confirmation dialog for approve/reject |
| Personalization | Product List
|
|
| 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 Toast | Product List, message toast is shown for example in the following cases:
|
Purchase Order Details and Purchase Order Multiselect
|
| Quick Overview | Product Details
|
|
| Search | Product List | Purchase Order List |
| Sort, Group, Filter | Product List | |
| Toolbar | Product List
Product Details
|
Purchase Order Details and Purchase Order Multiselect
|
| View Settings Dialog (Sort, Group, Filter) | Product List
|
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.
It seems a good reference. When can we get the code?
It will be delivered as part of Web IDE 1.6.
Looking forward to see more of this reference app and it's source code.
When will Web IDE 1.6 available?
Web IDE 1.6 is scheduled to be available on Dec. 4th.
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 🙁
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?
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 .
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).
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 .
How excactly did you start the app? Did you explicitly choose "Run with Mock Data"?
Thanks Marita,Hans,Gal for your support.
By explicitly choosing 'Run with mock Data' option it is working good now.
Regards
Virinchy
Thanks Hans .
The help docs are updated now to 1.6. SAP Web IDE Developer Guide 🙂
Do you still face issues when running with mock data?
I can't see the video - is it just me?
Jeremy Good
Me too. It says "video is private"
Hi all, the video will be available later today!
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.
Video is now working - thank you very much!
😉 thanx for sharing
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.
I assume that you marked the checkbox on the creation screen of the extensibility project:
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.
Will these apps get updated to follow the development principles as in this course? https://open.sap.com/courses/ui51
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.
The upgraded SAP Fiori reference apps are available today in the trial SAP Web IDE and tomorrow in the productive (factory) SAP Web IDE.
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 ?
What is the difference between Shop and ManageProducts apps? They seems to be the same: allows editing prodcuts, allows adding to shopping cart
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
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