1

UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

UI5 and Fiori Development Training with OData

on Business Application Studio and WebIDE

Target Audience: Application Developers, UX Consultants, Portal and ABAP

Consultants, Designers, Freshers want to start career in SAP

Prerequisites-Basic knowledge of Application Program programming, Basic

programming skills. Core ABAP knowledge will be helpful.

Duration: 40+ Hours – A promise of no copy paste

We also provide server access on-demand which has all latest stuff you need.

At the end of the training you

● Will be able to work on both development and maintenance projects on SAP Fiori

● Will be able to develop Fiori UX with high efficiency and best-practices

● Understand exposing ERP data to Fiori Applications

● Debug and Troubleshoot Fiori Apps and Integrate with Launchpad

● Get used to latest tools and services offered by SAP to Develop Apps

Highlights:

7+ Case Studies | Latest Server

Newest Concepts | Top notch tooling like BAS- Business Application Studio

Certification Guidance | Interview Questions

Certification Code – C_FIORIDEV_21

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
2
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

Phase 1: Fundamentals for UI5

Getting Started

 What is UI5 framework?

 Introduction to the Development tools
 Business Application Studio (BAS)
 WebIDE
 Step by Step Process to Setup BAS
 Steps to Setup WebIDE Personal Edition

HTML 5

 Introduction to the Client-Server Architecture

 What is HTML?
 Difference Between HTML and HTML5
 Creating our first web page
 Introduction to Tags in html
 Understanding the Attributes
 Understanding the Multimedia Tags
 Making a Table using the Table Elements
 Making a Form using form tag
 Understanding the GET/POST methods in form
 Understanding Document Object Model (DOM)
 Other HTML related terms

Cascading Style Sheet (CSS)

 What is CSS and Why we use CSS?

 Understanding Ways of Applying CSS
 Inline style
 Internal style

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
3
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

 External style
 Understanding the Box Model
 Understanding What is Responsive Web Design
 Concept of Classes in CSS
 Styling Using ID’s, Child Selectors and pseudo classes
 Styling an HTML page using CSS

Java Script (JS)

 Introduction to JavaScript
 Understanding the Syntax of JS
 Understanding Naming Convention in JS
 Describing the Ways of Using JS
 Inline JS
 Internal JS
 External JS
 Types of JS
 Client-side JS
 Server-side JS
 Introduction to Console
 Variables and Data Types
 Understanding Different Data Types
 Operators
 Integer
 String
 Float
 Object
 Events
 Concept of Functions in JS
 Functions with Parameters

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
4
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

 Function with Multiple Parameters

Understanding the Concept of Non-Blocking I/O

 Understanding the Meaning Synchronous and Asynchronous

function
 Understanding the Concept of Call back and Promise in JS
 Understanding the concept of Array and Object
 Concept of Conditional Statements
 If, else
 Nesting if
 Switch case
 Concept of Loops
 For loop
 While loop
 Use of JS for Validations in different elements in HTML
 Understanding Different type of Operations on HTML elements
 Creating
 Modifying
 Appending
 Deleting
 Concept of Object-Oriented JavaScript
 Concept of JavaScript Object Notation (JSON)
 Use cases of JavaScript

jQuery

 Introduction jQuery
 Concept of Write less and Do more in jQuery
 Understanding the Syntax of jQuery

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
5
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

 Using Selectors in jQuery

 Understanding the Concept of Content Delivery Network (CDN)

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
6
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

Phase 2: Fundamentals for UI5

Core Concepts of UI5 Framework

 What is Ui5
 Understanding the Structure of UI5 framework
 Concept of SAPUI5 components
 Design Time Components
 Run Time Components
 How UI5 framework is structured
 Understanding the Use of SAPUI5 SDK (Software Development
Kit)
 Understanding how to use
 Constructors
 Properties
 Aggregation
 Association
 Events
 Methods
 Basic Idea of Object-oriented programming
 Concept of Association, Aggregation and Composition in OOP’s
 Understanding the Control Hierarchy
 How to use Parent Class

MVC (Model View Controller) Architecture

 What is MVC Architecture?

 What are Views and Types of Views?
 Making a different type of views
 What are Models?
 What is Controller and types of controller?

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
7
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

 Understanding the Skeleton of a Controller

Concept of Control Objects in Sap UI5

 What are Control Objects?

 How to get Application element object?
 How to use get UI5 element object?
 Understanding the flow of Execution of an Application
 Understanding what is Event handler and how to use it
 Concept of ‘this’ pointer

Creating XML View

 What is XML?
 Syntax of XML
 How an XML View is created?
 Understanding the use of namespace in xml View
 Advantages of using XML Views
 Creating a Simple form using xml and aggregations

Concept of Base Controller and Hook Methods

 What are Hook Methods in Controller?

 Understanding the concept of Multiple Controller System
 What is a Base Controller?
 How to inherit Base Controller in other Controllers?
 Understanding Scaffolding template in a Controller
 Understanding Dependencies in a Controller
 Creating a Simple Web App which contains the use of Base
Controller

Models in UI5

 What are Models?

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
8
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

 Defining the types of Models

 JSON Model
 XML Model
 Resource Model
 OData Model
 What are Client Side and Server-Side Models?
 Step by Step Process to Create and Use a Model
 How to address Model properties?
 Creating a Table Control in UI5
 Binding a JSON Model with a Table in UI5

Binding in UI5

 What is Binding?
 Understanding Types of Binding
 Property Binding
 Expression Binding
 Aggregation Binding
 Element Binding
 What are Binding Modes?
 Understanding types of Binding Modes
 One Way
 Two Way
 One Time
 Use Case of Expression Binding in UI5

Thoroughly Understanding Aggregation Binding

 What is Aggregation Binding?

 Understanding the Concept of Relative Path and Absolute Path
 Use cases of Aggregation Binding in different Fields

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
9
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

 Input Field
 Selection Field
 Text Field
 Check Box, etc.
 Event handling in Table in UI5
 Understanding Debugging and Troubleshooting using Console
in Browser window

Element Binding and Property Binding

 What is Element Binding?

 What is Property Binding?
 Different Syntaxes of Property Binding
 Direct
 Path Variable
 Using Method
 Using property Binding method
 Use cases of Element and Property Binding

Understanding the Concept Resource Model

 Introduction to Resource Model

 Understanding the requirements of the resource model
 Creating methods or Resource model
 Difference between a Developer and a Knowledge manager
 Syntax to use i18n properties in web application
 Switching App language Using the Resource Model

Concept of Formatters in UI5

 Introduction to the Formatters

 Understanding the need of formatter in application
 Syntax of Defining Formatter

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
10
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

 Creating a Formatter Function

 Understanding the ways of using formatter in xml Views

Phase 3: UX Development Using Fiori

Introduction to Fiori

 What is Fiori Guideline?

 How to use Fiori Guidelines?
 UI5 vs Fiori Development
 Difference between UI and UX
 Understanding the Structure of a Fiori Application
 Use case scenario of Fiori Development

Creating a New Fiori Like App

 Introduction to the Component.js file

 Understanding the need of Component.js file
 Skeleton on Compnent.js
 Creating a Container based Fiori Application
 Describing the Concept of App container
 Understanding the Concept of Owner Component

List UI Control

 Introduction to the List Control

 Different types of List Controls in UI5
 Understanding the List Control Hierarchy
 Creating Different type of List Controls like
 Object List Item
 Display List Item
 Action List Item

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
11
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

 Standard List Item

 Feed List Item
 Column List Item
 Select List Item, etc.

Describing Manifest json

 Introduction to Manifest json

 Understanding why we use manifest json
 Use case of manifest
 Step by step process to create manifest json in BAS
 Step by Step process to create manifest in WebIDE
 Defining data model in Manifest
 Instantiating manifest json file in our webapp

Concept of List Operation and List Modes

 Creating a WorkList app using List Control

 Introduction to the List Operations
 Different Type of List Operations
 Sorting
 Searching
 Live Searching
 Filtering
 Grouping
 Implementation on List Operations in our Fiori app
 Introduction to the List Modes
 Understanding different type of List Modes
 Single Select
 Multi select
 Master selects

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
12
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

 Delete

Concept of Split app in UI5

 Understanding the meaning of master detail pages

 What is the structure of master detail pages?
 Navigation between master page and detail page
 Making a master detail application work in Mobile Phones

Table control in Fiori and Icon Tab Filter Bar

 What is Icon Tab Filter Bar?

 Method of Using the IconTab Filter bar
 Message Control to show success and error messages
 How to use Table Control in UI5?
 Creating rows in Table using Column List Control
 Difference Between a UI Table and Mobile Table
 Understanding how to view our application in mobile mode
 Making our application compatible with Mobiles and Tablets

Concept of Router and Navigation

 Introduction to the Router

 Understanding the need of router in an application
 How to Configure Router
 Method of Implementing the Router in our application
 Benefits of using Router in application
 Understanding what is Control Aggregation
 Understanding different types of Control Aggregation
 Concept of key in Router Configuration
 Initializing Router in webapp

Concept of Route Match Handler in UI5

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
13
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

 Introduction to the Route match Handler

 Understanding the importance of Route Match handler
 Method of Creating Route Match Handler
 How to initialize Route Match Handler
 Enabling the Browsers back and Forward Button
 Restoring the Current State of application after browser Reload

Modularization of views Using Fragments

 What is Modularization of views?

 Method of achieving the modularization
 Introduction to the fragments
 Understanding the Structure of Fragments
 How to create fragments
 How to Call a fragment in a View?
 How to Call a fragment in a Controller?
 Method of using one Fragment at multiple places
 Understanding the use of different controls in Fragment
 Use Case of Fragment in our Application

Fiori Architecture

 Introduction to the Fiori Architecture

 How Fiori Consumes data from SAP System
 Introduction to ECC and Application layer
 Understanding the Central hub Scenario
 Introduction to Fiori Font-End System and Fiori Back-end System
 Pros and Cons of ECC system and Central hub scenario
 Service Access techniques

Phase 4: OData Development and Consumption in Fiori

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
14
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

OData Basics

 Introduction NetWeaver Gateway

 NetWeaver Gateway Usage
 Gateway Architecture overview
 Technical Components Involved
 Connectivity option to Connect SAP system
 Introduction to REST
 Introduction to OData
 OData advantages
 Introduction to OData formats JSON and XML

Understanding Connectivity to SAP Server

 Introduction of Connectivity to SAP Server

 Understanding the Requirements before Connecting with the
SAP server
 Understanding the need of Destination
 Steps of Destination Creation for WebIDE
 Understanding how to Create Project using Template in WebIDE
 Introduction to Neo-app.json file
 Creating a Fiori project using template in BAS
 Understanding the Configuration of Ui5 yaml file in BAS

Generating OData Service Using ABAP Programming

 Basics of ABAP Programming

 Introduction to the Function Modules in SAP (BAPI’s)
 Understanding the Concept MPC and DPC classes
 Creating Our first GET service using ABAP
 Implementing Pagination concepts in the GET service

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
15
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

Implementing GET and Create Operation in OData Service

 Implementing the GET operation in OData services like

 Filtering and Projecting ($filter and $select)
 Sorting ($orderby)
 Client-Side Paging ($top, $skip, and $inlinecount)
 Counting ($count)
 Inlining ($expand)
 Formatting ($format)
 Understanding Exception Handling in OData service
 Implementing the POST operation in OData service

Service Generation Techniques

 What is Service Generation?

 Understanding basics of Function Modules
 Introduction to the Postman tool
 Making a GET Call using the Postman
 Making a POST call using the Postman
 Understanding the Concept of X-csrf-Token

Concept of Association

 What are Associations?

 Requirement of Association in OData Service
 Types of Associations
 Implementing Association in Entity sets in OData service
 Implementing navigation property in OData service using
Associations

Function import and Image Processing in the Service

 Introduction to function import

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
16
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

 Creating a function in the OData Service

 Understanding the Concept of Working with Images in OData
service
 Implementing the Image support in our OData Service

Connecting the Backend system with Frontend (Fiori)

 Configuring the SAP BTP Cockpit to the destination

 Configuring manifest json file to connect with OData service
 Creating xs-app.json in the our webapp in BAS
 Step by Step process of Connecting OData service with BAS
 Understanding how to use html5-repo mock service in BAS
 Using the Sap data in our Fiori app

Performing CURDQ Operations in Fiori

 Perform a POST request using Fiori

 Perform a DELETE request using Fiori
 Error Handling on Fiori side
 Understanding the use of Function Import in Fiori
 Use of Associates Properties of OData service in Bas
 Use of Associates Properties of OData service in WebIDE

Deploying SAP Application to Backend System

 Introduction to Deployment
 Why we need the Deployment of an application
 Deployment of an App using BAS
 Deployment of an app using WebIDE to ABAP repository

Concept of Fiori Launchpad

 Introduction to Fiori Launchpad

 Understanding the need of Fiori Launchpad

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
17
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

 Introduction to LPD (Launchpad Designer)

 Step by step process to add our app to Fiori launchpad
 Adding app tile of our sap application in Launchpad

Understanding the Use of GitHub

 What is GitHub?
 What is the need of GitHub for Developers?
 How to create a git repository?
 Pushing a code to git repository using BAS tool
 Pushing a code to git repository using WebIDE
 How to handle conflicts in git while pushing a code
 How to resolve code conflicts in GitHub

Complementary Material

OOPS Application Program Complementary Sessions

 What is Object and class?

 Why to define a class?
 Components of class o Attributes - Instance, static, constant
 Methods- instance, static o Role of Attributes & Methods in OOPs
programming
 Defining class in class builder o Accessing Attributes in a method
 Instantiation of object in report program o Visibility - Public, Private,
Protected
 Method parameters - importing, exporting, changing, returning o
Relationship between objects
 Association
 Aggregation
 Composition

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com
18
UI5 and Fiori Development Training with Business Application Studio and WebIDE
https://www.anubhavtrainings.com/ui5-and-odata-training

 Realization
 Generalization
 Interface
 Abstract class
 Type casting
 Widening Casting
 Narrow Casting

UI5 and Fiori with OData Development on ECC and S/4HANA – www.anubhavtrainings.com