SkillSurf
SkillSurfRide the Wave
Enterprise Applications

SAP UI5 & Fiori Development with ABAP OOP

Master Responsive UI5 Architectures, ABAP Object-Oriented Design, NetWeaver Gateway, and End-to-End OData Services

4.9(1,380 students)
60 Hours
Advanced
SAPUI5SAP FioriABAP OOPODataNetWeaver GatewayWeb IDEREST API
SAP UI5 & Fiori Development with ABAP OOP

Enroll in SAP UI5 & Fiori Developer

Get started with a free demo class.

By submitting, you agree to our privacy policy. We'll never share your details.

Live Online
Classroom
Weekend Batches Available
Lifetime Access to Recordings

Course Overview

This comprehensive developer training program delivers end-to-end expertise in architecting and constructing modern, consumer-grade enterprise user experiences within the SAP ecosystem. Moving systematically from client-side JavaScript design patterns up to backend database integration, this curriculum covers the dual realities of contemporary SAP development: front-end responsive programming with the SAPUI5 framework and backend service modeling with Object-Oriented ABAP (OOP). Developers will master model-view-controller (MVC) structures, component initialization blueprints (`Component.js`), and dynamic routing setups for Master-Detail cross-device views. Concurrently, the course grounds engineers in the architectural mechanics of the SAP NetWeaver Gateway, teaching them to design, test, debug, and publish enterprise RESTful OData pipelines matching complex transactional entities.

Who Should Learn

ABAP Developers and Technical Consultants eager to transition from classic SAP GUI screens to modern web paradigms
Full-Stack Software Engineers and Web Developers wanting to integrate modern front-end layers into core SAP ERP systems
Solutions Architects intending to build decoupled, scalable enterprise architectures using secure gateway frameworks
Application Engineers seeking deep technical knowledge of end-to-end OData entity bindings and responsive UI5 layout tools

Prerequisites

  • A solid grasp of core web development pillars (HTML5, CSS3, and procedural JavaScript logic)
  • Prior exposure to baseline programming models or general familiarity with SAP systems navigation

Learning Outcomes

Build responsive, device-agnostic enterprise web applications leveraging the open-source SAPUI5 framework
Implement programmatic client-side routing routines to power multi-pane Master-Detail navigation views across tablet, mobile, and desktop layouts
Write modular, component-driven client code leveraging structured `Component.js` containers, fragments, and internationalization files
Architect reusable, scalable backend logic models using advanced Object-Oriented ABAP (OOP) classes, visibility rules, and interface models
Deconstruct and monitor the underlying architecture of the SAP NetWeaver Gateway server tier to balance incoming data payloads
Design and generate custom RESTful OData services published in JSON and XML data delivery formats
Implement complete backend transaction engines to execute create, read, update, delete, and query (CRUD-Q) operations
Optimize network data footprints utilizing advanced server-side OData processing filters (`$filter`, `$expand`, `$select`, `$top`)

Course Curriculum

1Module 1: SAPUI5 Core Architectural Concepts & Setup
5 topics
  • Framework Fundamentals: Understanding structural differences between openUI5, SAPUI5, and standard legacy Fiori layouts
  • Environment Initialization: Bootstrapping the runtime framework, exploring Web IDE environments, and handling dependency files
  • Framework Configuration: Setting experimental flags, reviewing browser/platform support matrices, and auditing frontend security layers
  • MVC Architecture Patterns: Decoupling application segments into data Models, XML Views, and client-side JavaScript Controllers
  • Application Structuring: Encapsulating system components using modern structural definitions and localized translation assets
2Module 2: Advanced Fiori Layouts, UI Controls & Client Navigation
5 topics
  • Component Engineering: Harnessing the power of `Component.js` files to decouple instantiation logic from presentation layouts
  • Responsive Grid Layouts: Crafting responsive layout grids using specialized display controls (`sap.m.Table`, `sap.m.List`, `sap.m.Icontabbar`)
  • Master-Detail UX Blueprints: Coding dynamic multi-column layouts optimized for concurrent mobile and desktop displays
  • Routing Engine Mastery: Initializing hash-based browser routing maps, passing parameters, and handling target view states
  • UI Optimization: Reusing XML snippets using dynamic Fragments to manage popups, dialogs, and secondary inputs code-free
3Module 3: Advanced Object-Oriented Programming (OOP) in ABAP
6 topics
  • Class Structural Design: Transitioning from traditional procedural reports to encapsulation models using Objects and Classes
  • Component Attributes: Implementing Instance, Static, and Constant attributes inside standard class templates
  • Access Protection: Designing domain access security layers utilizing Public, Private, and Protected visibility barriers
  • Method Engineering: Coding specialized class methods with importing, exporting, changing, and returning signature parameters
  • Relationship Paradigms: Working with structural object links including Association, Aggregation, Composition, and Generalization
  • Polymorphism & Abstract Design: Implementing Interfaces, structuring Abstract Classes, and mastering Widening/Narrowing type-casting rules
4Module 4: SAP NetWeaver Gateway & RESTful Service Foundations
4 topics
  • Gateway Architecture: Mapping technical component connections between back-end business suites and the front-end Gateway server layer
  • REST Architecture Rules: Mastering HTTP methods (GET, POST, PUT, DELETE) and stateless client-server data operations
  • OData Protocol Mastery: Understanding data transport mechanisms, advantages, and inspecting JSON vs. XML data formats
  • Service Discovery: Dissecting published OData payloads via Service Documents and deep parsing of underlying Service Metadata XML schemas
5Module 5: Designing & Coding CRUD-Q OData Operations
4 topics
  • Service Engineering: Defining Entity Sets and mapping structural data models within the Gateway Service Builder (`SEGW`)
  • Data Extractions (Read & Query): Implementing code methods to fetch individual entity blocks and map full entity listings
  • Data Mutations (Create, Update, Delete): Writing persistence logic routines to process raw payloads, validate inputs, and handle drop alerts
  • Debugging and Testing: Tracing end-to-end payload routing channels utilizing the integrated Gateway Client diagnostic tool
6Module 6: High-Performance OData System Query Controls
4 topics
  • Entity Projections: Optimizing network payload sizes through strategic query filtering (`$filter`) and field selection (`$select`) controls
  • Dataset Ordering: Sorting data payloads directly at the database layer using server-side sorting options (`$orderby`)
  • Paging Architecture: Implementing high-performance client-side paging architectures using data offsets (`$top`, `$skip`, `$inlinecount`)
  • Entity Inlining: Resolving data-fetching bottlenecks by gathering nested relationship parent-child structures via inline expansions (`$expand`)
7Module 7: Client-Side Testing, Deployment & Optimization
3 topics
  • Front-End Mock Testing: Constructing standalone local mock servers to isolate client UI code validation from database layers
  • Diagnostic Utilities: Leveraging built-in tracing elements, troubleshooting tools, and console monitoring to resolve rendering faults
  • Deployment Pipelines: Packaging functional web assets, uploading packages to ABAP repositories, and registering Fiori Launchpad tiles
8Module 8: Capstone Enterprise App Engineering Project
5 topics
  • Project Blueprinting: Scoping a decoupled asset tracking or workforce allocation dashboard mapping back to live database structures
  • Backend Schema Development: Writing custom Object-Oriented ABAP classes linked to clean transactional database targets
  • Gateway Middleware Creation: Developing an OData middleware pipeline complete with relational associations and query filters via `SEGW`
  • Front-End Layout Assembly: Structuring a responsive Master-Detail SAPUI5 app complete with dynamic lists and data-bound fields
  • Validation Phase: Running diagnostic payload logs, proving structural layout fluidness, and deploying code modules successfully

Certification

Earn the SkillSurf Certified SAP UI5 & Fiori Application Engineer credential upon successfully deploying a functional CRUD-Q decoupled application stack and passing our comprehensive architecture evaluation.

Frequently Asked Questions

SAPUI5 is the technical framework—the underlying HTML5/JavaScript coding toolkit, libraries, and MVC structure used to build applications. SAP Fiori is the design paradigm—the official design guidelines, user experience philosophies, structural behavior metrics, and visual styling rules that define how modern SAP web applications look, react, and handle workflows.
Modern front-end applications built with SAPUI5 are completely decoupled from back-end logic and communicate exclusively via RESTful OData web services. To provide data to these services, you must program the underlying SAP NetWeaver Gateway backend, which is engineered entirely using Object-Oriented ABAP classes, handlers, and interface structures.
The SAP NetWeaver Gateway acts as an enterprise middleware engine. It securely bridges the gap between secure backend business tables and external web channels. It securely translates complex internal ABAP data variables and functions into standard, universal HTTP OData endpoints that can be read by any modern web framework or mobile interface.