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:

BuildingSAPFiori-likeUIsWithSAPUI5_img1.jpg

In the following screenshots you get an impression of the user interface functionality and SAPUI5 controls that’s implemented in the tutorial.

BuildingSAPFiori-likeUIsWithSAPUI5_img2.jpg

What You Learn in 10 Exercises

  1. EXERCISE 0 Getting Started:  Set up the SAPUI5 development environment, prepare Google Chrome browser
  2. EXERCISE 1 Resource Model: Set proper titles to master and detail pages by implementing a resource model (aka i18n model, i18n stands for internationalization).
  3. 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.
  4. EXERCISE 3 Formatter: Format status ‘color’ and ‘date’ properly by implementing custom formatters that are used in data binding.
  5. EXERCISE 4 Search: Implement a search on the master list by using sap.m.SearchField
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.

BuildingSAPFiori-likeUIsWithSAPUI5_img3.jpg

Artifacts and package structure of the final SAP-Fiori like SAPUI5 application, that we incrementally build in the exercises, are displayed in this diagram:

BuildingSAPFiori-likeUIsWithSAPUI5_img4.jpg

Building SAP Fiori-like UIs with SAPUI5

UI Development Toolkit for HTML5 (SAPUI5)

SAP Fiori

  • What is SAP Fiori, by Masayuki Sekihara: the best available link collection on SAP Fiori related resources
To report this post you need to login first.

18 Comments

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

  1. Delvinquiere David

    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

    (0) 
  2. Krishna Dupuguntla

    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

    (0) 
  3. Hemendra Sabharwal

    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

    (0) 
  4. Mickey Mahajan

    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?

    UI5_Issue.jpg

    Thanks,

    Mickey.

    (0) 
    1. Bertram Ganz Post author

      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:

      • “Target Devices” is now titled “Library”
      • “Desktop” is now listed as “sap.ui.commons”
      • “Mobile” is now listed as “sap.m”

      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

      (0) 
  5. Parsewar Kunal

    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.

    (0) 
  6. Bertram Ganz Post author

    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

    (0) 

Leave a Reply