SAP UI5 Course Content

Introduction
Introduction to SAP UI5 ,SAP FIORI , OData Services
Difference between SAP UI5/Fiori, Webdynpro ABAP & ABAP Apps
ABAP Basics:
SE11 ABAP Data dictionary
SE37 Function Builder , BAPI/RFC.
SE24 Class Builder ( OO Principles )

SAP OData ABAP Services on NetWeaver Gateway

Gateway Architecture Overview & Usage
OData advantages
OData formats JSON and XML
Structure of an OData Service
Service Document, Service Metadata Document
OData in SAP Solutions
EDM data types
SAP NetWeaver Gateway Service Builder (SEGW)
Data Model
Entity Types
Entity Sets
Properties , Navigation Properties
Association ( Referential Constraints, Principal Entity, Dependent Entity ) Association Set( Principle Entity Set, Dependent Entity Set ) Cardinality
Mappings
Runtime Artifacts
Model Provider Base
Model Provider Extension
Data Provider Base
Data Provider Extension
Service Maintenance
Registration in Hub Systems
Maintain
Error log
Gateway Client
HTTP Status codes, Common Messages and Common Errors Debugging oData ABAP Services

With & Without Mapping in Odata Services
BAPI's with Mapping ,
BAPI's without Mapping
Service URL Parameters
Filtering and Projecting (filter, ?search and select)
Sorting (orderby) , Counting (count)
Client-Side Paging (top, skip, and inlinecount)
Inlining (expand), Metadata(metadata)
Formatting (format with xml/json/xlsx)
CRUDQ Operations in Odata Services
CreateEntity( )
DeleteEntity( )
UpdateEntity( )
GetEntity ( Read )
GetEntitySet( Query )
UpdateStream()
GetStream( )
ExecuteAction( )
GetExpandedEntity( )
CreateDeepEntity( )
GetExpandedEntitySet( )
Batch Technique
For Executing Multiple Methods in Single Request(batch)
Function Imports in Odata Services
Single function import
Multiple function imports
File Handling in Odata Services
File Upload
File Download
Exporting Data to ExcelSheet
Insert Header + Items using Create_Deep_Entity( ) method
Fetch Header + Items using Get_Expanded_Entity( ) method
Configuration and Maintenance of Gateway
SPRO related Configurations
SICF related Configurations
Sending Custom Messages to front-end Apps ( UI5/FIORI )
CDS Based OData Services on SAP S/4 HANA

SAP FIORI + Fiori Like App Development & Enhancements on SAP Web IDE Tool

Installation of SAP WEB IDE tool

Local Installation Setup
Destinations Setup for Remote Back End Systems
HANA Cloud Setup
Destination Setup for Remote Back End Systems

Documentation Toolkit, API Reference & Help Links
Architecture
Configurations
Types of Views
Xml Views ( vvv important )
JavaScript Views,
Json Views,
Html Views,
Developing SAP Fiori Like Apps using
SAP Fiori Master-Details Template( Split App Template )
SAP Fiori Full Screen Template ( Work List Template )
Types of Fiori Apps ,
Transactional Fiori Apps
Analytical Fiori Apps
Fact Sheet Fiori Apps
Different Files used
views.xml
controllers.js
component.js
manifest.json
.properties
.css, .html
.fragment
formatter.js

Various libraries/packages
sap.m
sap.ui.commons
sap.ui.table
sap.ui.layout
sap.ui.layout.form
sap.ui.unified
sap.ui.core
sap.ui.model
sap.suite.ui.microchart
sap.viz
Screen Element Classes/Tags
Properties
Aggregations
Events
Methods
Developing Custom Fiori like Apps using sap.m library ( XML syntax )
Label ,Text, Input , Text Area, Link , Tool Header
Image, Image Map, Bread Crumb ,
Button , Toggle Button ,Switch
Panel, Splitter, Checkbox, Radio Button, Select
Carousel, pages, HTML, Input List Item, Formatted Text,
Progress Indicator, Slider, Range Slider ,Rating Indicator
Date Picker, Date Time Input, Time Picker ,
Date Range Selection ,Filter Bar ,
Search Field, Standard Tile, Slider Tile
Mask Input , Mask Input Rule ,Step Input
Menu , Navigation List , Side Navigation
Page , Semantic Page
Message Box messages, Message Toast , Message Strip
Icon Tab Bar, Icon Tab Filters
Navigation Containers
Wizard, Wizard Step
Layouts
Vertical Layout
Horizontal Layout
Grid Layout
Responsive Flow Layout
Responsive Grid Layout
HBox / VBox / FlexBox

Types of Models
OData Model
JSON Model,
Resource Model,
XML Model,
Types of Bindings
One-way Binding,
Two way Binding,
One Time Binding
Data binding , Aggregate binding , Model binding
Value Selectors with Static Values
RadioButtonGroup,
Select
ComboBox
Multi-Input
Multi-ComboBox
Tokens, Tokenizer
Value Selectors with backend Values ( via Odata Service )
RadioButtonGroup,
Select
ComboBox
Multi-Input
Multi-ComboBox
Tokens, Tokenizer
Forms using Simple Form
Date & Time Format Conversions between OData & Front-end Fiori
List screen Element with backend Values ( via Odata Service ) with Object List Item with Standard List Item
with Formatter Functions

Table Complex Screen Element with backend records ( sap.m ) via odata Service )
Table with Object Number
Table with Object Identifier
Table with Object Status
Table with Numeric Content
Table with various Screen Elements( text, input, slider ,rating, check, progress, image) Table with Formatter Functions

Dynamic Table Creation Based on OData Service Metadata
StandardTile with backend records( via Odata Service )
MicroCharts ( with backend Values via OData service )
Area Micro Chart
Bullet Micro Chart
Comparison Micro Chart
Delta Micro Chart
Harvey Ball Micro Chart
Radial Micro Chart
MicroCharts with Formatter Functions
Charts ( with backend values via OData Service
Bar Chart
Line Chart
Column Chart
Water Fall Chart Mock Data technique
Internationalization ( I18N ) & Resource Model ( .Properties )
MVC architecture
CRUDQ operations by consuming OData Services
OData ABAP Services
OData HANA Services
OData External Services
Consuming Multiple OData Services into Fiori Project
CallFunction Method to Trigger Function Import of OData Service
Fetch Header + Items via OData Service in Front-end App

Insert Header + Items via OData Service in Front-end App
Add Row , Delete Row on Table
Formatter Functions .
Implementing code in VIEWs and CONTROLLERs Technique with MVC pattern Routing Technique ,
Navigation between Views
Routes , Targets
Routing/Navigation with Data Transfer
Data Transfer Between Views
Fragments Technique
Front-end Validations
Dialog Box
Nested Views( Sub View's ) Technique
General Functionalities
Capturing values & Assigning values to Screen Elements
Enable-Disable screen elements, Visible-Invisible screen elements
Capturing Selected(Single/Multiple) Records from Table/List/MultiComboBox
Layout Editor for XML Views
File Handling ( File Upload & File Download )
Fetch and Display File as File Preview
Fetch and Download File via OData Service
Fetch and Export Data to ExcelSheet
Redirect method from URLHelper Class(sap.m)
IFrame Tag using HTML Class from (sap.ui.core)
FileUploader via OData Service
Triggering Email with Status/Content

Import & Export of SAP Fiori Apps
Deploying SAP Fiori apps to SAP ABAP UI5 repository
SAP Fiori Launch Pad Configurations
Launch Pad Instance Roles
Semantic Objects
Catalogs
Target Mappings
Tiles
Groups
PFCG Roles
SAP Fiori Mobile Client
Extension Projects & Extensions in SAP Fiori
Enhancements under Fiori Standard Apps ( Real Time apps )
Approve Purchase Order Fiori App
Manage Products Fiori app
Shopping Cart Fiori app Etc..etc..
Fiori Launch Pad Login Screen Changes
(background, logo ,position etc,, )
Developing SAP Fiori Apps using CDS based Odata Services on SAP S/4 HANA.

SAP UI5 (Development)

Installation of Eclipse Tool
Creating SAP Ui5 Project
Various Libraries
sap.m
sap.ui.table
sap.ui.commons
sap.ui.layout
sap.ui.core
sap.ui.model
Simple Screen Elements
TextView/TextField/PasswordField/TextArea/CheckBox
Image/RatingIndicator/ProgressIndicator/Link
Slider/RangeSlider/FormattedTextView
DropdownBox/ComboBox/RadioButtonGroup
SAP Ui5 Framework
Classes
Methods
Properties
Events
Types of Models
OData Model
Resource Model,
JSON Model,
XML Model,
Types of Bindings
One-way Binding,
Two way Binding,
One Time Binding
Data binding , Aggregate binding , Model binding
Complex Screen Elements
Table
Charts
Consuming OData Services
Table Screen Element
Table Data via OData Service
Table with various Screen Elements
Table with Formatter functions

Screen Elements with Static Values
Screen Elements with Backend Values via OData Service
Forms using Simple Form
Implementations using Views and Controllers
Debugging Front-end Apps
Front-End Validations
MVC architecture
General Functionalities
Capturing values & Assigning values from/to Screen Elements
Enable-Disable screen elements, Visible-Invisible screen elements
Capturing Selected(Single/Multiple) Records from Table
Internationalization & i18n.Properties file & Resource Model
Export Data to ExcelSheet
CRUDQ operations from Front-End (SAP Ui5/Fiori ) Via OData Service
CallFunction Method to Trigger Function Import of OData Service Navigation between Views
Data Transfer between Views
Layouts
Horizontal
Vertical
Matrix
Splitter
File Handling
Fetch and Display File as File Preview with Iframe Tag
Fetch and Download File using URL Helper Class
Fetch and Export Data to ExcelSheet

Debugging Fiori Apps
Adapting CSS
SAP Theme Designer Tool
Layouts
Horizontal
Vertical
Matrix
Splitter
Deploy SAP Ui5 Apps to SAP Ui5 ABAP Repository
Integration SAP Ui5 Apps into SAP FIORI Launchpad
Real Time Project Documents will be forwarded
SAP UI5, Fiori , Fiori Like Apps , OData-> Real Time Documents
Real time Functional & Technical Documents
Support Project Tickets
Common Issues/Errors
Complete Material
FAQ’s on SAP UI5, FIORI , FIORI Like , ODATA etc..
Resume Preparation

HTML5 ( Hyper Text Mark Up Language )
Creating Web page
Html Page Structure
Formatting tags
Forms and Input tags
Frames and Image tags
Audio , Video tags
Links, List tags
Table tags , Style attribute
Ordered List & Un Ordered List
HTTP Status Messages
CSS ( Cascading Style Sheet )
- CSS Properties
- Types of Style sheets( Internal, External, Inline )
- CSS comments
- Box model, padding, border, margin
- Classes, Div and Span
- Working with colors- Background images
- ID's, child selectors, pseudo classes
- Styling links, styling lists
- Rounded corners
- Linear gradient ,Float and clear
Scripting
- Statements and Comments
- Finding Errors
- Variables, Scope of Variables, Data Types
- Operators ,Constants
- Functions, Functions with Parameters
- Statements if, else, nesting if, Complex Conditions,
- Switch Case Statement
- Conditional Ternary Operator
- for loop , while loop
- Strings, String Methods
- Arrays, Array Methods
- Objects, Properties & Methods
- Date Class, Date Methods & Time Methods
- Regular Expressions