Building SAP Fiori-like UIs with SAPUI5 in 10 Exer...

BeGanz · ‎03-04-2014

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