This repository contains the material for the SAP TechEd 2025 session called AD166 - Taking UI to the next level: Develop SAPUI5 with SAP Build.
By completing these exercises, you'll gain hands-on experience in developing web applications using the SAPUI5 framework and TypeScript. Furthermore, you'll discover how to seamlessly integrate UI5 Web Components into your SAPUI5 application.
In the last exercise, you will learn how to use the UI5 Linter to ensure your application follows the latest best practices.
🏢 Scenario: You're developing for "Keep Cool, Inc.", a company that operates multiple icehouses nationwide. They've recently upgraded their facilities with IoT-enabled sensors that transmit real-time temperature and operational data via internet connectivity. Your mission is to build a modern web application that consumes this sensor data, provides intuitive visualizations, and delivers a comprehensive dashboard for monitoring sensor status - enabling the operations team to quickly identify and respond to potential issues before they impact their cold storage facilities.
Start the exercises here
From this list, you can not only access each exercise directly, but also also browse the resulting sources:
- Getting Started
- Exercise 1 - Project Setup Using Easy-UI5 (browse sources)
- Exercise 2 - Basic UI5 Configuration and View Creation (browse sources)
- Exercise 3 - Show Sensor Content (browse sources)
- Exercise 4 - Improve Visualization (browse sources)
- Exercise 6 - Add a Dialog using UI5 Web Components (browse sources)
- Exercise 7 - Second View with Navigation with Help of Joule (browse sources)
- Exercise 5 - Filtering With the IconTabBar (browse sources)
- Exercise 8 - Card with NumericHeader (browse sources)
🏢 Scenario: In this exercise, we assume there is an existing UI5 app developed several years ago. This app has been extended from time to time but never checked for the usage of deprecated APIs. The goal is to modernize the app and migrate it to the latest best practices using the UI5 Linter.
Follow these steps to access the resulting code of each exercise. This is useful if you want to skip ahead or jump directly to specific exercises. For example, to continue with exercise 6, you can import the code of exercise 5 and continue from there.
-
Download the repository
- Navigate to this GitHub repository
- Click the green Code button
- Select Download ZIP from the dropdown
- Extract the ZIP file to your local machine (creates folder
teched2025-AD166-main)
-
Import to SAP Business Application Studio
- Navigate to
teched2025-AD166-main/exercises/exX/(where X is your desired exercise number) - Copy or drag-and-drop the
keepcool.sensormanagerfolder into the Explorer view of SAP Business Application Studio - Open the
keepcool.sensormanagerfolder in SAP Business Application Studio
- Navigate to
-
Install dependencies
- Open a new terminal in SAP Business Application Studio
- Run the following command:
npm install
-
Start the application
- Run the following command in the terminal:
npm run start
- The application will open automatically in a new browser tab, or follow the terminal link to open it manually
Please read the CONTRIBUTING.md to understand the contribution guidelines.
Please read the SAP Open Source Code of Conduct.
Support for the content in this repository is available during the actual time of the online session for which this content has been designed. Otherwise, you may request support via the Issues tab.
Copyright (c) 2025 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.