Developing SAPUI5 Applications

Learn how to create, extend, and test SAPUI5 applicatiions.

Set up your environment


Set Up SAP Business Application Studio for Development (tutorial)

SAP Business Application Studio is a development environment available on SAP Business Technology Platform. Before you can start developing using SAP Business Application Studio, administrators must perform the required onboarding steps that are described in this tutorial.

Develop Your First SAPUI5 Web App with Your Own Dev Tools (tutorial)

Learn about the available command line tools for Cloud Foundry development and integrate them with your favorite development tools, then use them to create a simple web app and deploy to the SAP Cloud Platform Cloud Foundry environment.


Getting Ready for UI5 Development with Visual Studio Code (blog series)

This blog you will help you to prepare your local development environment for your UI5 projects. Next to the required installation steps, it also contains a list of useful extension and lesson learned dealing with Visual Studio Code.

Start building applications


Developing web applications with SAPUI5 (eLearning)

In this openSAP course, you will learn the main concepts of SAPUI5 by experts from the UI5 development team. You will start from scratch with the very basics and lots of hands-on coding. As you go through the chapters of this course, you’ll learn more about the powerful development concepts and truly master SAPUI5.

Learn SAPUI5 | Fiori | full course for beginners (video – 5 hours, 45 min)

This video course teaches you everything you need to know to get started with SAPUI5 by going through all 38 steps in the official SAPUI5 Walkthrough tutorial. 

Scale Application Development with SAPUI5 (TechEd Hands-On Session - 2h)

Learn how to build a web application with SAPUI5 following latest recommendations and best practices. You will use the SAP Business Application Studio (BAS) as development environment and build a small freestyle application to get familiar with the latest development tools and recommendations. You can find the exercises and the associated solutions on GitHub.


SAPUI5 and Fiori for ABAPer's (video series)

Watch this 6-part series created for ABAP developers to learn how to develop SAPUI5 applications.

Start building applications using TypeScript


UI5 & TypeScript (documentation)

The central entry point for everything related to TypeScript in SAPUI5 development.


Learn App Development in UI5 and TypeScript (tuorial - 2 hours)

This brief tutorial introduces developers to UI5 application development in TypeScript. It includes creating a basic app from template, TypeScript coding in regular UI controls, as well as advanced topics like custom control development and using third-party libraries.


Set up a new UI5 app for TypeScript development (documentation)

Guide explaining step-by-step and command-by-command how you get to a complete UI5 TypeScript setup from scratch.


Getting started with TypeScript for UI5 app development (blog post)

Blog post by UI5 Chief Architect, Peter Muessig, explaining how to use the Easy-UI5 Yeoman generator to kick-start your TypeScript development experience for UI5. 


Using TypeScript in UI5 apps (documentation)

In-depth introduction to TypeScript in UI5 app code with statements about the type definition files provided for UI5, notes on TypeScript UI5 code, how to write UI5 apps in TypeScript, and converting UI5 apps from JavaScript to TypeScript.

Expand your skills


Evolved web applications with SAPUI5 (eLearning)

This openSAP course is the continuation of the course Developing web applications with SAPUI5  and is aimed at intermediate to advanced developers but is also suitable for ambitious UI5 beginners.  It starts with a quick catch up on the basics and the evolved best practices as well as new tools. Then it digs into more advanced scenarios and concepts step by step. 

Maps and 3D ade wasy with SAPUI5 (eLearning)

This openSAP course aims to help application developers and designers build maps and 3D into their applications with minimal effort using standard SAPUI5 controls. 

Performance checklist for SAPUI5 apps (blog post)

This blog post points you to some updated as well as newly added performance-related documentation inside the UI5 developer guide. You will learn about the most frequently encountered performance issues and how to address them.

SAPUI5 Flexibility

Learn about SAPUI5 Flexibility and the possibilities to easily adapt and extend the UI of SAPUI5 apps at design-time and runtime.

Test your SAPUI5 apps

General 


Testing tutorial (documentation)

In this tutorial you will learn about the testing tools that are delivered with SAPUI5. At different steps of this tutorial you will write tests using QUnit, OPA5, and the mock server. Additionally, you will learn about testing strategies, Test Driven Development (TDD), and much more.  


Add automated system tests with the test recorder to your CI/CD pipeline (tutorial – 1 hour)

In this tutorial, learn how to create system tests with UIVeri5 against the user interface of an SAPUI5 application. 


Unit testing


Testing UI5 applications (blog posts)

In this four-part blog series, learn about unit and integration testing, the mockserver, useful utilities, and advanced testing.


Component testing 


Integration testing with One Page Acceptance Tests (OPA5) (documentation)

OPA5 is an API for SAPUI5 controls. It hides asynchronicity and eases access to SAPUI5 elements. This makes OPA especially helpful for testing user interactions, integration with SAPUI5, navigation, and data binding.


System testing


wdi5 for cross-platform integration tests (documentation)

wdi5 is a Webdriver.IO service, utilizing UI5's test APIs. It is designed to run cross-platform end-to-end tests on a UI5 application, with selectors compatible to OPA5.  

Development Environments and Tools

Cloud Development EnvironmentTools for Local DevelopmentMiscellaneous
SAP Business Application Studio

Learn about SAP Business Application Studio, a cloud-based development environment that enables you to develop SAPUI5 applications.
UI5 Tooling

Learn about the UI5 Tooling, an open and modular toolchain, released and maintained by the UI5 team, to develop UI5 apps with the IDE of your choice.
Troubleshooting UI5

Learn about the various troubleshooting tools given with UI5.
Low Code Application Development on BTP

Learn you you can build enterprise applications fast with a unified low-code development and automation experience.
Tools and extensions for Visual Studio

Download extensions and tools that provide features including language editor support, code completion, API references, and workspace configuration.
UI5 Org on GitHub

Learn about the various UI5 community projects.

Ready for more? Develop your SAPUI5 skillset by following these prescribed learning journeys and view all missions and tutorials.