Preview SAP UI5 FIORI OData

Back

Important link & materials

PPT - SAP UI5 FIORI OData - updated on 03 Oct 2023

Notes on ERP, SAP, SAP Architecture, HTML & CSS

Notes on JavaScript

Notes on jQuery and Ajax

Notes on NodeJS, NPM

Notes on SAP UI5

SAP UI5 FIORI OData - code snippets

SAP FIORI Community

SAP FIORI App library

SAP UI5 SDK website

ERP, frontend, backend, FIORI - Introduction

01 - SAP UI5 FIORI OData - Introduction session

SAP UI5 FIORI - pre-requisites

02 - Pre-requisites for SAPUI5 | Basics of HTML

HTML, CSS, JS, jQuery, Node JS, NPM

03 - Basics of HTML

04 - HTML part - 2 & CSS Basics

05 - CSS part 2

06 - JS Basics

JS - examples with output

07 - Java Script part 2

JS - examples - 2

08 - Java script - 3

09 - JS & jQuery

10 - jQuery - Asynchronous, call back functions, client and serve architecture

11 - Ajax calls, Node JS

12 - Node JS, NPM - 2

Assignment - 1 - Load API data using AJAX call - display data in table format

Introduction to SAP UI5 FIORI OData

13 - SAP UI5 FIORI OData Introduction | What is FIORI ? | What is UI5 ? | What is OData ?

Getting Started with SAP UI5

14 - UI5 Development tools

15 - Understanding UI5 Architecture, load and initialize application

16 - Load, initialize, controller - Building your first UI5 Application

16 - first sapui5 app code

Assignment - 2 - Input screen elements using SAPUI5 SDK

17 - View initialization - JS view, API Key points, Controller syntax, Webapp folder structure, MVC Pattern

18 - UI5 Execution flow, UI5 app with JS - view & controller with one example

18 - jsview app code

19 - XML Views & JS Controller

19 - XML View, JS controller - example code

3 - Assignment - XML View with buttons and input fields

20 - Basics of OO concept, controls hierarchy & view layouts

4 - Assignment - In view work with horizontal layout and vertical layout

20 - Basics of OO concept, controls hierarchy & view layouts - example code

Advanced UI Techniques

21 - Base controller, model basics

21 - Global variable, controller hook methods, and base controller example code

Navigation and routing in SAP UI5 (coming soon)

Using UI elements and controls (coming soon)

Creating responsive and adaptive UI (coming soon)

Data Binding in SAP UI5

22 - Understanding models and data binding - json model

22 JSON Model example code

05 - Assignment - JSON Model data with different radio buttons

23 - Implementing two way binding

23 - JSON Model, Implementing two way binding - example code

24 - Binding modes, getProperty, setProperty, Expression binding (simple validation), switch models

24 - example code

06 - Assignment - Try examples in sap.m.tables

07 - Assignment - switch between models on pressing button

25 - Table controls (table, column, rows), aggregation & element binding, model switch

25 - Model switch - example code

25 - table, aggregation & element binding example

8 - Assignment - Display gender image on table based on data (Use expression binding)

9 - Assignment - In table - display - amount with currency, rating indicator (Add 2 new columns)

Handling data validation and formatting (coming soon)

Introduction to SAP Fiori

Overview of SAP Fiori design principles (coming soon)

Configuring SAP Fiori Launchpad (coming soon)

Creating SAP Fiori apps (coming soon)

Working with OData Services

Introduction to OData architecture (coming soon)

Consuming OData services in SAP UI5 (coming soon)

Performing CRUD operations with OData (coming soon)

Enhancing SAP Fiori Apps

Extending SAP Fiori standard apps (coming soon)

Customizing SAP Fiori themes (coming soon)

Integrating SAP Fiori with backend systems (coming soon)

Performance Optimization and Testing

Optimizing SAP UI5 app performance (coming soon)

Debugging and testing SAP UI5 apps (coming soon)

Performance testing strategies (coming soon)

Deployment and Maintenance

Packaging and deploying SAP UI5 apps (coming soon)

Preview - SAP UI5 FIORI OData