arrow_back
Important link & materials
PPT - SAP UI5 FIORI OData - updated on 14 Nov 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
Sample OData service by OData.org
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
21 - Base controller, model basics
21 - Global variable, controller hook methods, and base controller example code
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)
26 - Part - 1 - Screen elements, formatting input data
26 - Part - 2 - formatting input data
26 - Screen elements, formatter - example code
Handling data validation and formatting (coming soon)
27 - Resource model, XML Model, UX Design principles
27 - Resource model useful links
27 - Resource model example code
27 - xml model example code
10 - Assignment - Resource model Table heading with naming convention, Field label with general text
11 - Assignment - XML Model with multiple employee data
Advanced UI Techniques
28 - FIORI Intro, FIORI Like app preparation, FIORI App Guidelines
Using UI elements and controls (coming soon)
Creating responsive and adaptive UI (coming soon)
29 - FIORI App like creation process with - Component.js, FIORI App Structure, simple app
29 - FIORI App like code
30 - Pages, Navigation, List items
30 - FIORI App Like - Template
30 - FIORI App with pages, navigation, list items
12 - Assignment - Prepare data model with three entity sets
31 - manifest.json, list item binding
31 - example code Manifest.json, List item binding, filter operations on items data
32 - list item operations, master detail app, split app
32 - example code for worklist application, page navigation with object header
32 - example code for split app
33 - Tab control, populate sub item data using aggregation binding
33 - Example code for SplitApp, Icon tool bar, sap.m.Table, simple form
33 - Example code for fragments
13 - Assignment - Add Tooltip on placing icon tool bar
34 - Dynamic fragments
34 - Example code - static fragment and dynamic fragment
14 - Assignment - Icon tab bar name, default one icon tab bar, pop up for table filter
35 - Dynamic fragments, load data to fragment
35 - Example code - Dynamic fragment, dynamic binding, pop screen with values, return back selected value to screen
15 - On Supplier filter, select multiple values, filter data accordingly with data in table
Working with OData Services
Consuming OData services in SAP UI5 (coming soon)
36 - Introduction of OData
36 - Dynamic fragment popup & Introduction of OData
37 - Basics of ODATA CRUD operations in backend
37 - OData service test URL operation specific
38 - OData associations, navigation, $expand, testing, browser extensions, EPM data model generation
39 - OData - Project, entity, entity set, artifacts, - creation, publish service & testing
39 - UI5 - Table filter with selected values in POPUP
16 - GWSAMPLE - Products, Supplier - Test will all OData operations with detailed descriptive document
40 - OData - get, select, filter, search, create, update, delete operations
40 - Products - Get entity set - code
40 - Products - Get entity - code, with exception handling
41 - ODATA Post, Update, Delete, Association
41 - Create entity code for Product
41 - Update entity - Product
41 - Delete entity - Product
41 - Get entity set - Supplier
41 - Get entity - supplier ( for both normal & association with navigation )
42 - OData - Function import, working with images
42 - Function import - Max price, minimum price, category wise highest price
43 - OData Image & service generation
43 - Stream pre-requisites - MPC Extension
43 - DPC Extension - Get stream code
17 - Assignment - Practice odata project with Service Implementation
Introduction to SAP Fiori
Configuring SAP Fiori Launchpad
Creating SAP FIORI App
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)
Cloud connector, cloud <--> on-premise, FIORI Template with odata service
44 - Cloud connector
45 - Connect OData with UI5
46 - OData calls in UI5 ( Meta data, query, read, expand, pagination, search)
46 - Middleware notes
46 - Running notes for this session
UI5 Key concepts - Routing, navigation, data posting to OData, screen sizing
47 - Routing and navigation
47 - Routing and navigation end to end example - test code
48 - Route match handler, & OData post
49 - OData Post operation
49 - OData data post with an example - code
50 - OData - read, delete, error log, picture, function import
50 - OData - Read, Delete, Error / Success log, Function Import, Images - example code
51 - OData Update, App deployment, FIORI App configuration