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.

Preview
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

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

For more information check the following sections of the tutorials overview page (see Tutorials):
  1. Step 1 (Option 1): Creating the Initial App with an App Template in SAP Web IDE
    This first step is only relevant if you decided to use the SAP Web IDE. In this step, we will set up the worklist app using a template and configure the service to display products in the app. The template includes generic app functionality and tests that can be easily extended with custom functionality for our use case.
  2. Step 1 (Option 2): Downloading the Code
    In this step, we set up the initial app without SAP Web IDE.
  3. Step 1 (Result): The Initial App
    With the generated code (SAP Web IDE) or the downloaded code from Explored, you have an initial app structure with the following content inside the webapp folder.
  4. Step 2: Custom Mock Data
    In this step, we want to change the mock data of the initial app. The service metadata only contains a description of the service entities. The mock server that is part of the app will auto-generate random mock data based on the data types defined in the metadata file. To have a more realistic development environment we will now add additional sample data.
  5. Step 3: Extending the Worklist Table
    In this step, we will edit the worklist table to include additional columns for our manage product stocks scenario. We display the supplier, the product price, and the number of units on order for each product and format the values accordingly.
  6. Step 4: Quick Filter for the Worklist
    For easily detecting and managing product shortages in our app, we will add a quick filter for the worklist table. Users can press the filter tabs to display the products according to whether they are in stock, have low stock or no stock. The table will update accordingly and show only the products matching the criteria.
  7. Step 5: Adding Actions to the Worklist
    Now we can easily spot shortages on our stock, but we also would like to take action and resolve it. Either we can decide to remove the product until the shortage is resolved or order new items of the product. In this step, we will add these actions to the footer of the worklist table.
  8. Step 6: Extending the Detail Page
    In this step, we will extend the detail page of our app to show more information of a given product with various UI controls. We will enrich the header area and display further attributes in an info panel for information about the supplier.
  9. Step 7: Adding a Comments Section
    In this step, we extend the product detail view by adding a feature allowing to add comments to the product.
  10. Summary
    You should now be familiar with the Worklist app template.
Related Information