Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises
This blog describes our SAPUI5 tutorial (including SAPUI5 project sources) on Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises.
Enjoy working through the exercises, enjoy building SAP Fiori like UIs with SAPUI5!
Regards, Bertram Ganz together with Thomas Marz, Frederic Berg and DJ Adams
Table of Content
Overview
Objectives: Learn how to build own custom SAPUI5 applications that reflect the approach used with SAP Fiori-applications. Know important coding best-practices and architecture details to realize responsive UIs, device adaptation, table filtering, navigation or component-based MVC architecture by using the SAPUI5 mobile control library sap.m and the SAPUI5 runtime API.
What’s not covered: This tutorial does not cover SAP Fiori UI extensibility, integration of custom SAPUI5 applications into SAP Fiori, SAP Fiori launchpad, SAP Fiori Toolkit, OData service provider implementation on backend side
Applies to: The exercises are based on the SAPUI5 Runtime version 1.16.4 that is comprised in the following SAP platform releases:
- SAP NetWeaver AS ABAP 7.0/7.01/7.02/7.03/7.31: UI add-on 1.0 for SAP NetWeaver SPS 06
- SAP NetWeaver AS ABAP 7.40 SPS 6 (where no NetWeaver UI add-on is required)
- SAP NetWeaver AS Java 7.31 SPS 10
- SAP HANA Platform SPS 07: SAP HANA extended application services (SAP HANA XS)
- OpenUI5 1.16.7 see http://sap.github.io/openui5/
- Evaluation package for UI development toolkit for HTML5 1.16.3 (available here …)
NOTE: You do not need any SAP backend to build and run the SAPUI5 application sample described in this document! The Fiori-like sample runs locally on a web server that is provided with the SAPUI5 tools in Eclipse IDE. The application’s business data is retrieved from a mock resource (via JSON model) so that no backend service is required.
DesignTime: SAPUI5 developer tools (Eclipse Java EE-based design time environment for the UI Development Toolkit for HTML5) that are freely available on https://tools.hana.ondemand.com/#sapui5 (via the SAP HANA Cloud 90 days trial license).
Target Group: Developers, architects, consultants, project leads and decision makers who want to get first hands-on experience with building SAP Fiori-like custom UIs in SAPUI5.
Exercise PDF: Building SAP Fiori-like UIs with SAPUI5 in 10 Exercise
SAPUI5 Project Sources: BuildingSAPFiori-likeUIsWithSAPUI5_Projects.zip
Estimated time for completion: 2-3 hours
SAP Fiori-like Application UI
The User Interface of the final SAP Fiori-like SAPUI5 application described in this document looks like this:
In the following screenshots you get an impression of the user interface functionality and SAPUI5 controls that’s implemented in the tutorial.
What You Learn in 10 Exercises
- EXERCISE 0 Getting Started: Set up the SAPUI5 development environment, prepare Google Chrome browser
- EXERCISE 1 Resource Model: Set proper titles to master and detail pages by implementing a resource model (aka i18n model, i18n stands for internationalization).
- EXERCISE 2 Object Controls: Make the UI of the master list and the detail page more beautiful by using the SAPUI5 controls sap.m.ObjectListItem and sap.m.ObjectHeader.
- EXERCISE 3 Formatter: Format status ‘color’ and ‘date’ properly by implementing custom formatters that are used in data binding.
- EXERCISE 4 Search: Implement a search on the master list by using sap.m.SearchField
- EXERCISE 5 Split App & Shell: Utilize the additional space by using the sap.m.SplitApp control which shows the master and detail view next to each other. Wrap the split app in a shell that fills the remaining space on the desktop.
- EXERCISE 6 Additional Device Adaption: Adapt the controls to phone/tablet/desktop devices: Show the back button in the detail page only on the phone.Switch the list to selection mode on the tablet and desktop.
- EXERCISE 7 Supplier Tab: Add an info tab to the detail page that shows a little form with data of the business partner of the sales order.
- EXERCISE 8 Approval Process: Add button to the footer of the detail page to trigger the approval of a sales order. When the user presses the button a confirmation dialog is shown. If the user confirms the dialog the sales order is deleted from the model and a confirmation message is shown.
- EXERCISE 9 Line Item: Extend the detail page with a table that shows the line items of the sales order. The rows are active and allow navigating to the new line item page.
- EXERCISE 10 Grouping: Add a “Select” to the master list that lets the user select a grouping. Handle the user selection and apply the grouping to the data binding.
SAPUI5 Application Architecture
Following the MVC design principle the Approve Sales Order application consists of the following main pieces:
- Component.js: Acts as a root or component container of the whole application. Implements logic to create the application’s root view (App view) and used model instances.
- Views with related controllers: App, Master and Detail. App is our top-level view, containing the Master and Detail views. In the App view we use a SplitApp control to contain the Master and Detail views via the App control’s ‘pages’ aggregation.
- Models: i18n for locale-dependant texts, JSON model with mock data (to be replaced with e.g. an OData model in real applications, a device model for device specific data needed at runtime.
Artifacts and package structure of the final SAP-Fiori like SAPUI5 application, that we incrementally build in the exercises, are displayed in this diagram:
Related Resources
Building SAP Fiori-like UIs with SAPUI5
- YouTube video “SAPUI5/Fiori – Exploration of an App” by DJ Adams, SAP Mentor
- YouTube video “SAP CodeTalk: SAPUI5 & Fiori – Parts #1 and #2 ” by DJ Adams, SAP Mentor
- SCN blog Building SAP Fiori-like UIs with SAPUI5 by DJ Adams, SAP Mentor
UI Development Toolkit for HTML5 (SAPUI5)
- SCN blog “Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5)”, Bertram Ganz: Overview introduction to SAPUI5, links to related information at one place
- UI development toolkit for HTML5 Developer Center on SCN
- SAPUI5 Demo Kit (Documentation, API-Reference, …)
SAP Fiori
- What is SAP Fiori, by Masayuki Sekihara: the best available link collection on SAP Fiori related resources
Great exercises!
Kind regards,
Wouter
Great Exercises. Tons of valuable information.....
Cheers,
Faraz
Great Exercices.
I just have a problem on last exercice. When i call the Grouper class, the oContext is not filled so it raise an exception.
I try several method to retrieve Selected Item of List but nothing seems to be the good object. Can you help me ?
Thanks,
David
Thanks.Really good set of exercise to get someone started with UI5 and Fiori like apps.
Thanks. Good step-by-step explanation of Fiori concept and exercises to create a demo.
I was able to build the app and deploy it to SAP Portal NW7.30 SP9. It works in Google Chrome browser but appears to have issues in IE10 & Safari browsers - getting blank page in these browsers.
Thanks,
Krishna
Thank you so much Bertram, very good step-by-step exercises. It is very helpful for beginners like me and laid good foundation for understanding UI5/Fiori.
Thanks Again
Warm Regards
Hemendra
Good exercises..
Fantastic exercises Bertram Ganz
We were struggling to create master/detail page screens. Now it becomes very easy for us bcz of this exercises.
Thanks a lot.
Yokesvaran Kumarasamy
Hi,
I have been trying to create the 'myFiori0' example but upon following the steps mentioned in the 'Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises' document, I do not see the 'Target device' option. Pls. see below, I see the 'Library' option instead. Have I missed on installing something?
Thanks,
Mickey.
Hi Mickey,
thanks a lot for your feedback! There was a recent UI change in the "New SAPUI5 Application Project" creation wizzard of the SAPUI5 Eclipse tools (for UI5 version 1.22). This change is purely "textual" but not "functional", that means:
To be more precise: with sap.m controlls (that provide responsive UI capabilities) you can realize more than just mobile UIs but also desktop browser UIs. Therefor we decided to move to the Library-related texts for the radio check boxes instead of the target-device-related.
To run the tutorial just select "sap.m" (former titled "Mobile").
Regards, Bertram
I'm looking for the tutorial for this topic. This is great sharing. Thanks a lot.
Good one 🙂
Great Great Stuff has save me loads of time.
Any chance to create a CRUD example?
Great exercises! Would be nice if we had more of these kind of exercises (with explanation).
Thanks a lot.
🙂
Really good exercises!
Thank you. 🙂
Thanks a lot for this blog it helped a lot in understanding the fiori like design.
Good one 🙂
Can you point to some exercise which helps in building Fiori Launchpad like tool.
Hi All,
This is a great great post, but I'm trying to follow it and a can't download the BuildingSAPFiori-likeUIsWithSAPUI5_Projects.zip. I doesn't seem to be working.
Could anyone send it to me or upload it somewhere?
Thank you very very much!
Hallo Carlos,
after 3 years this blog including the underlying SAPUI5 project are no longer maintained. In the meantime the SAPUI5 development team has done a great job to provide a highly comprehensive set of tutorials including sample applications. All this is part of the official and supported SAPUI5 Documentation/Demo Kit, see lSAPUI5 Demo Kit - Tutorials.
The Walkthrough Sample App/Tutorial is the much more detailed successor of the "Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises" we built 3 years ago for SAP TechEd 2013.
Enjoy SAPUI5 and wishes, Bertram