Show TOC

TutorialsLocate this document in the navigation structure

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.

You can use your preferred development environment to go through the steps of each tutorial. Each step explains a specific feature or aspect of SAPUI5 by way of small incremental changes. The code that is added in each step is highlighted in the code blocks and followed by a detailed explanation.
Note

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.

Learning Path

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.

With this tutorial, you learn how to create a simple first app in a few steps on a single HTML page. In this tutorial we will introduce you to all major development paradigms of SAPUI5. SAPUI5 comes with a powerful routing API that helps you control the state of your application efficiently. This tutorial will illustrate all major features and APIs related to navigation and routing in SAPUI5 apps by creating a simple and easy to understand mobile app. It represents a set of best practices for applying the navigation and routing features of SAPUI5 to your applications. In this tutorial, we will explain the concepts of data binding in SAPUI5. In this tutorial we will test application functionality with 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. In this tutorial, we will explore some advanced features of the mock server. If no OData service is available or you simply don’t want to depend on the OData backend connectivity for your development and tests, the mock server can mimic the OData back-end calls. It is designed to simulate an OData provider by intercepting the HTTP communication made to the server, and providing a fake output. All this is transparent to the data binding and usage of OData model. In this tutorial we will build an app using SAPUI5 that, for example, a shop owner can use to manage his product stock levels. In this tutorial you learn how to work with smart controls. In this tutorial, you will learn how to work with the controls in the Visual Interaction toolkit (sap.ui.vk library) to create applications with 3D viewing functionality.
Prerequisites

  • You should be familiar with JavaScript.

  • 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.

Outline of the Steps of Each Tutorial

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.

Tip

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.

Downloading Code for a Tutorial Step
To download the code from the Explored app in the Demo Kit, follow these steps:

  1. Choose the link in the Coding section of the current tutorial step or open the sample in the Explored app directly.

  2. 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.

  3. Choose the Download button. A download.zip file is downloaded to your local machine.

  4. 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.

Adapting Code to Your Development Environment
You might have to adapt parts of the coding to your local development environment to make the app work. Please check the following settings carefully:

  • 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.

  • SAPUI5 Resources

    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.

Troubleshooting
If you get stuck on a certain tutorial step, please have a look at the developer console of your browser. Are there log messages displayed related to the error? Did it work before, and your recent change broke the app? Try reverting the previous change and test if the app can be run again. The most common errors are as follows:

  • Error message “sap is not defined” in the console and the page stays blank

    Have a look at the resource path in the bootstrap of the HTML page you are trying to open. The path to the file sap-ui-core.js is probably incorrect and needs to point to the path where the SAPUI5 resources are located (typically globally under /resources or locally under resources).
    Note

    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

    Modern browsers prevent calling files and services from another server due to security restrictions. When accessing a remote service, you configure your application project or the remote server accordingly. Otherwise you will get a log message telling you that Cross-Origin Resource Sharing (CORS) is not configured and calling the remote URL is not allowed.
    Note

    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.