SAP Fiori is an advanced platform offering a seamless and intuitive user experience across devices, utilizing SAP NetWeaver and the SAPUI5 framework to create responsive web applications. Introduced on May 15, 2013, it is available to SAP customers at no additional cost, enhancing workflows with hundreds of pre-built, role-based applications. Recent updates have improved its performance, accessibility, and consistent usability across cloud and on-premise systems, redefining SAP software to be more efficient, user-friendly, and adaptable to modern business needs.
Introduction:
Introduction to SAP UI5, SAP Fiori, OData Services , CDS
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 S/4 Hana CDS Views + Fiori Elements + UI Annotations
Install & Setup Eclipse Tool with ADT Plugins
Install & Setup SAP Web IDE Tool
Install & Setup SAP Business Application Studio
Install & Setup SAP Cloud Connector
Creating CDS Views:
Create CDS View with Joins ( Inner Join , Left Outer Join )
Create CDS View with Associations, Cardinality ,Parameters
Create CDS View with Built-in Functions , Expressions & Operators
Create CDS View with Value Help ,Virtual Elements
Create CDS View with Ui Annotations
Generate Service Artifacts from CDS View.
Generate OData Service from CDS View
SAP Fiori Elements:
SAP Fiori List Report Element
SAP Fiori Over View Page Element
SAP Fiori Analytical Page Element
Develop SAP Fiori List Report Element App via CDS View
Filter Select-Options, Search Helps ,Grouping, Sorting
Facet, Field Group, Line Item
BOPF CRUDQ operations
Adding UI Annotations
Develop SAP Fiori Overview Page Element App via CDS View
List Cards
Table Cards
Analytical Cards (Column / Line / Donut / Waterfall )
Adding UI Annotations
Develop SAP Fiori Analytical List Page Element App via CDS View
KPI Card
Visual Filter
Chart & Table
Adding UI Annotations
Standard App Enhancements:
Extensions, In-App Extensions, Side-by-Side Extensions
Ui Adaptation in Browser Level
Enhancements in SAP Ui5 Visual Editor
SAP OData ABAP Services on Gateway Service Builder
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 )
SAP Ui5 / Fiori + Fiori Like
App Development & Enhancements
on
SAP Web IDE & SAP BAS
Installation of SAP WEB IDE tool & SAP Business Application Studio 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 ,
Routes & Targets for Navigation between Views,
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 )
File Upload via OData Service
File Download via OData Service
File Preview via OData Service
Fetch and Export Data to ExcelSheet
Triggering Email with Status/Content
Import & Export of SAP Fiori Apps
Deploying SAP Ui5/Fiori apps to SAP Ui5 ABAP Repository
Integration of Apps into SAP Fiori LaunchPad:
Integrating SAP Ui5 Apps
Integrating SAP Fiori Apps
Integrating SAP Webdynpro Apps
SAP Fiori Launch Pad Configurations
Launch Pad Instance Roles
Semantic Objects
Catalogs
Tiles
Target Mappings
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,, )
SAP Theme Designer Tool
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
XML ( Extensible Markup Language )
-XML Introduction
-XML Syntax
-XML Elements/Classes
-XML Attributes/Properties
-XML Namespaces
-XML Parser
-XML DoM
-XML Schema
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 ( Java 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
