0% found this document useful (0 votes)
434 views18 pages

UI5 and Fiori App Development On BAS With OData

The document provides an overview of a 40+ hour training on UI5 and Fiori development with Business Application Studio and WebIDE. The training covers fundamentals of HTML5, CSS, JavaScript, jQuery, UI5 framework concepts, MVC architecture, controls, views, models, binding and more. It also includes 7+ case studies, latest tools, certification guidance and interview questions. At the end of the training, participants will be able to develop and maintain Fiori applications and integrate them with SAP systems.

Uploaded by

Shabaz Sayed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
434 views18 pages

UI5 and Fiori App Development On BAS With OData

The document provides an overview of a 40+ hour training on UI5 and Fiori development with Business Application Studio and WebIDE. The training covers fundamentals of HTML5, CSS, JavaScript, jQuery, UI5 framework concepts, MVC architecture, controls, views, models, binding and more. It also includes 7+ case studies, latest tools, certification guidance and interview questions. At the end of the training, participants will be able to develop and maintain Fiori applications and integrate them with SAP systems.

Uploaded by

Shabaz Sayed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

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

You might also like