The SAPUI5 tutorials introduce you to all major development paradigms of SAPUI5 using practical examples in an interactive format.
Each tutorial has a different focus and guides you through the major topics of SAPUI5, helping you learn best practices for building apps with SAPUI5. The detailed documentation described here can be used in combination with downloadable code in the Explored app in the Demo Kit.
The apps that we build throughout these tutorials might simplify some aspects of real app development in order to focus on the “plot line”. (We admit that in some places, the UI might seem silly or unrealistic.) Please refer to the rest of the SAPUI5 documentation to dive deeper into the various topics, especially those described under Developing Apps and Essentials.
Many of the tutorials use the Blue Crystal (sap_bluecrystal) as default theme and the screenshots also appear with that theme. Blue Crystal is deprecated as of version 1.40, so you should use Belize (sap_belize) instead.
If you only want a first insight featuring the very basics, try the short “Hello World” tutorial.
If you are new to SAPUI5 or would like to get a refresher on the latest best practices, start with the Walkthrough.
After that, you can proceed with the other tutorials that build up on that knowledge and go into more detail on specific topics like data binding, navigation and routing, using smart controls.
Set up your development environment.
You can use any development environment or IDE of your choice that is suitable for Web development. If you don’t know which development environment to use, we recommend trying the SAP Web IDE. It is a cloud-based development environment optimized for SAPUI5 app development and includes a cloud runtime to test the app.
For more information on how to set up your development environment, see Development Environment.
Set up a (local) Web server to run the app that is being built throughout this tutorial. (In SAP Web IDE, this is already included).
Get SAPUI5 and place it in a location, which can be accessed in the resources folder (not necessary for SAP Web IDE).
Set up a folder where you would place the application content. We will refer to this folder as the “app folder”.
Familiarize yourself with the debugging tools of the browser and SAPUI5 in case you get stuck.
There are two different tutorial formats: Some tutorials start with an empty project and let you develop the whole app step by step, others start with an initial project in the first step that you can download from the Explored app in the Demo Kit. You use the code from this initial project as a starting point for the subsequent tutorial steps.
Each step of the tutorial starts with a preview of the user interface (UI) which shows how it will look like after the step is accomplished.
It then displays the files that have to be changed in the step, highlighting the changed code, along with an explanation of the entire process.
You can view and download the files for all steps in the Explored app in the Demo Kit. The Explored app always contain the latest version of the sample code. So if you find differences to the coding in the step description, follow the version in Explored. Depending on your development environment you might have to adjust resource paths and configuration entries.
It also mentions the recommended conventions that should be adhered to, and contains links to related documentation.
You don't have to do all tutorial steps sequentially, you can also jump directly to any step you want. Just download the code from the previous step, copy it to your workspace and make sure that the application runs by calling the webapp/index.html file.
Choose the link in the Coding section of the current tutorial step or open the sample in the Explored app directly.
Choose the icon with the Show source code for this sample tooltip in the right-hand part of the header bar to display all files included in this sample.
Choose the Download button. A download.zip file is downloaded to your local machine.
Extract or upload the zip file to your development environment and adjust the project configuration files to match your development environment.
Test the project by calling one of the HTML pages in your development environment and make sure that the app is displaying the features exactly as shown in the preview of the step.
Project Path and Deployment
All tutorials assume that the app is deployed and can be accessed under a certain path on a Web server. You will not be able to run the app without a Web server as the browser does not allow you to load the required resources locally due to security restrictions.
Depending on your server configuration and deployment mode, you will either have to include or exclude the webapp folder in your URL path. If you choose to deploy the app to another path, you will have to adapt the file paths and URLs accordingly.
You can either download and deploy the runtime to your (local) Web server or reference the CDN version located at https://sapui5.hana.ondemand.com/resources/sap-ui-core.js. Some development environments such as the SAP Web IDE also provide a local runtime for testing purposes. If you download the code from the samples in the Explored app, you will have to adapt the resource path in the bootstrap section of all HTML pages included in the project. In the tutorial code, we assume that SAPUI5 can be accessed from the /resources path of the server.
Accessing Remote Services
Browsers typically prevent accessing remote resources due to the Cross-Origin Resource Sharing (CORS) policy. If you would like to call a real service or remote resources, you will have to either configure the development environment or the remote server to accept these requests. This strongly depends on the development environment and is described in more detail below.
Error message “sap is not defined” in the console and the page stays blank
If you are running the tutorial in SAP Web IDE, you will have to configure the project descriptor neo-app.json. In this descriptor file, the path to the resources is already configured. Other development environments might need the resources to be copied to the server. Alternatively, you can use the CDN version of https://sapui5.hana.ondemand.com/resources/sap-ui-core.js.
No texts from the resource bundle are displayed in the app
You are running the tutorial with an outdated version of SAPUI5. Most tutorials need to be run with SAPUI5 version 1.30 or higher, because the models are instantiated by the manifest.json descriptor file. This feature is not available in release 1.28 and thus the models will not be loaded. As a workaround, you can instantiate the models manually in the init method of the app component.
No model data in the application when trying to access a real service
The configuration for calling remote services strongly depends on your development environment. All tutorials can be called with local test data instead if you are having trouble accessing a real service. Typically, the HTML page for running the app with local test data is called testService.html and located in the test folder of the app.
If these hints still don't help fix the problem in your app project, try downloading the solution of the current step or the next step of the tutorial from the Explored app. This should get your project fixed again, just don’t forget to check the resource path and the project configuration files again.
Please also check the generic troubleshooting section here: Troubleshooting.