SAP Fiori Starter - Everything you need to know

Lesson 6 – Develop custom app – PART 1

Online, 13th April 2021

1 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

SAP Fiori Starter

25/03 - 1. Overview

30/03 - 2. SAP Netweaver Gateway

Calendar 01/04 - 3. Gestione autorizzazioni per Fiori & Apps

06/04 - 4. Come estendere un’applicazione Fiori 

08/04 - 5. Introduzione sulla SAP Cloud BTP 

13/04 - 6. Sviluppo di un’applicazione custom UI5 PART 1 

15/04 - 7. Sviluppo di un’applicazione custom UI5 PART 2

20/04 - 8. Analytics & KPI

2 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

SAP Fiori Starter

25/03 - 1. Overview

30/03 - 2. SAP Netweaver Gateway

Calendar 01/04 - 3. Gestione autorizzazioni per Fiori & Apps

06/04 - 4. Come estendere un’applicazione Fiori 

08/04 - 5. Introduzione sulla SAP Cloud BTP 

13/04 - 6. Sviluppo di un’applicazione custom UI5 PART 1 

15/04 - 7. Sviluppo di un’applicazione custom UI5 PART 2

20/04 - 8. Analytics & KPI

3 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

 1- Come si chiama la piattaforma Cloud di SAP?

a) BAS

b) BTP

c) CLD

d) UI5

4 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

 1- Come si chiama la piattaforma Cloud di SAP?

a) BAS

b) BTP

c) CLD

d) UI5

5 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

 2- Quali dei seguenti parti sono necessarie da configurare
per poter utilizzare l’account SAP trial?

* Più risposte corrette

a) Destination

b) SAP Business Application Studio

c) SAP Cloud Connector

d) API management

6 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

 2- Quali dei seguenti parti sono necessarie da configurare
per poter utilizzare l’account SAP trial?

* Più risposte corrette

a) Destination

b) SAP Business Application Studio

c) SAP Cloud Connector

d) API management

7 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

 3- Quali dei seguenti servizi si possono configurare dal SAP
BTP?

* Più risposte corrette

a) API management

b) SAP Fiori library apps

c) SAP Cloud Connector

d) Launchpad

8 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

 3- Quali dei seguenti servizi si possono configurare dal SAP
BTP?

* Più risposte corrette

a) API management

b) SAP Fiori library apps

c) SAP Cloud Connector

d) Launchpad

9 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

 4- Quali dei seguenti tool collega l’account BTP con i sistemi
on-premise?

a) SAP Business Application Studio

b) SAP Fiori Launchpad

c) SAP Cloud Connector

d) SAP Mobile Services

10 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

 4- Quali dei seguenti tool collega l’account BTP con i sistemi
on-premise?

a) SAP Business Application Studio

b) SAP Fiori Launchpad

c) SAP Cloud Connector

d) SAP Mobile Services

11 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

 5- Quali dei seguenti servizi fanno parte dei cosidetti “mobile
services”?

* Più risposte corrette

a) SAP Business Application Studio

b) Push notifications

c) Offline data

d) SAP Cloud Connector

12 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

 5- Quali dei seguenti servizi fanno parte dei cosidetti “mobile
services”?

* Più risposte corrette

a) SAP Business Application Studio

b) Push notifications

c) Offline data

d) SAP Cloud Connector

13 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

SAP Fiori Starter
Develop custom app – PART 1

SAP UI5 SDK

Agenda
Development environments

MVC pattern

Main parts of app

14 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

SAP UI5 SDK

The starting point

The place to learn / check the features about custom development is:
• SAP UI5 SDK ( https://sapui5.hana.ondemand.com/#/ )

15 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

SAP UI5 SDK

Documentation, API Reference and Samples

• The Documentation is very useful for the Walkthrough on this SAP UI5 framework. It is
full of tutorials and interesting spark to learn the basic concept.

• The API Reference allow to show the properties, methods to the single element. The
most famous libraries are: sap.m and sap.ui.

• The Samples section is simple to start the basic graphic object and download the
source code to implement in your app.

16 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

Development environments

Business Application Studio is the choice

Business Application Studio (BAS) is the best

practise / tool to develop SAP UI5 apps.

It gives a lot of template to begin and you can access

in multiple SAP system with the same app.

It is free for 365 days to use with your SAP trial

account.

17 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

Development environments

Other local IDE available

• In my experience, the 2 main IDE Local (installed on pc not in cloud) are:

• Eclipse with SAP UI5 plugins

• Visual Code

• You can modify only 1 part like • It is deprecated tools and not in
view or controller continouos improvement
• Not necessary Internet • It’s not ready to use!
connection

18 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

MVC Pattern

Definition of Model, View and Controller

• The Model is responsible for managing the application data in the

database/backend

• The View is responsible for defining the user interface to users.

When a user sends a requests from his device, the view is
responsible for data view as per the request submitted.

• The Controller is used to control the data and view events as per

user interaction by updating the view and model.

19 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

MVC Pattern

Functions of these components

• Model • View • Controller

• Common format: • Common format: • Common format: JS
JSON, XML XML,HTML
• Define the principal UI • Define the logic of event,
• The data binding link parts: inputs, tables, click button, retrieve data
buttons and so on with oData Service
the Model and the
View, the source code is
written in controller
page • There is the possibility to
edit or add properties or
object in corresponding
View
20 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services
Main parts of app

The folder webapp and their files

• Component.js
• The first object instantiated, the core of app
• index.html
• The page HTML to include script or external libraries
• manifest.json
• Customization of app
• i118n
• File with keywords for translation
• CSS styles
• Create style rules to apply in app’s components
21 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services
Main parts of app

Lifecycle of a app – 4 main methods

22 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

Main parts of app

Examples of source code

23 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

Main parts of app

Finally test your app

Using transaction SICF like this:

Search and test the new service (my app)

24 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services

25 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services
26 © 2018 IBM Corporation Wednesday, April 6, 2022 IBM Services