SAP UI5 & FIORI

Introduction

Introduction to SAP UI5

Introduction to SAP NetWeaver Gateway

Introduction to SAP Fiori

Difference between UI5/Fiori,Webdynpro & Web Technologies

ABAP Basics

SE11 ABAP Data dictionary

SE37 Function Builder,BAPI/RFC

SE 24 Class Builder(00 Principles)

SAP ODATA ABAP Services on NETWEAVER GATEWAY

Gateway Architecture Overview & Usage

Technical Components Involved

Introduction to REST,OData

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

Database Views with Mapping

BAPI’s without Mapping

Multiple BAPI’s with Single Entity Set

CRUD Operations in OData Services

CreateEntity()

DeleteEntity()

UpdateEntity()

GetEntity(Read)

GetEntitySet(Query)

GetExpandedEntitySet()

UpdateStream()

GetStream()

ExecuteAction()

Functions Imports in OData Services

Single function import

Multiple function imports

Multiple parameters for function Import

File Handling in OData Services

File Upload

File Download

Configuration and Maintenance of Gateway

SPRO related Configurations

SICF realated Configurations

Sending Custom Messages to front-end Apps(UI5/FIORI)

SAP UI5 WITH ECLIPSE & SAP WEB IDE TOOL

Introduction

Installation of SAPUI5 Plug-ins

Devlopment Environment & Configuration Setup

Documentation ToolKit,API Reference & Help Links

Types of Models

Resource Models

JSON Model

XML Model

OData Model

Bindings

One-way Binding,Two-way Binding,One-Time Binding

Data Binding,Aggregate Binding,Model Binding

Data Types

SAPUI5 Data Typing,User types

Integers,Floating-Point Numbers

String ,Boolean,Variables,Date and Time

Types of Views

JavaScript Views,(imp)

Xml Views(imp)

Json Views,

Html Views

SAP UI5 Screen Element Classes with

Properties

Aggregations

Events

Methods

SAP UI5 Screen Elements & Controls

Label,Text,Input,Text Area,Link,

Image,Image Map,Button,checkbox

Carousel,Html,Slider,Range Slider,Progress Indicators

Formatted Text View,Dialog Box

Date Range,Date Range Slider

Message Box Messages

Row Repeater,Containers,Panel,Splitter,Tab Strip

Road Map,Road Map Step

Value Selectors with Static Values

Radio Button Group

Drop Down Box

Combo Box

Auto Complete

Value Selectors with Backend Values(via OData Service)

Radio Button Group

Drop Down Box

Combo Box

Auto Complete

Table Complex Screen Element(sap.ui.table)(OData Service)

Table with various Screen Elements

Table with Formatter Functions

Dynamic Table Creation Based on OData Service Metadata

Forms

Layouts

Vertical Layout

Horizontal Layout

Matrix Layout

Responsive Layout etc

Charts/Graphs

Bar,Column,Line,Area,Pie,Donut Chart etc

Various Libraries and Packages in SAP UI5/Fiori

Sap.m,sap.ui.commons,sap.me,sap.viz,sap.ushell

Sap.ui(layout,table,model,unified etc)

MVC Architecture(Models,Views,Controllers)

SAP UI5/FIORI Communication with SAP Backend & Non-Sap

Backend

Via OData ABAP Service with CRUD operations

Via OData HANA Service

Via OData Extenal Services

General Functionalities

Capturing values& Assigning values to Screen Elements

Enable –Disable Screen Elements,Visible-Invisible Screen Elements

Implementing code in Views and Controllers Technique

Navigation between Views

Data Transfer Between Views

Shell Screen Element

UI5/FIORI FRONT END METHODS

Bind Element,Bind Rows,Bind Items,

Create,Update,Remove methods

Front-End Validations

File Handling

Fragments

Themes &Css

SAP Theme Designer Tool

Internationalization (118N),Resource Model,Properties Files

Debugging SAP UI5 Apps

Deploying SAP UI5 apps to SAP ABAP UI5 repository

Advance Concepts

Mobile Application development Using HAT(Hybrid Application

Toolkit)

Installing Hat Prerequiste software

Developing ui5/fiori app using webide

Configuring the HAT settings

Preparing the Project Using local HAT option

Adding BARCODE Scanner plugins

Generatings the APK

Installing the app in mobile

Sap Mobile Platform capabilities using HCPMS(SMP Server)

Developing UI5/fiori app using webide

Adding logon Manager

Adding Push notification feature to the app

Deploying the apps to SMP server

Using push URL to push the Notification to Mobile

SAP FIORI LIKE APP DEVELOPMENT

(Eclipse /Sap WebIDE tool)

Installation of SAP WEB IDE tool

Local Installation Setup

Destinations Setup for Remote Backend Systems

HANA Cloud Setup

Destination setup for Remote Backend Systems

Developing SAP Fiori Like Apps

SAP Fiori Like Master-Details Apps

SAP Fiori Like Full Screen Apps

SAP Fiori Like Crud Apps

Developing Custom Fiori like Apps using sap.m library(xml)

Properties ,Aggregations,Events,Methods

Labels,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,Progress Indicator,Slider

Range Slider,Rating Indicator

Formatted Text,Dialog Box

Date Picker,Date Time Input,Time Picker,

Date Range Selection,Filter Bar,Filter Item(s),Filter Group Item(s)

Control Header Container,URL Helper,Search Field,

Standard Tile,Slider Tile

Mask Input,Mask Input Rule,Menu,Navigation List

Side Navigation,Nav Container 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 etc

Various libraries /packages

Sap.m

Sap.ui.table

Sap.ui.layout.form

Sap.ui.unified

Sap.ui.layout

Sap.ui.core

Sap.ui.model

Sap.suite.ui.microchart etc

Value Selectors with Static Values

RadioButtonGroup

Select

ComboBox

Multi-ComboBox

Tokens,Tokenizer

Value Selectors with backend Values (via Odata Service)

RadioButtonGroup

Select

ComboBox

Multi-ComboBox

Tokens,Tokenizer

Forms

List Screen Element with backend Values (via Odata Service)

With Object List Item

With Standard List Item

Table Complex Screen Element with Backend Records (via Odata

Service)

Table with Object Number

Table with Object Identifer

Table with Object Status

Table with Numeric Content

Table with Various Screen Element(text,input,slider,rating

,check,progress,image)

Table with Formatter Functions

Tab Container with backend records(via odata Service)

Graphs and Charts (with Static Values)

Area Micro Chart

Bullet Micro Chart

Comparison Micro Chart

Delta Micro Chart

Harvey Ball Micro Chart

Radial Micro Chart

Graphs and Charts (with Backend Values)

Area Micro Chart

Bullet Micro Chart

Comparison Micro Chart

Delta Micro Chart

Harvey Ball Micro Chart

Radial Micro Chart

MVC architecture in SAP FIORI LIKE Apps

Crud operations with OData Service for SAP FIORI Like Apps

Formatter Functions for SAP Fiori Like Apps

Debugging SAP Fiori Like Apps

Adapting CSS to for SAP Fiori Like Apps

118N & Resource Model(.properties) for SAP Fiori Like Apps

SAP FIORI WITH SAP WEB IDE TOOL

Introduction

SAP WEB IDE TOOL SETUP For SAP Fiori Standard Apps

Types of Fiori Apps

Transactional Fiori Apps

Analytical Fiori Apps

Fact Sheet Fiori Apps

Architecture

Configurations

Extensions Projects & Extensions

Enhancements uder Fiori Standard Apps( Real Time Apps)

Approve Purchase Order Fiori App

Manage Products Fiori App

Shopping Cart Fiori App

Approve Leave Request App

Create Sales Order Fiori App

Change Sales Order Fiori App

Check Price & Availability Fiori App

Tracking Shipments Fiori App

Tracking Sales Order Fiori App

End-to-End Scenarios in Fiori

Different Files used under SAP Fiori Apps

Views.xml

Controllers.js

Component.js

Manifest.js

Neo-app.json

.properties

.css

.fragments

Formatter.js

.html

Functions/Methods/Events

All User Interface Elements under SAP Fiori(sap.m) with Xml

Value Selectors under SAP Fiori

Forms under SAP Fiori

Lists under SAP Fiori

Table,Table Column with Various Screen Elements under SAP Fiori

Crud operations with OData Service from SAP Fiori

Fomatter Functions in Fiori Apps

Charts under SAP Fiori

Adapting CSS to SAP Fiori Apps

118N & Resource Model(.properties) in Fiori

Layout Editor for XML Views

Import & Export of SAP Fiori Apps

Debugging SAP Fiori Apps

Deploying SAP Fiori apps to SAP ABAP UI5 repository

SAP FIORI LAUNCH PAD CONFIGURATION

Launch Pad Instance Roles

Semantic Objects

Catalogs

Target Mappings

Tiles

Groups

PFCG Roles (Role to User Assignment)

SAP Fiori Mobile Client

HTML5(Hyper Text Mark Up Language)

Creating Web Page

Html Page Structure

Basic Tags

Formatting tags

Forms and Input tags

Frames and Image tags

Audio,Video tags

Links,List tags

Table tags

Style & Semantic Tags

Programming (Script ) tag

Ordered List and UnOrdered List

HTTP Status Messages

CSS(Cascding 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

New Tags for the layout

Scripting

Statements and Comments

Finding Error

Variables,Scope of Variables,Data Types

Operators

Functions,Functions with parameter

Function with Multiple Parameters

Statements if,else,nesting if,Complex Conditions,Switch

Conditional Ternary Operator

While Loop,for Loop

Strings ,String Methods

Arrays,Array Methods

Objects,Properties & Methods

Referencing Elements in Script

Real Time Project Objects

SAP UI5,FIORI,FIORI LIKE APPS ,ODATA-Real Time Applications

Real Time Functional &Technical Documents

Support Project Tickets

Common Issues/Errors