Appearance
Course overview
Build your first SAPUI5 applications and learn how interface controls, event handlers and data models work together. These pages cover Lessons 1–5 of the frontend course. Later stages introduce richer applications, OData V4 and SAP Fiori elements; ABAP Cloud and RAP are covered in a separate module.
Before you begin
You should be comfortable with basic JavaScript variables, functions, objects, arrays and conditions, and recognize HTML, CSS and JSON. This course introduces SAP frontend development; it assumes those programming foundations.
Use VS Code, Node.js 24.x with npm, Git and a current browser. Install SAP Fiori tools in Lesson 1. The course apps use SAPUI5 1.148.12. You need internet access for dependencies and UI5 resources, but no SAP backend or account for these five lessons.
Learning sequence
| Lesson | Focus and outcome | Learning pages |
|---|---|---|
| 1 | Generate an app and connect buttons to a Controller. | Guide · Companion · Assignment |
| 2 | Understand the project, reuse a module and commit with Git. | Guide · Companion · Assignment |
| 3 | Build a responsive form with validation and feedback. | Guide · Companion · Assignment |
| 4 | Load JSON and create, update and delete local records. | Guide · Companion · Assignment |
| 5 | Complete Project 1: Employee Task Manager. | Guide · Companion · Assignment |
Work through the lessons at your own pace. Use the checks to decide when you are ready to continue, and revisit explanations or practice as needed. Lesson 5's guide and assignment support the same project. Companions are references to consult whenever useful.
How to use each page
- Guided lesson: follow the build steps and verify the starting and finishing behavior.
- Companion: review the concepts, trace a small code example and consult the linked official documentation.
- Assignment: apply the patterns independently, record the acceptance checks and explain your decisions.
Use the sidebar to move between a lesson's three pages. Search finds concepts across the site. Suggested answers and hints can be expanded when you need them.
Continue or revisit a lesson
Open the relevant guide and follow its setup steps. Lesson 1 explains project generation and configuration; Lesson 5 explains how to adapt a copy of your previous work. Completed checkpoints are available when you need to recover or compare an implementation. Trace any reference code before making changes. Use the companion to identify the role of each file, then complete the assignment and its verification table.
Keep your guided lesson project for the next guide. Assignments 1–4 use a separate copy so later complete-file replacements do not remove your extra handlers. For Lesson 5 and its assignment, continue the same project. See working and submitting for the folder and packaging instructions.
What completion looks like
By the end of Lesson 5, you should be able to explain a View/Controller interaction, import a reusable module, validate form values, read binding paths and use a row's context to update or delete the intended record. You should also be able to diagnose a failed request or module and recover from a checkpoint.
Local JSONModel changes exist in browser memory. Reloading restores the seed data. Service-based persistence belongs to the later OData part of the course.
Start Lesson 1 · Get recovery checkpoints · Open the notes template