Show TOC

Worklist AppLocate this document in the navigation structure

In this tutorial we will build an app using SAPUI5 that, for example, a shop owner can use to manage his product stock levels.

The app provides the following features:
  • Overview of all products

  • Track products with shortages or products that are completely out of stock

  • Reorder products that are low in stock

  • View product details and add comments

We will use the worklist template as a starting point for this tutorial and add additional features to the app as we go through the steps. The template implements a typical "Worklist" floorplan, one of the patterns that are specified by the SAP Fiori Design Guidelines, but you can also use it as a starting point for easily creating any kind of list-based apps. For more information about worklist floorplans, see the Related Information section at the bottom of this topic.

Figure 1: Start page of the app with list of products and actions
Figure 2: Product detail page of the app
Choose your development environment
You can do this tutorial either with SAP Web IDE or choose your own development environment:
  • If you use SAP Web IDE, you don't need to set up a development environment, a server and so on. All you need is a browser and an account for the SAP HANA Cloud Platform. If you don't have an account yet, you can easily get a trial account. We recommend to continue with the SAP Web IDE as it has out-of-the-box support for SAPUI5 and because there is no setup overhead at all.

    In this case, you start with the template that is available in SAP Web IDE as described in option 1 for step 1 of this tutorial (see Step 1 (Option 1): Creating the Initial App with an App Template in SAP Web IDE).

  • If you want to use your local development environment and deploy to any Web server of your choice, you download the code for step 1 from the Explored app in the Demo Kit under Worklist App. In this case, start with option 2 for step 1 of this tutorial (see Step 1 (Option 2): Downloading the Code).

There might be some small differences between the worklist app code generated by the SAP Web IDE template and the code downloaded from the Explored app. However, the differences are small and not relevant for the purpose of this tutorial


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/test/testService.html file.