Fiori is collection of Business Apps from SAP that can run on mobile, tablet and desktop. These apps are developed using Design Thinking methodology and follow specific design Guidelines.

However, SAP Fiori is an umbrella term used for the User Experience(UX) strategy SAP has come up with. It has to do with the front end / UI development. This strategy has various technologies under it like SAPUI5, Fiori Launch pad, Theme Designer etc.

SAPUI5 is a HTML5 library package from SAP. SAPUI5 uses JQuery library as its core library and many other SAP specific libraries . This is used to develop fiori apps.

SAP Ui5/oData/Fiori Overview:

What is SAPUI5?

Previous technologies before SAPUI5.

Disadvantages of previous technologies.

Advantages of Sapui5 and how it overcomes the disadvantages of previous technologies.

Architecture of SAP UI5 (MVC).

Understanding each layer of MVC model.

Landscape of SAPUI5 Fiori applications.

Clear understanding on End to End Data flow in SAPUi5/Fiori apps.

What is SAP Fiori

Difference between Ui5 and Fiori Applications.

Introduction to SAP WEBIDE and Hana cloud platform

Overview of SAP Cloud platform

Advantages of SAP WEBIDE

Creating an Account in HANA cloud.

Accessing the WEBIDE from Hana cloud platform.

Creating a Sample project using WEBIDE

Detail explanation on each file and folder in the project

Initial flow of execution in SAPUI5 Application

Creating the Project

Understanding index.html,bootstrap,shell, Component.js and manifest.json files in depth.

Understanding the Base view and View container.

Routing:

Detail explanation on Routing

Creating Two views for the navigation

Configuring the Routes and Targets for the views in manifest.json

Navigate from one page to other using URL Pattern

Navigation from one view to other view using buttons.

Exercise on Creating a sample views and understanding the complete flow with navigation between the pages.

Introduction to View & Controllers

Creating a view

Understanding the view’s Controller

Understanding the Controller’s Hook methods

Exercise on Creating a sample view and Implementing controller methods

Basis UI elements in SAPUI5

Working with different properties of basic UI elements like Text, Label, Input, Button etc.

Clear explanation on various properties and their purpose as per real time projects.

Dynamically changing UI element properties.

Changing the UI element behavior at runtime

Exercise for enable disable input fields at runtime

Exercise for show hide UI elements at runtime.

Exercise for setting dynamic text etc.

Introduction to Different Layouts

What is a Layout

Various Layouts in SAP UI5

Working with Simple form layout , Matrix layout , Grid Layouts

Working with HBOX, VBOX, Flexbox

Working with Panel , Icon tab bar

Working with Object Header

Displaying the form using 2 column and 4 columns design.

Exercise on Creating a Form Using various layouts

Validating the User Input

Types of Validation

Exercise on Mandatory data validation

Exercise on valid data validation (like.. email, phone number , pin code)

Exercise on Showing red color input field and error messages.

Message Handling

Various types of Messages in SAP UI5

Showing ERROR, SUCCESS, WARNING Messages

Exercise on Showing various messages in SPA UI5

Different Kinds of Models

JSON Model

OData Model

Resource Model

Working with all Models and understand when to use which model.

Binding

Understanding the Binding Concept

Various types of Binding

Property Binding

Aggregation Binding

Element Binding

Exercise on Binding the UI elements with bothJSON and ODataModels

Passing data from one view to other

Different ways of passing data from one view to other

Passing the data using json Model

Passing data using Model + binding concept

Passing data using Router with parameter

Passing data using element binding concept

Exercise on Passing data from one view to other in all these ways

Playing with Complex UI Elements with JSON DATA

Overview on different Categories of UI elements like (simple, value holders , complex , layouts, dialog etc ..)

Working with drop downs, combo box, multi combo box

Working with radio buttons, check box and value help (F4 help)

Working with Tables and List UI elements

Practical Exercise on all these UI elements

Working with Popup Dialogs and Fragments

Introduction to Fragments for reusable scenarios

Using Fragments for Popup dialogs using dialog UI element

Implementing F4 help functionality using Fragments

Exercise on PopupDialogs

HANA Cloud Connector(HCC) for front end to back end connectivity

Installing HANA cloud connector to connect WEBIDE to SAP gateway system

Configuration of HCC to point to gateway system

Creating Hana cloud platform destination

Establishing connection from WEBIDE to SAP Gateway system.

Working with ODATA Model

Creating ODATA Model to connect to ODATA service created in the back end

Consuming ODATA service to get the real back end data and perform CRUD operations from SAPUI5 Application .

Repeating all the UI elements with real back end data using ODATA Model like dropdown, combobox, multicombobox, radiobuttons, List , Table etc.

Property binding, Aggregation binding and Element binding using ODATA Model

Implementing F4 help functionality using real back end data using ODATA Model

Exercise on all these concepts practically with real time examples.

File Upload download Functionality

Uploading the file using File uploader UI element from sapui5

Downloading the file using ODATA service.

Developing Graphs / Charts

Column chart

Bar chart

Pie chart

line chart

Practical exercise on all the charts

Internationalization in SAPUI5/Fiori

Creating i18n folder

Maintaining property bundles for various languages

Binding the text values using the i18n resource model

Creating a separate property for to maintain text of each language

Making the application to support for multiple languages

SAP UI5 end to end Project (With complete real time standards)

Creating a SAPUI5 application

Creating 4 views for performing CRUD operations

Navigation between the views

Reading the back-end data into the Table in SAPUI5

Implementing all CRUD operations in the project

Deploying the application to Gateway server.

Configuring this application to fiori launch pad.

SAP FIORI Course Content

Introduction to SAP Fiori

What is SAP fiori application

Difference between SAPui5 application and SAP Fiori Application

Overview on SAP fiori design guidelines

Introduction to custom fiori application and standard fiori application.

Developing an end to end Custom Fiori application

Introduction to Fiori templates

Using Fiori Master Detail template to develop the Master detail Fiori application for making decision orieneted apps like approve/reject

Using Fiori master Detail CRUD template to develop a Fiori application for all CRUD operations

Using Fiori Worklist Template to develop a Worklist related application.

Introduction to custom fiori application and standard fiori application.

Extending a Standard Fiori Application

Creating Extension project for a standard fiori Application using SAP WEBIDE

Using View Modification to hide or show an element

Using View Extension to extend the UI

Using View replacement to replace the original code and inject our custom logic

Controller Extension to extend the functionality

Controller Replacement to replace the original code and inject our custom logic

SAP FIORI BASIS

Introduction to SAP Fiori and Architecture

Embedded architecture

Central HUB architecture

Components Installed

Fiori Launch Pad Configuration

What is Fiori launch pad?

Creating RFC b/w gateway and backend

Creating trusted connection

Creating Trusted RFC

Creating system aliases using SPRO

Enabling standard UI5 services by going to SICF

Adding standard ODATA services using maint_service

Adding the standard USER and ADMIN roles using PFCG

Standard fiori apps configuration

Intro to Fiori Apps Library

Adding the application specific standard odata services using MAINT_SERVICE

Activating the application specific UI5 service using SICF

Adding the Authorizations using PFCG

Custom to SAPUI5/SAP Fioriapps configuration in Launchpad

Create LPD_CUST role

Creating the semantic object

Creating Catalog, Tile and group

Creating a PFCG role and adding the catalog and group and assigning it to user .

Theme builder

Creating a Custom theme using theme builder and applying to launch pad

Changing the logo, back ground colors as per the client requirements.

Others

How to solve the cache issues

Performance improvement

General issues and resolutions.

Duration:45hrs (1hr per day)–Monday - Saturday

Note: The best part of our training is, we develop two end to end projects with complete real time standards, one for SAPUI5, another for SAP Custom Fiori development and Standard Fiori Extension also.

Best feedback we got: After attending your training, we can able to work on Realtime projects easily . from SAPIMA Tech students

Looking forward to meet you …