SAPUI5 Training Contents

SAP Fiori apps are developed by using UI Development Toolkit for HTML5 (SAPUI5). The SAPUI5 runtime is a client-side HTML5 rendering library with a rich set of UI controls for building as well desktop as mobile applications. SAPUI5 stands for SAP UI Development Toolkit for HTML5 (also known as. Phoenix Include their own JavaScript, HTML and CSS into SAPUI5 based pages

Overview of SAP Ui5
Difference between Webdynpro and ui5
Architecture of SAP UI5
Overview on MVC model
Overview on End to End Data flow

Introduction to SAP UI5 IDE ( Eclipse )

Overview about IDE
Installing and adding sapui5 plugin , adding server(tomcat)
Exercise Creating a Sample project

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

Working with various properties of basic UI elements

Working with different properties of basic UI elements
Dynamically changing the properties of the UI elements
Exercise on Dynamically changing the properties of the UI elements

Navigation between the Pages

Over view on navigation
Introduction to sap.m.App
Adding pages to the App
Exercise on Navigation between the pages

Introduction to Different Layouts

What is a Layout
Various Layouts in SAP UI5
Working with Simple form layout , Matrix layout , Grid Layouts
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 , Information Messages
Exercise on Showing various messages in SPA UI5

Passing data from one view to other

Different ways of passing data from one view to other
Passing the data by sap.ui.core
Exercise on Passing data from one view to other

Playing with Different UI Elements

Overview on different Categories of UI elements like (simple , value holders , complex , layouts, dialog etc ..)
Reading data and setting data to the UI elements
Exercise on Working with various UI elements

Different Kinds of Models

JSON Model
OData Model
XML Model
Resource Model
Working with JSON Model to pass the data from one view to other.

Binding

Understanding the Binding Concept
Binding the UI elements with model
Exercise on Binding the UI elements with Model

Communicating with SAP back end system Using OData Service

Creating OData Model to communicate with OData service
Pulling and submitting data with Backend system using OData service
Performing the CRUD Operations(create, read, update, delete)
Exercise on CRUD operations using OData service

Split App Application

What is Split App
Creating a Split APP Application by consuming ODATA service

Introduction to WEBIDE

Creating Account in Han trial
Features of WEBIDE
Creating Simple Application in WEBIDE
Consuming ODATA services in WEBIDE
Creating a Split APP Application in WEBIDE

Working with Popup Dialogs

Creating a popup dialog
Exercise on Messages and Dialogs

Introduction to SAP Fiori

Creating Extension project for a standard fiori Application
View Modification
View Extension
Controller Extension
Exercise on Simple Fiori Application Customization

Introduction to Mobile Application Development

Introduction to Cordova
Integrating SAP UI5 Application into Cordova
Generating APK file
Installing the UI5 Application as a Mobile App
Practical exercise on creating a UI5 Mobile Application using Cordova